Configuring Nginx for multiple React Apps

Question

I have two React Apps that I'd like to serve using Nginx on the same server. After reading the documentation for Nginx and researching on multiple websites, I still haven't been able to serve more than one app at the same time. The configurations I'm showing are in a file in /etc/nginx/conf.d/myserver.conf, and I'll be showing two examples, one for just one app that works and the other for two apps, that doesn't.

This example works, with just one React app (in which I'm accessing through http://myserver/foo ):

server {
    listen       80;
    server_name  myserver;
    root         /var/www/html/foo/build;

    location /foo {
        try_files  $uri $uri/ /index.html;
    }
}

This example doesn't work, in which I want to serve two apps,on http://myserver/foo and the other in http://myserver/bar ):

server {
    listen       80;
    server_name  myserver;

    location /foo {
        root       /var/www/html/foo/build;
        try_files  $uri $uri/ /index.html;
    }

    location /bar {
        root       /var/www/html/bar/build;
        try_files  $uri $uri/ /index.html;
    }
}

I have tried other configurations, but I've posted this one because I believe it better illustrates what I've tried to do.

Answer 1

try

server {
    listen       80;
    server_name  myserver;

    location /foo {
        alias       /var/www/html/foo/build;
        try_files  $uri $uri/ /index.html;
    }

    location /bar {
        alias       /var/www/html/bar/build;
        try_files  $uri $uri/ /index.html;
    }
}