CODEWITHSUNDEEP
reactjsnginxcreate-react-app
HappyCry
HappyCry

Reputation: 893

React App development behind Nginx

I have a legacy angular app and a new react app that I want to expose through nginx.

I have a production nginx config that has the static files, but I was trying to get dev to work as well - with the hot-reload and the webpack dev server. I have this working as it should, but I realized it would be better if I can scope the react with /r/ and angular app with /a/. However, with the config below, whenever I go to localhost/r/, the bundle.js lives in /static/. Is there a way to make /static/ to /r/static/ for the react app?

Is there a better way of doing this?

location /r {
  proxy_pass http://172.17.0.2:3000;
  proxy_set_header   X-Forwarded-For $remote_addr;
  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;
}
location /static/ {
  proxy_pass http://172.17.0.2: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;
}
location /sockjs-node/ {
  proxy_pass http://172.17.0.2: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;
}

Upvotes: 5

Views: 2214

Answers (1)

Brendan Goggin
Brendan Goggin

Reputation: 2361

Yes, there is a way to do that:

location /static/ {
  proxy_pass http:/172.17.0.2:3000/r/static/
  ...
}

Check out the nginx.org docs for proxy_pass.

Upvotes: 3

Related Questions