document port/host backend api overrides

[fredvd]

I'm trying to add more documentation in the README.md for devs so they can override Volto's frontend port/host and the path to the backend api on the fly. I ran into this when I had multiple plone sites runnig on my dev laptop and wanted to switch the backend.

From looking at src/config/server.js I thought this should work:

HOST=localhost PORT=3001 RAZZLE_API_PATH=http://localhost:8181/OtherPlone yarn start

But there are two situations: a) working on Volto core when you use the the volto source repo, and b) working on a volto app created by create-volto-app and where volto is imported as an npm package.

create-volto-app

Situation b) , using a create-volto-app app. In the scaffolded repo there is src/config.js whee you can add port (and host and apiPath I assume), which is documented in the header:

  ...defaultSettings,
  port: 3333,
  host: 'localhost',
  apiPath: 'http://localhost:8383/Plone',
};

With `yarn start', the frontend starts, but listens on port 3000 instead of my port 3333 set in config.js and I see th default Plone welcome page.

With 'PORT=3333 yarn start' the frontend starts on port 3333, but I get an error "This page does not seem to exist…" on the first page load. so changing the port on the command line breaks up the apiPath setting in src/config.js.

'PORT=3333 RAZZLE_API_PATH=http://localhost:8383/Plone yarn start' doesn't help, same"This page does not seem to exist…".

In both this and the previous case the Network tab in the browser shows that all resources are loaded fine from the backend (and using localhost:8383/Plone).

github.com/plone/volto master

When I try to use PORT and RAZZLE_API_PATH on a volto master checkout I see slightly different behavior. I didn't mess with the source code by editing a config.js (not here).

'RAZZLE_API_PATH=http://localhost:8383/Plone yarn start' starts on port 3000 , uses the changed backedn and shows my default Plone page

'PORT=3333 RAZZLE_API_PATH=http://localhost:8383/Plone yarn start' gives the same behavior as with the create-volto-app situation: frontend volto port is changed to 3333, but the first page cannot find the Plone backend homepage anymore.

Summary: there is a weird interaction between ENV variables and config.js: src/config.js port doesn't, work, only using RAZZLE_API_PATH on volto master works, but adding PORT breaks the front page loading.

Reporting port number

With commit https://github.com/plone/volto/commit/3b6b906b9e08961f6045df9fc42fcd474ce066d0 yarn start is now reporting the port number again on volto master. This will probably also work with create-volto-app when a new release is made. The confusing quick until that release is that an 'create-volto-app' app loads the webpack development server (wds), which reports its port on startup in the console but which is unusable.

ℹ ｢wds｣: Project is running at http://localhost:3001/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /Users/fred/volto/testapp
ℹ ｢wds｣: 404s will fallback to /index.html
✅  Server-side HMR Enabled!
🚀 started

Why is WDS not activated (by default) on a volto master 'yarn start'?

Yes I realise I'm conflating 2.5 issues here, bad me, but they all clot together anyway. Except for the wds server, but it reports the changed port.

Questions

• How do I override port/host/api-backed consistent on the command line? RAZZLE_API_PATH alone works, adding PORT seems to break something inside Volto frontend.

• why isn't port in src/config.js not working in a scaffolded Volto app?