Unable to connect to Frontend in Plone 6

Hey everyone.

With the first release version of Plone 6, we've started dabbling with the idea of familiarizing outselves with it and to set it up on a separate container of ours. After trying to follow the instructions in the documentation to run it via docker, we've hit several roadblocks because it just wouldn't work with a docker. Afterwards, we tried following an installaton guide located in the Plone 6.0.0a6 patch notes (adjusted for Plone 6.0.0rc1) which seemed to work at first.

We got everything installed, Plone boots nicely, Classic also works, but when trying to connect to the New Plone via the different Port, we are greeted with a site that lacks any and all CSS and HTML and seems to simply fetch data from the backend, nothing more. Looks like this:

Am I missing a crucial step? I followed the entire guide, but found nothing that would indicate this is an issue. Any and all information might be helpful. We've since then also looked into setting up docker separately for a different container, but nevertheless would like to understand why this happens.

I presume that you're running docker in docker-compose? You should also map the "+1" port. For example, 3000 + 3001.

Maybe you should share your docker configuration? I can't really understand your setup and the problem.

As mentioned, docker wasn't working, so we're not running any kind of docker setup. We are setting it up on a different container with docker, but the problem I have right now, for this specific container, does not involve dockers.

What's the address that you use, in your browser, to connect to the Plone backend docker container?

Did you install Plone 6 using buildout or pip? Check your theming control panel. There's an option to not have theming active on either numerical addresses like or localhost etc.. If you're not using docker how'd you install Plone? pip or buildout? I'd check those first.

The backend is http://localhost:8080/Plone6/, which we've adjusted in the config.js via devProxyToApiPath, before that we didn't have any content (though the CSS was still lacking). We'd tried a new install with just /Plone as recommended, but that didn't change anything, there still was no CSS.

We installed Plone 6 via buildout. I have also removed said entry in the backend under theming, which had no effect, unfortunately.

@Glamurio Can you look at the Network tab in the browser dev tools and check what URL it is trying to load for the CSS files? This might help identify what the problem is.

Hey, sorry for the delayed response, over the holidays and subsequent weeks I wasn't able to revisit this project. Anyhow, I had a look at the network requests, the CSS load correct, but it seems to be the JS files that aren't able to load. They are all seemingly trying to access "localhost:3001" instead of 3000.

Is there some sort of firewall or network restrictions preventing the port 3001 from being used by Volto?

Port 3000 is the normal portal that serves HTML + static resources + JSON. Port 3001 is used during the development process (when you do yarn start, rather then yarn start:prod which triggers a "production start") to hot-reload stylesheets and code, so it can automatically update the browser whenever you make changes to code.

Not that I know of, 3001 should work just the same.

If it helps, yarn start:prod is still trying to load via 3001, and it also does not work. Do you have any other ideas what might be causing this?

If your browser is on a different host then the server you may need a tunnel from port 3001 on the browser host to localhost:3001 on the server. You would see failed requests to localhost:3001 among those listed in the failed browser network requests dev tab if this is what's needed.

(Whether or not this helps, a consolidated synopsis of the browser/frontend and browser/backend and frontend/backend interactions would probably reduce the difficulty in arranging both the dev and container instances. There's a lot of room for uncertainty and problems. That said, working through the container problems is worth a lot, because operating using containers affordsa lot of great options.)

1 Like