Multiple react apps not running in nginx

Question

I have 3 apps: 1 nodejs and 2 react apps. My nginx.conf looks like this:

#node-app is running on port 3001
upstream api {
    server localhost:3001;
}

server {
    listen       80;
    listen       [::]:80;
    server_name  _;
    index index.html index.htm;

    location /api {
        rewrite /api /$1 break;
        proxy_pass  http://api;
    }
    #the first react app
    location /admin {
        root /home/ec2-user/admin/build;
        try_files $1 index.html;
    }
    #the second react app
    location / {
            root /home/ec2-user/client/build;
            try_files $uri /index.html;
    }

What happens is that I can go to the second react app. But when I go to the admin-page I got an nginx error:

The page you are looking for is not found.

I also have tried to declare the admin this way:

    location /admin/(.*) {
        root /home/ec2-user/admin/build;
        try_files $1 index.html;
    }

But then the page does not display anything. I suspect that the app number 2 takes over, but as there is no route to "admin" it shows an empty page.

location ^~ /admin/ { if (!-e $request_filename){ rewrite ^(.*)$ /index.html break; } root /var/www/html/admin/build/; } — Rakesh Gadhwal
– Rakesh Gadhwal, Commented Jul 29, 2021 at 15:10

Rakesh Gadhwal · Accepted Answer · 2021-07-29 15:15:57Z

1

Please add

these rule in nginx

#First app

 location ^~ /admin/ {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
}
root /home/ec2-user/admin/build;
  }

###Second app

location ^~ /admin-page/ {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
}
root /home/ec2-user/client/build;
  }

answered Jul 29, 2021 at 15:15

Rakesh Gadhwal

3411 silver badge3 bronze badges

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

3 Comments

oderfla Over a year ago

Thanks, but the second app should be at root, something like: location ^~ / I tried it but it still not displaying the first app.

oderfla Over a year ago

When I go to the second app I see this error in the console: Uncaught SyntaxError: Unexpected token '<'

Rakesh Gadhwal Over a year ago

add mulitple sub-domain and use

Collectives™ on Stack Overflow

Multiple react apps not running in nginx

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related