Review instructions on how to run fractal-web through node build

[tcompa]

Are we hitting CORS issues when running on port 3000? Is it because of fractal-server allowed-cors defaults? To check.

[tcompa]

I think what is missing in the documentation about node startup command is the ORIGIN variable, see examples below.

I'm now updating the instructions in the docs, but this is not related to CORS (that is, it does not depend on the FRACTAL_CORS_ALLOW_ORIGIN variable in fractal-server configuration).

@jluethi do you remember if this was the actual error you found, or if it was something else?

How to reproduce the error (on port 3000)

1. Startup fractal-server (with no special value for FRACTAL_CORS_ALLOW_ORIGIN)
2. Run npm run build
3. Startup fractal-web via node build
4. Browse to http://localhost:3000 and log-in
5. You'll hit an error page with message "Cross-site POST form submissions are forbidden"

How to reproduce the error (on port 5173)

Conjecture: this error appears because we use port 3000 instead of port 5173, which is the one listed in the defaults of FRACTAL_CORS_ALLOW_ORIGIN.
This conjecture is wrong, as we verify explicitly:

1. Startup fractal-server (with no special value for FRACTAL_CORS_ALLOW_ORIGIN)
2. Run npm run build
3. Startup fractal-web via PORT=5173 node build
4. Browse to http://localhost:5173 and log-in
5. You'll hit an error page with message "Cross-site POST form submissions are forbidden"

How to avoid the error

1. Startup fractal-server (with no special value for FRACTAL_CORS_ALLOW_ORIGIN)
2. Run npm run build
3. Startup fractal-web via ORIGIN=http://localhost:3000 node build
4. Browse to http://localhost:3000 and log-in
5. Log-in now works

Note that the "Cross-site POST form submissions are forbidden" error comes from SvelteKit, see:

• https://kit.svelte.dev/docs/adapter-node#environment-variables-origin-protocolheader-and-hostheader ("HTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the ORIGIN environment variable")
• Cross-site POST form submissions are forbidden sveltejs/kit#6589
• https://stackoverflow.com/questions/73790956/cross-site-post-form-submissions-are-forbidden

[jluethi]

You'll hit an error page with message "Cross-site POST form submissions are forbidden"

Ah yeah, that was the error I hit as well! Thanks for the update of the docs!

Does it need to be port 3000 or would e.g. ORIGIN=http://localhost:5173 node build also work? Is it just that one needs to set ORIGIN, not PORT?

[tcompa]

ORIGIN=http://localhost:5173 node build won't work, since node defaults to port 3000.

ORIGIN=http://localhost:5173 PORT=5173 node build does work (see https://github.com/fractal-analytics-platform/fractal-web/blob/main/docs/contribute.md#web-client-startup).