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

Can I deploy two build React apps in the same domain with .htaccess?

I have two build vite react apps.

I am going to deploy these in the same domain.

For example if the request URL is "https://example.com/admin/*" I should show app1 and for other URLs I should show app2.

So I configed .htaccess file like this.

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On
    # For URIs starting with /admin, load the app in admin directory
    RewriteCond %{REQUEST_URI} ^/admin [NC]
    RewriteRule ^(.*)$ /admin/index.html [L]

    # For all other URIs, load the app in html directory
    RewriteCond %{REQUEST_URI} !^/admin [NC]
    RewriteRule ^(.*)$ /html/index.html [L]
</IfModule>

And I am using nginx and nginx config file is like this.

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

The app1 is in /var/www/html/admin directory and the app2 is in var/www/html directory.

But I got the 404 error for /admin/* URL.

How to fix this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this like this.

    I edited the nginx config file like this.

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

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

    And when I build the admin react app I added the base suburl with this command.

    vite build --base=/admin/

  2. 0

    Using htaccess with nginx is usually not a good idea (see here: "You can’t do this. You shouldn’t. If you need .htaccess, you’re probably doing it wrong.").
    You can easily achieve the desired result by adding:

    root /path/to/your/root/directory;

location /admin/ {
    alias /path/to/app1/build/;
    try_files $uri $uri/ /index.html;
}

location / {
    alias /path/to/app2/build/;
    try_files $uri $uri/ /index.html;
}

    to your nginx config file. You can also use htaccess to nginx converter
    if you have any other htacess rules that you wanna port to nginx.

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

Back To Top
Search