How to deploy two build react apps in the same domain with .htaccess

Question

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 ^(.*)$ /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.

Answer 1

To fix the 404 error you're encountering when accessing URLs starting with /admin/*, you need to adjust your Nginx configuration. Here's an updated configuration that should resolve the issue:

root /var/www;

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

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

In the updated configuration:

• The /admin location block handles requests for URLs starting with /admin. It uses the alias directive to specify the correct directory path for the app1 located in /var/www/html/admin. The try_files directive is used to check if the requested URI exists as a file or a directory. If not, it will serve /admin/index.html, which is the entry point for app1.

• The / location block handles requests for all other URLs. The try_files directive checks if the requested URI exists as a file, with .html appended to it, as a directory, or else serves /index.html, which is the entry point for app2.

By updating your Nginx configuration as shown above, you should be able to correctly route requests to the respective applications based on the URL path.