Serving React application with relative path

Viewed 227

I'm having two React applications running on the same machine. I'm using an nginx reverse proxy to handle routing requests.

The first application is running on root: '/', here is the nginx rule for it:

location / {
        proxy_pass http://127.0.0.1:3000;   
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-Proto https;  # for ssl
    }

The other app is running on port 4000, using the following reverse proxy:

location /staging/ {
        proxy_pass http://127.0.0.1:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-Proto https;  # for ssl
    }

I followed the [documentation][1] for deployment and I added the following to my package.js:

"homepage": "https:/xyz.com/staging/"

The application works using npm start. However using:

npm run build && serve -s build -l 4000 

fails to load. The request to index.html is fine however, every time the app tries to request the static content, it always responds with the index.html contents: [![enter image description here][2]][2]

I tried setting PUBLIC_URL as well, but also failed. Why is react failing to respond with any thing in the static directory? Any help appreciated. [1]: https://create-react-app.dev/docs/deployment/ [2]: https://i.stack.imgur.com/ijqx9.png

0 Answers
Related