Tip: Running Volto on AWS Cloud9 you'll need to set a few env variables such as PORT

Development Plone 6 UI (Volto)
1

This is about setting the default ports for Volto. It addresses a specific problem related to Volto and Cloud9 IDE.

Problem: Volto launches on port 8080 by default on Cloud9 IDE

I often use Cloud9, The AWS IDE. In case there are others who use Cloud9 this is a "pro tip".

I've noticed that when I launch Volto on Cloud9 it attempts to listen on port 8080 and not 3000. This conflicts with the default port for the Plone API.
The message that comes up looks like this:

? Something is already running on port 8080.

Would you like to run the app on another port instead? (Y/n)

Solution: manipulate the PORT environment variable yourself

You'll need to also set CLIENT_PUBLIC_PATH and RAZZLE_API_PATH.

Option A: You could manually set the PORT environment variable. A command like this will work (my preferred option).

PORT=3000 CLIENT_PUBLIC_PATH=http://$C9_HOSTNAME:3001/ RAZZLE_API_PATH=http://$C9_HOSTNAME:3000/api yarn start

or
Option B: disable it by unsetting the PORT environment variable like this:

unset PORT
CLIENT_PUBLIC_PATH=http://$C9_HOSTNAME:3001/ RAZZLE_API_PATH=http://$C9_HOSTNAME:3000/api yarn start

About the PORT, CLIENT_PUBLIC_PATH and RAZZLE_API_PATH environment variables

razzle uses the PORT to set the default port for listening. Cloud9 instances have a PORT environment variable set to 8080. By default the CLIENT_PUBLIC_PATH dictates where static assets should be served from. According to the razzle docs, this defaults to http://${process.env.HOST}:${process.env.PORT + 1}/ which would be http://localhost:3001/.
Finally to avoid cross origin resource (CORS) issues, it is important that apiPath be accessed from the same port, the RAZZLE_API_PATH environment variable dictates where Volto will look for the backend API.

Localhost doesn't work for a cloud IDE. Thankfully the Cloud9 external hostname is stored in an environment variable C9_HOSTNAME and we use that to set the client public path.

You can learn more about razzle here: https://razzlejs.org/docs/environment-variables#adding-environment-variables-in-env

3

Interesting. Thanks for sharing @pigeonflight!

4

@tisto,
I'm still having some crossdomain errors (not sure how to resolve those yet):
here's the console output

Api.js:70 Uncaught TypeError: Cannot read property 'body' of undefined
    at Api.js:70
    at Request.push../node_modules/superagent/lib/client.js.Request.callback (client.js:611)
    at Request.push../node_modules/superagent/lib/client.js.Request.crossDomainError (client.js:628)
    at XMLHttpRequest.xhr.onreadystatechange (client.js:703)

My current approach for now is ssh tunneling

ssh ubuntu@addressofc9box -L 3000:localhost:3000 -L 3001:localhost:3001

this also requires a security group that opens up port 22 in AWS.

It works without the cross domain issues because the tunnel allows me to use localhost in my browser.

5

Did you configure CORS properly in your ZCML? If you run the frontend on port 3001 you have to amend this in your backend as well:

6

@tisto I didn't touch it. I'm sure that's the reason for the issue. For development that feels a bit much though.
The following got everything working for me :tada: :

PORT=3000 CLIENT_PUBLIC_PATH=http://$C9_HOSTNAME:3001/ RAZZLE_API_PATH=http://$C9_HOSTNAME:3000/api yarn start

I've updated the first post in this thread to reflect the proper solution. Now I can do Cloud9 based Volto development!!!! :slight_smile:

1 Like