How to make the server send the styles and the scripts to the client in production?

[silviubogan]

In development it works, otherwise I would have looked better at the server.tsx file.

I tried with npm start, it works, but...

I tried with npm run build, it works, no errors.
I tried then with npm run start:prod, I get this:

> NODE_ENV=production node build/server.js
> App started http://localhost:3005

but it does not load styles or scripts, just the SSR HTML.

I read this https://razzlejs.org/docs/environment-variables and it is not obvious to me what should I set to what. This is what I've tried without the wanted great success:

PUBLIC_PATH=http://localhost:3005/
CLIENT_PUBLIC_PATH=http://localhost:3005/

In the .env file I also have:

PORT=3005
BROWSER=chromium
RAZZLE_PUBLIC_DIR=public/
PUBLIC_URL=http://localhost:3005/

and I have some old code in it too, that I'll remove after posting this. I think it is irrelevant for my question:

REACT_APP_API_URL=http://mydomain.com/api
SKIP_PREFLIGHT_CHECK=true

Thanks!

Update 1

I see that the server sends the script to the client but when trying to open the script in Chromium I am redirected recursively into http://localhost:3005/static/js/error/error/error/.../error/error-v1 where [...] means it is expanding with each tick of the clock. If it is useful information, I use react-router-dom and StaticRouter for SSR but I think the issue is something else, like accessing a JS file redirects to one of my routes, somehow JS files and the routes get too related.

Thanks.

Update 2

With this line commented out,

# CLIENT_PUBLIC_PATH=http://localhost:3005/

I can get npm start to work, but when it is there, as it makes sense, npm start does not work. Nor does the npm run start:prod.

[fivethreeo]

Don’t set RAZZLE_PUBLIC_DIR razzle does that itself.

[fivethreeo]

CLIENT_PUBLIC_PATH Is only used in dev. PUBLIC_PATH is used in prod

[fivethreeo]

Dev media is on PORT+1 so in your case 3006

[silviubogan]

I have this .env file:

PORT=3005
PUBLIC_URL=http://localhost:3005/
PUBLIC_PATH=http://localhost:3006/

npm run build and npm run start:prod produce a web page that would have access to media but it does not load the scripts to show me the media through React components. I've seen this while an older version of the page was open and the server was being reopened to allow some images to refresh automatically.

Now I try putting 3005 instead of 3006 in PUBLIC_PATH.

[fivethreeo]

In prod it is 3005 😀

[silviubogan]

After switching too PUBLIC_PATH=http://localhost:3005/ I just had to use the dotenv NPM package to load the PUBLIC_URL in the places where I was loading images with URLs relative to PUBLIC_URL from .env.

import { config } from 'dotenv';
[...]
config({ path: '.env' });

Thanks!

[fivethreeo]

https://github.com/jaredpalmer/razzle/tree/master/examples/with-webpack-public-path