Question 190338 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I deploy two React applications on a single Nginx server and one IP address?

I want to deploy two React applications on a single Nginx server and domain. When I configure my Nginx server to serve the first application at the root path ("/"), it works correctly.

However, when I configure it to serve the second application at the path "/biro-cat", it only shows the background image. What could be wrong?

server {
        listen 80;
        server_name ec2-18-207-215-29.compute-1.amazonaws.com;
        location /api/ {
                include proxy_params;
                 proxy_pass http://unix:/run/gunicorn.sock;
        }
        location /biro-cat {
                alias /var/www/biro-cat;
                try_files $uri /biro-cat/index.html;

        }
         location / {
                root /var/www/take-me;
                try_files $uri /uri /index.html;
        }
}
Tags:

2

Answers


  1. 0

    In the second app, make sure you configured two places
    In package.json, add this line:

    "homepage": "/biro-cat",

    In your router, edit it like this:

    <BrowserRouter basename='/biro-cat'>
       {/* ... */}
</BrowserRouter>

    It should works as you expected

    Login or Signup to reply.
  2. 0

    If mikenlanggio’s doesn’t work, then I will recommend you to change basename="/" and PUBLIC_URL=/biro-cat.

    After building package, check the dist || build directory’s index.html, that might have [path(biro-cat)]/static/js/[filename].js in the script tag.

    .env

PUBLIC_URL=/tbridge

> Build result
<script defer="defer" src="/tbridge/static/js/main.2ff2e0c6.js"></script><link href="/tbridge/static/css/main.cac996e1.css" rel="stylesheet">

    Also, you should check the index.html at the network tab in dev mode which request proper index.html.

    By checking the index.html on network tab, it have to contain the path that you just defined likes [path(biro-cat)]/static/js/[filename].js

    Here is the Example :

    PUBLIC_URL=/

location / {
    root /data;
    index index.html;
    try_files $uri https://$uri/ /index.html;
}

PUBLIC_URL=/tbridge

location /tbridge {
    root /data;
    try_files $uri https://$uri/ /tbridge/index.html;
}

    there is no other settings, homepage in package.json, basename in router ..etc

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search