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.
2
Answers
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:
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: