React Application looking for static files which are not being accessed

Question

I have a react application deployed on the Nginx web server. When I access the application using the URL, XX.XX.XX.XX, the react application works. However, I would like to access the application using the URL XX.XX.XX.XX/myapp/frontend. I have configured the nginx reverse proxy to redirect all the requests to the path /myapp/frontend.

nginx config file

server {                                                  
    listen 80 default_server;                         

    server_name localhost;                            
    root /var/www/myapp/myapp-frontend;            
    index index.html index.htm;                       
    location / {                                      


    }                                                 

    location /myapp/frontend {                               

            proxy_pass http://localhost:3000;         
            proxy_http_version 1.1;                   
            proxy_set_header Upgrade $http_upgrade;   
            proxy_set_header Connection 'upgrade';    
            proxy_set_header Host $host;              
            proxy_cache_bypass $http_upgrade;         
    }      
  }                                           

For the application to be accessed using the url XX.XX.XX.XX/myapp/frontend I have to tell the react application to start from the path /myapp/frontend.

EDIT:

I have specified the "homepage": "http://XX.XX.XX.XX/myapp/frontend", so that react application starts from the location /myapp/frontend.

I get a black page when I try to access the URL. Upon inspecting the page, the calls http://XX.XX.XX.XX/myapp/frontend/static/css/1.5a6735dd.chunk.css I get 502 Bad Gateway. So the static files are not being accessed. How do i resolve this?

Answer 1

you can setup 'setupProxy.js' in src file
the code is :

 const proxy = require("http-proxy-middleware");

    module.exports = function(app) {
      app.use(proxy("/auth/google", { target: "http://localhost:5000/" }));
      app.use(proxy("/api/*", { target: "http://localhost:5000/" }));
    };