NGINX proxy pass to React App not working

Question

I want to run the following projects using NGINX under a single subdomain: http://localhost:3000 (Loopback API) and http://localhost:3006 (React Application)

Both applications are running under PM2. React App is running in production (using its generated build) with the command: 'pm2 serve build 3006'.

/etc/nginx/sites-available/default

server {
listen 80;

server_name subdomain.domain.com;

location / {
    proxy_pass http://localhost:3006;
    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;
    try_files $uri /index.html;
}

location /api {
    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;
}

Loopback project under location /api es working perfectly. The issue is with my React project under my / route. When I enter to subdomain.domain.com I just get a blank page. In the developer console I'm getting the following errors:

Using http://localhost:3006 to access my React App works perfectly fine with no console issues so I'm totally sure it is something related with nginx.

I have been investigating a lot about the incorrect MIME type being loaded, but my /etc/nginx/nginx.conf is already running with the following configuration:

http {
    include /etc/nginx/mime.types;
}

I would really appreciate your help, thanks.

On the proxy pass you don't need to use try_files.

Honarkhah
– Honarkhah

2018-08-21 16:32:24 +00:00
Commented Aug 21, 2018 at 16:32 — Honarkhah
– Honarkhah, Commented Aug 21, 2018 at 16:32
Hello I am facing same issue. Did you get the solution?

ricky
– ricky

2020-04-20 03:29:13 +00:00
Commented Apr 20, 2020 at 3:29 — ricky
– ricky, Commented Apr 20, 2020 at 3:29
Does anyone has solution to this?

Abdulmoiz Ahmer
– Abdulmoiz Ahmer

2020-04-23 13:15:48 +00:00
Commented Apr 23, 2020 at 13:15 — Abdulmoiz Ahmer
– Abdulmoiz Ahmer, Commented Apr 23, 2020 at 13:15

Joven Macaldo · Accepted Answer · 2018-10-07 21:14:20Z

3

Are you using Create React App? By default, its build script assumes the app is going to be served in the root directory. To correctly serve React under a subdirectory, you need to specify homepage in your package.json file.

"homepage" : "http://example.com/your-subdirectory"

Additionally, you'll want to modify server/app.js to reflect this change.

app.use('/your-subdirectory/api', require('./api'));

Lastly, and most importantly, you'll want to set a basename for React Router as well.

  const Routes = () => {
     return (
        <Router basename={'/your-subdirectory'}>
        <div>
           <Route exact path={`/`}component={App} />
        </div>
       </Router>
     )
   };

answered Oct 7, 2018 at 21:14

Joven Macaldo

312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ricky Over a year ago

After doing above changes still facing the same issue

user6455909 Over a year ago

It worked for me! Step 2 is unneccesary if you add a trailing slash to the host you are proxy_passing to.

Julio Ojeda · Accepted Answer · 2020-04-29 04:37:08Z

3

There is no need to use pm2 since they are static files and nginx is able to serve it by itself.

You just have to let nginx know where the files are.

server {
   listen 80;


   root /home/user/app/buld <--- LOCATION_OF_YOUR_BUILD
   index index.html
   server_name subdomain.domain.com;

   location / {
      try_files $uri /index.html
    }

   location /api {
      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;
}

edited Apr 29, 2020 at 4:37

answered Apr 29, 2020 at 4:11

Julio Ojeda

8281 gold badge9 silver badges24 bronze badges

1 Comment

Hector Toro Over a year ago

Do you know if there is a way to acomplished the same using pm2, I would like to have the monitoring features of PM2 and the ability to stop and restart the app

Collectives™ on Stack Overflow

NGINX proxy pass to React App not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related