Volto on an existing Plone 5.1.x project

Plone Support
1

So I'm about to explore using Volto on top of a Plone 5.1.x site.
This is an intermin step until we can move to Plone 5.2 and Python 3.

The site has at least 10 custom content types and one add-on that makes use of collective.taskqueue (see discussion about concerns moving forward with c.taskqueue on Plone 5.2). Just want to put this out there:

  1. Are there issues with Volto and Plone 5.1?
  2. Are there key things that I will need to pay attention to?
2

At first sight, I do not see any reasons why Plone 5.1 shouldn't work with latest plone.restapi and latest Volto. I wouldn't recommend using an old plone.restapi version and an old Volto version because there are lots of combinations possible and we usually only test the latest ones.

That being said, we only fully test Plone 5.2 / Python 3 / latest plone.restapi / latest Volto. All other versions might/should work but we can not guarantee this.

Maybe we should start a FAQ section in our Volto docs for questions like this. PRs would be welcome. :slight_smile:

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
4

I wanted to add the api proxy settings in my Volto app configuration.
This is possible in the src/config.js. Between reading documentation and coming upon dead ends, it took me more than 30 minutes to find this.

According to the docs:
https://docs.voltocms.com/configuration/how-to/#extending-configuration-in-a-project
You must use an applyConfig function

export default function applyConfig(config) {
  config.settings = {
    ...config.settings,
    devProxyToApiPath: 'http://192.168.0.3:11030/mysite'
  };
  return config;
}

Here's the contents of my final src/config.js

/**
 * Add your config changes here.
 * @module config
 * @example
 * export const settings = {
 *   ...defaultSettings,
 *   port: 4300,
 *   listBlockTypes: {
 *     ...defaultSettings.listBlockTypes,
 *     'my-list-item',
 *   }
 * }
 */

import {
  settings as defaultSettings,
  views as defaultViews,
  widgets as defaultWidgets,
  blocks as defaultBlocks,
  addonReducers as defaultAddonReducers,
  addonRoutes as defaultAddonRoutes,
} from '@plone/volto/config';

export const settings = {
  ...defaultSettings,
  
};

export const views = {
  ...defaultViews,
};

export const widgets = {
  ...defaultWidgets,
};

export const blocks = {
  ...defaultBlocks,
};

export const addonRoutes = [...defaultAddonRoutes];
export const addonReducers = { ...defaultAddonReducers };

export default function applyConfig(config) {
  config.settings = {
    ...config.settings,
    devProxyToApiPath: 'http://192.168.0.3::11030/mysite'
  };
  return config;
}

(of course you'll need to know what you are overriding. The things you can override are located under
your-volto-app/node_modules/@plone/volto/src/config/index.js,
look for let config = { near line 53 of the index.js file.
)

5

A small tip: console.log(config) in your applyConfig function. Unfortunately the proxy's dedicated doc page hasn't been updated for Volto 12.

6

Yup. Mention of devProxyToApiPath and the configuration object was not enough information for me.
I had to do some more digging (like 30 minutes of digging) to learn about applyConfig and src/config.js.

Pros about the docs:
An example of using applyConfig for setting devProxyToApiPath is already there.

Cons about the docs
There is no mention of src/config.js.
I would mention src/config.js as explicitly as possible to fix the ambiguity in the docs.

7

I've made a pull request for this added explicit information about src/config.js to internal API proxy docs by pigeonflight · Pull Request #2274 · plone/volto · GitHub

2 Likes