Volto on an existing Plone 5.1.x project

Plone Support
3

At risk of restating everything you said above and BEFORE diving into an FAQ section... here are a few things that everyone doing Volto on an existing site should keep in mind.

Configure CORS in your buildout

Note: If your buildout is old enough to be using collective.recipe.zope2cluster, change it to use plone.recipe.zope2instance)

The entry for cors is part of a zcml-additional option. Something like this:

[instance]
...
recipe = plone.recipe.zope2instance
http-address = 8080
zcml-additional =
    <configure xmlns="http://namespaces.zope.org/zope"
             xmlns:plone="http://namespaces.plone.org/plone">
     <plone:CORSPolicy
    allow_origin="http://localhost:8080,http://127.0.0.1:8080"
    allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
    allow_credentials="true"
    expose_headers="Content-Length,X-My-Header"
    allow_headers="Accept,Authorization,Content-Type,X-Custom-Header,Origin"
    max_age="3600"
    />
  </configure>

Ensure you have the lastest plone.restapi as a package in your buildout

At the time of writing this was 7.0.0, so I pinned this to my versions
Also, because I'm still using Python 2.7 it means using an older version of PyJWT, something less than version 2.

[versions]
...
plone.restapi = 7.0.0
# Plone 5.1.x requires Python 2.7, you'll need to pin 
# your version of PyJWT to be something less than version 2.x
PyJWT = 1.7.1

Remember to actually install plone.restapi in your site

After rerunning buildout and restarting your site, install plone.restapi under Site Setup > Add-ons.

Use RAZZLE_DEV_PROXY_API_PATH so Volto points to the correct backend

The path to your Plone site may not be /Plone. If this is the case, you need to explicitly set the devProxyToApiPath.
For example, if the path to your site is /test, running on port 9080 launching Volto will look like this:

RAZZLE_DEV_PROXY_API_PATH=http://127.0.0.1:9080/test yarn start

My Use case

In my case, I use multipass to run my Plone instance. It is exposed at 192.168.64.4:8080/test.
As a result, my buildout entry for cors looks like this:

[instance]
<= instance_base
recipe = plone.recipe.zope2instance
http-address = 8080
zcml-additional =
# my instance uses multipass and runs at 192.168.64.4
    <configure xmlns="http://namespaces.zope.org/zope"
             xmlns:plone="http://namespaces.plone.org/plone">
     <plone:CORSPolicy
    allow_origin="http://localhost:8080,http://127.0.0.1:8080,http://192.168.64.4:8080"
    allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
    allow_credentials="true"
    expose_headers="Content-Length,X-My-Header"
    allow_headers="Accept,Authorization,Content-Type,X-Custom-Header,Origin"
    max_age="3600"
    />
  </configure>

The command for Volto would then be:

RAZZLE_DEV_PROXY_API_PATH=http://192.168.64.4:8080/test yarn start

I hope this helps someone (if only my future self :slight_smile: )

2 Likes