Скачать или смотреть Deploying Two React Apps at the Same URL in Nginx

Learn how to successfully deploy two React applications under the same domain using Nginx. This guide covers the essential configuration steps to ensure both apps work seamlessly.
---
This video is based on the question https://stackoverflow.com/q/75413053/ asked by the user 'mehmetakkus' ( https://stackoverflow.com/u/5305826/ ) and on the answer https://stackoverflow.com/a/75420530/ provided by the user 'mehmetakkus' ( https://stackoverflow.com/u/5305826/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to deploy two react app the same url in Nginx

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Deploying Two React Apps at the Same URL in Nginx: A Complete Guide

Managing multiple React applications can be a tricky task, especially when it comes to deploying them under the same domain using Nginx. With this guide, we'll explore how to effectively set up Nginx to host both a primary React app and an admin panel using separate paths.

The Problem

You may have a system structured something like this:

NodeJS API: This serves as the backend.

React APP1: The main application accessed by users.

React APP2: An admin panel for managing the app.

You want both React applications to be accessible through the same domain - for example, mydomain.com for APP1 and mydomain.com/admin for APP2. However, configuring Nginx to route requests correctly to both apps can be challenging.

Solution Overview

To achieve this, we need to properly configure our Nginx server block to handle requests for both applications. Below are the key steps involved in setting this up.

Step 1: Basic Nginx Configuration

Here's a basic structure to start with:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Correcting the Configuration for React Router

However, the above configuration might not work perfectly due to the way React Router handles routes. We can improve the setup using an alias instead of root for the admin app. Here’s the modified configuration:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Configuring React Router

Among the most critical changes is aligning React Router with your Nginx configuration. Make sure the React Router uses basename appropriately. Here is an example of setting this in APP2:

[[See Video to Reveal this Text or Code Snippet]]

In this code snippet:

The basename property should match the route under which APP2 is served. This ensures that routing within the app operates correctly.

Conclusion

By following these configurations, you should successfully deploy both React applications under one domain using Nginx. Here’s a quick recap of what you did:

Set up Nginx server blocks for both apps.

Used the alias directive for the admin panel to avoid path issues.

Configured React Router to ensure internal routing is managed correctly.

With this guide, you can now manage two distinct React applications efficiently under the same URL. If you find this helpful or have further questions, feel free to ask!