http-server and react-router not working correctly in production

Question

I am trying to migrate my react app from self-hosted on nginx to railway.

Everything worked perfectly fine on nginx, but I am having issues on deploying it on railway using http-server.

Nginx config that I have used where everything was gucci:

    location / {
        root /var/www/html;
        try_files $uri /index.html;
    }

    #Reverse proxy to express
    location /api/ {
        proxy_pass http://127.0.0.1:3001;
    }

On railway My build command is set to "npm run build", and start command "npx http-server ./build --proxy localhost:$PORT/? -p $PORT -a ::"

According to http-server docs the -P param should do following: -P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com

My main url works as expected (https://client-production-70d6.up.railway.app/) - even if you click the nav bar buttons. However, if you try to access https://client-production-70d6.up.railway.app/random directly from your url bar, then the request get's stuck until it times out (HTTP ERROR 404)

Prev: https://gyazo.com/a78f41059137b9eae69b9998a60e3463

I have tried juggling around the --proxy setting (such as --proxy localhost:$PORT/?, --proxy localhost:$PORT? --proxy localhost?, --proxy localhost:$PORT/index.html?, using -P instead of --proxy etc...)

Also tried changing react apps homepage to . .*. / https://client-production-70d6.up.railway.app/ but no luck here.

What I am missing here? Any help would be appreciated.

Answer 1

Managed to fix it! Apparently proxy needs to start with a http:// facepalm

This start command worked for me

npx http-server ./build --proxy http://localhost:$PORT/index.html? -p
$PORT -a ::

Make sure to set correct homepage.