Volto load but no styles (New to Volto)

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

The site I load by internet is like this.

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
:performing_arts: Volto started at 0.0.0.0:3000 :rocket:

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.

http://localhost:3000

If you instead visit 0.0.0.0:3000, you might get the unstyled version.