Add setup option and docs in projects README.md files to specify local server IP for development access to frontend from other machine than localhost

[acsr]

No CSS served when developing from another machine

When starting the frontend using make frontend-start after initial setup the frontend is only reachable fully including styles from localhost:3000. Without further action you will get no CSS served externally e.g. using the IP of the server. In production behind a proxy this is sufficient and welcome. For development and testinstalls this sucks and the solution is not abvious.

The Challenge

• You need to make sure the possible firewall of the server is open for port 3000 (and 3001) or different ports if configured as xxxx and xxxx+1
• The issue is no CSS being served for the frontend when accessed via an external machine, it is only available on localhhiost.

Fix is not obvious for newbies

After an initial attempt to install Plone6 Volto on a VM, WSL or external server via SSH this can be a serious frustration because hints to fix that issue are rare not in the official docs and community.plone.org hints were misleading and not clear in purpose and action to take.

How to avoid this already in Cookieplone

Instead of only mentioning this in the docs, avoiding the pitfall and offering the solution during Cookieplones setup will reduce frustration.

In Cookieplone the fully qualified domain name of the public site is already requested but not the local IP or fully qualified domain name of the server. If ending up for the same purpose it is not explained or added to the two README.md docs files (main project and and frontend) in the appropriate development section.

Suggestion:

In the Interactive Cookieplone session

• Add a question asking for the exposed IP of the server or VM if Plone/Volto is installed for local development but accessed from seperate machine or the Host of the VM (WSL or Multipass etc.) exact wording needs to be negociated.

In the generated Docs

• Add the entered information into the frontend startup docs for development to the two README.md docs files (main project and and frontend) in the appropriate development section.

Docs Part

• Add a canonical link to the main Plone6 Documentation for tghe Cookieplone Approach to allow linking to latest updates when stuff gets breaking changes (like moving away from yarn etc.

Example:

Set the env variable HOST before or during issueing the make command to start the frontend.

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:

http://192.168.168.123:3000

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.

END of Example

---

ToDo

Add a corresponding proper part in the the Plone Documentation Installation Cookieplone project setup docs after https://6.docs.plone.org/install/create-project-cookieplone.html#start-plone as #troubleshooting-developer-access-from-other-ip

This is extremely useful for troubleshooting unexpected blockers after initial installs and avoid people leaving Plone with negative experience.

---

I answered already in these community.plone.org topics in a Q&D form:

[1] Volto repo is not loading stylesheets while running in localhost - Development / Plone 6 UI (Volto)

url:: https://community.plone.org/t/volto-repo-is-not-loading-stylesheets-while-running-in-localhost/16111
tags:: #[[CSS]], #[[Environment Variables]], #[[Firewall]], #[[Plone]], #[[Plone6]], #[[Plone6 Volto]], #[[Stylesheets]], #[[Troubleshooting]], #[[Volto]], #[[Volto Frontend]]

[2] Volto load but no styles (New to Volto)

url:: https://community.plone.org/t/volto-load-but-no-styles-new-to-volto/20001
tags:: #[[CSS]], #[[Environment Variables]], #[[Firewall]], #[[Plone]], #[[Plone6]], #[[Plone6 Volto]], #[[Stylesheets]], #[[Troubleshooting]], #[[Volto]], #[[Volto Frontend]]

Only somehow related is this and can be mentioned in the same context as well:

[3] Unable to connect to Frontend in Plone 6 - Development / Plone 6 UI (Volto)

url:: https://community.plone.org/t/unable-to-connect-to-frontend-in-plone-6/15970
tags:: #[[Environment Variables]], #[[Firewall]], #[[Javascript]], #[[Plone]], #[[Plone6]], #[[Plone6 Volto]], #[[Stylesheets]], #[[Troubleshooting]], #[[Volto]], #[[Volto Frontend]]

[davisagli]

@acsr Thanks for the detailed report. I agree there are legitimate use cases for doing development where Volto is not accessed on localhost, and we should try to support this better.

I want to take a look at this more closely and see if we can make Volto work correctly when accessed on a different network interface without needing to specify the HOST explicitly.