When I am access the port 8080 classic plone, it show correctly
But
When I am access the port 3000
it result a no skin site?
Please help and thanks in advance
If you are running volto in development mode and accessing it through localhost you need to forward port 3001 aswell (PORT using volto +1)
Check console and network tab to see what is failing there.
For example I'm using port 3005 and I get errors like this if 3006 is no accessible:
GET http://localhost:3006/static/js/client.js net::ERR_CONNECTION_REFUSED
I try to access it remotely (thru the internet) , thats why I can't use localhost
By the screenshot looks like there are at least two errors:
- No styles
- Volto does not find the backend (Plone)
How did you start Volto? Whats the path of your plone site?
Volto by default expects Plone to be on localhost:8080/Plone if its on diferent path or port you need to use RAZZLE_DEV_PROXY_API_PATH variable.
For example starting Volto like:
RAZZLE_DEV_PROXY_API_PATH= http://localhost:8080/my-plone-site yarn start
What about if you inspect the website any error on console?
I just start that fresh re-install everything, and start Volto with
make start-frontend
But when I load with a browser and the stie still No styles
*The screenshot is updated
Here is the information as requested, and I have do search and cannot find solution.
LOG from webpack.FileSystemInfo
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@pmmmwh isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@loadable isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@babel isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@eeacms isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@kitconcept isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@formatjs isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@emotion isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@fluentui isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@seznam isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@semantic-ui-react isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@datapunt isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@juggle isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
Managed item /mnt/HDD2/PLONE_VOLTO/plone-site/frontend/node_modules/@popperjs isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
- 14 hidden lines
webpack 5.76.1 compiled successfully in 76048 ms
sswp> Handling Hot Module Reloading
Server-side HMR Enabled!
Volto is running in SEAMLESS mode
Proxying API requests from http://localhost:3000/++api++ to http://localhost:8080/Plone
Volto started at 0.0.0.0:3000 
What about if you inspect in your browser? What error is showing there?
If you are accessing volto through an IP try to configure volto with the HOST env var: HOST my.ip yarn start
I am total new to Volto
"If you are accessing volto through an IP try to configure volto with the HOST env var: HOST my.ip yarn start"
Yes, I assess through an IP can yon point me to a reference and allow me study how to do that. Thx
I try
HOST=x.x.x.x yarn start
I it take couple mins than... this time I can see the site... do you mean from now on my final site need run this to start? Sorry my sound maybe stupid but I am just the first time testing volto
You are running volto in development mode. So your browsers tries to download some files from localhost:PORT of volto + 1. In your case localhost:3001
Since you are accessing volto from an IP these request to localhost:3001 fail. You can change that telling volto the IP with variable HOST.
Now depending what you want you have various options:
- Start volto with production mode if you just want it to be accessible from the IP
yarn build
yarn start:prod
- Port forwarding to the server so you can access it from localhost if you want to develop
I don't use cookiecutter so I don't know if you already have some nice comands to do it.
I install volto this way: Create a Volto project without a backend – Frontend – Development — Plone Documentation v6.0
And here how do a simple deployment: Simple deployment – Frontend – Deploying — Plone Documentation v6.0
From Create a project with Volto (stable release) – Install — Plone Documentation v6.0
Note that the Plone frontend uses an internal proxy server to connect with the Plone backend. Open a browser at the following URL to visit your Plone site.
If you instead visit 0.0.0.0:3000, you might get the unstyled version.
I can confirm the issue of missing links to CSS when accessed from a different IP. The issue can be solved on the server side not only using yarn (older approach) as well by latest yarn less approach using it during the make command to start the frontend (or as persistent env variable setting):
The shell command in the solution and other comments is not obvious for newbies when offered inline: I rewrote this a bit more explicitly with the command in seperate lines and added an explicit example as well. Nice: Setting the env variable HOST works also with the make command approach. This is important since yarn is going away. Lookup the actual commands in the Makefile if you want to avoid make.
Start frontend
HOST=[[exposed Server-IP or qualified domain name]] make frontend-start
example:
HOST=192.168.168.123 make frontend-start
This IP is listed at the end of the startup output of the frontend:
...
✅ Server-side HMR Enabled!
API server (API_PATH) is set to: http://192.168.168.123:3000
Proxying API requests from http://192.168.168.123:3000/++api++ to http://localhost:8080/Plone
🎭 Volto started at 0.0.0.0:3000 🚀
Then use this host address to open the Plone frontend on another machine in your local network:
If in Development Mode make sure you open port 3001 in the firewall on the server as well, as it is needed for some Javascript code.
Update the Plone 6 Documentation
@stevepiercy @csanahuja let's add something to the Cookieplone setup docs after Install Plone with Cookieplone — Plone Documentation v6 as #troubleshooting-developer-access-from-other-ip this could extremely useful during initial installs.
Until then I start here:
We need to add this to the Cookieplone generated docs in the project as well:
We should add this to the top level README.md generated by Cookieplone in the project folder, still mentioning just the basic start.
One more thing: In the Cookieplone generated projects ./frontend/README.md there is a section mentioning the development setup, but there using a make frontend-docker-start command.
No idea if this runs into the same issue and/or needs some further detail.
IMPORTANT: Create and add a canonical link from both the README.md pointing or redirecting to the latest hints in the docs troubleshooting section, then allowing to mention workarounds like this on a nightly update(able) basis.
A redirect offers the option to redesign the troubleshooting experience later
@acsr would you please create issues in each of the appropriate repositories so that this gets captured in the right place? Someone will be much more likely to work on it when an issue is filed. This week is hectic for everyone, due to PloneConf starting next Monday.
Thank you!
This is my intention, but I wanted to avoid leaving these two topics untouched until the docs are fixed, because I have here some blockers as well. I will take care!
The port 3001 stuff is discussed here in an older post as well:
Done:
Add troubleshooting hints if frontend is accessed from another machine (not localhost) and missing CSS links in head · Issue #1780 · plone/documentation · GitHub (lazy one pointing at #52 and here)
Sorry for the unrefined state. Feedback there welcome.
2 Likes
Offtopic Workaround using VSCode and Remote Development Extension Pack
WARNING: Using the Remote Development Extension Pack may install VSCode resources on the remote machine during the initial connection.
When you access the remote machine via ssh via VSCode and the Remote Development Extension Pack you can use the VSCode File Explorer and the tabbed terminals in VSCode as usual in VSCode on a local machine. This can save a lot of time because you actually edit the files on the server and do not need to transfer them or using git to sync and use the syntax highlighting etc.
In my case I can work on a AppleSilicon machine with ARM architecture but run the code on a local native Intel based server (not a VM) under Ubuntu 24.04 LTS.
When you start the Volto stack from the remote terminal with make backend-build and another process in a second terminal with make frontend-build VSCode offers to tunnel the ports 3000,3001,8080 to localhost out of the box. No need to provide the HOST environmental variable during start of the frontend.
I figured this out later during the new setup.
This way the Plone frontend opens without url issues in resource links on the local machine. But this limited to users willing and allowed to use VSCode and the Remote Development Extension Pack.