Volto 17 is unable to connect to backend

[mtoepfl]

Describe the bug Volto 17 is unable to connect to backend

First of all, what I want to say, is: thank you! I tried out the very fresh Volto 17 release and everything is very smooth and looks very polished!

I was only hit by a small issue just before reaching the target, when I wanted to perpare for the trainings and sprints.

I know you are very busy now just before the conference, but do you have a quick tip for me? @sneridagh

To Reproduce

For starting the backend I used the examples found here

https://6.docs.plone.org/volto/getting-started/install.html#run-a-volto-ready-plone-docker-container

docker run -it --rm --name=plone \
  -p 8080:8080 -e SITE=Plone -e \
  ADDONS="plone.restapi==8.18.0 plone.app.iterate==4.0.2 plone.rest==2.0.0a1 plone.app.vocabularies==4.3.0 plone.volto==3.1.0a8" \
  -e PROFILES="plone.volto:default-homepage" \
  plone/plone-backend

raises folling error:

zope.configuration.config.ConfigurationConflictError: Conflicting configuration actions
  For: ('utility', <InterfaceClass zope.schema.interfaces.IVocabularyFactory>, 'plone.app.vocabularies.Catalog')
    File "/app/lib/python3.11/site-packages/plone/app/vocabularies/configure.zcml", line 103.2-106.6
        <utility
          factory=".catalog.CatalogVocabularyFactory"
          name="plone.app.vocabularies.Catalog"
          />
    File "/app/lib/python3.11/site-packages/plone/app/querystring/configure.zcml", line 67.2-70.8
        <utility
            factory=".vocabularies.CatalogVocabularyFactory"
            name="plone.app.vocabularies.Catalog"
            />

so I replaced version-pins with >=:

docker run -it --rm --name=plone \
  -p 8080:8080 -e SITE=Plone -e \
  ADDONS="plone.restapi>=8.18.0 plone.app.iterate>=4.0.2 plone.rest>=2.0.0a1 plone.app.vocabularies>=4.3.0 plone.volto>=3.1.0a8" \
  -e PROFILES="plone.volto:default-homepage" \
  plone/plone-backend

This works fine. Backend is up and running:

http://localhost:8080/Plone/prefs_install_products_form

shows plone.restapi and plone.volto as activated, but if I access http://localhost:3000 Volto shows following message:

Connection refused
http://localhost:3000
The backend is not responding, 
please check if you have started Plone, 
check your project's configuration object apiPath (or if you are using the internal proxy, devProxyToApiPath) 
or the RAZZLE_API_PATH Volto's environment variable.

But http://localhost:3000/++api++ responses JSON:

{
  "@components": {
    "actions": {
      "@id": "http://localhost:3000/@actions"
    }, 
    "aliases": {
      "@id": "http://localhost:3000/@aliases"
    }, 
    "breadcrumbs": {
      "@id": "http://localhost:3000/@breadcrumbs"
    }, 
...

Seems to be fine. Isn`t it?

To install volto I cloned the repository:

git clone -b mtoepfl-typescript-support git@github.com:plone/volto.git volto-typescript-support-17

yarn install

yarn start

nodejs shows:

webpack 5.76.1 compiled successfully in 25722 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 🚀

In the browsers network-tab in dev-tools, I do NOT see any requests to: http://localhost:3000/++api++ And no messages in console.

Expected behavior

Volto is able to connect to backend.

Software (please complete the following information):

• Volto Version 17.0.0 (clone of master/main branch)
• Plone Version 6.0.7 (6018)
• Plone REST API Version 8.43.3
• plone.volto 4.1.0

[sneridagh]

@mtoepfl You can use the convenience backend provided in the Makefile

make start-backend-docker

That one liner you are using is old, we need to do a full pass in the docs to fix things.

Then, regarding the connection problem, check this out: https://github.com/plone/volto/issues/5168

We still haven't pinpoint why it does happen apparently randomly to some people (MacOS, linux, etc... eg. it didn't happened to me yet).

Hope this helps.

BTW, remember that I have https://github.com/plone/volto/pull/4949 ongoing...

[mtoepfl]

Thank you, for your very fast response. Why I`m not suprised ;-).

Thank you for clarification. Something we can work on next days. I will try, but just found out:

Seems to be only when the response is server-rendered. If I click to to search-icon in the upper right, this works and then back to the Plone-icon the front-page works like a charm too. If I reload the page the connection error appears again.

[mtoepfl]

Then, regarding the connection problem, check this out: #5168

Sorry for not finding this myself. Thought this might be a quite new issue and only looked at the last 10 issues.

We still haven't pinpoint why it does happen apparently randomly to some people (MacOS, linux, etc... eg. it didn't happened to me yet).

As I said above. It only appears in server-side rendering. I`m on node 18 on Fedora Linux.

BTW, remember that I have #4949 ongoing...

Ok thanks. I try to rebase on the registryinownpackage branch. @sneridagh