Currently I have two separate react apps, running on main domain and subdomain, Main app running on https://example.com/ and admin app running on https://admin.example.com/
Now I want to merge both apps into same domain
Main app on same url https://example.com/
admin app on https://example.com/admin
How to do that? My apps are hosted on AWS s3 bucket.
If you want CloudFront to request your content from a directory in your AWS resource or your custom origin, enter the directory path, beginning with a slash (/). CloudFront appends the directory path to the value of Origin Domain Name, for example, cf-origin.example.com/production/images
For example, suppose you've specified the following values for your distribution:
Origin Domain Name – An Amazon S3 bucket named DOC-EXAMPLE-BUCKET
Origin Path – /production
Alternate Domain Names (CNAMEs) – example.com
When a user enters example.com/index.html in a browser, CloudFront sends a request to Amazon S3 for DOC-EXAMPLE-BUCKET/production/index.html.
When a user enters example.com/acme/index.html in a browser, CloudFront sends a request to Amazon S3 for DOC-EXAMPLE-BUCKET/production/acme/index.html.
Best, Stefan
First you need to adjust your admin app react router configuration. Here is an excellent article on how to do it: How to deploy a React app to a subdirectory. Next, your nginx configuration should look like the following:
location / {
root <path/to/your/main/app>;
try_files $uri $uri/ /index.html;
}
location /admin {
alias <path/to/your/second/app>;
try_files $uri $uri/ /admin/index.html;
}
If you can put your second app under admin subdirectory of your first app (e.g. first app at /var/www/html and second app at /var/www/html/admin, nginx configuration can be made even more simple:
root </path/to/your/main/app>;
location / {
try_files $uri $uri/ /index.html;
}
location /admin {
try_files $uri $uri/ /admin/index.html;
}