In this guide, we'll explore how to run two different servers at the same time using **Nginx**. Imagine you have a React server running on port **3000** and an Express server on port **3030**. The goal is to configure **Nginx** to host both on **port 8000**, and route traffic based on URL paths.
### Example
Let's say:
- Your **React app** is hosted on `localhost:3000`
- Your **Express app** is hosted on `localhost:3030`
- Nginx is configured to listen on `localhost:8000`
When you navigate to:
- **`localhost:8000/express`**, you’ll be routed to the Express server.
- **`localhost:8000/react`**, you’ll be routed to the React server.
This is the behavior we are aiming to achieve.
---
## Steps to Achieve This
### Step 1: Set Up the React Server
1. Go to the directory where you want to set up your React web app.
2. In your terminal, run the following command to create a new React app:
```bash
npx create-react-app my-react-app
```
3. By default, the React server will be hosted on **`localhost:3000`**. No additional configuration is required.
---
### Step 2: Set Up the Express Server
1. Navigate to the directory where you want to create the Express server.
2. Initialize a new Node.js project:
```bash
npm init -y
```
3. Install the Express library:
```bash
npm install express
```
4. Create a `server.js` file and add the following code:
- In Vim, press `Esc`, type `:wq`, and hit **Enter**.
5. Reload the Nginx configuration:
```bash
sudo nginx -s reload
```
---
### Step 4: Test Your Setup
Now, you should be able to access both servers via Nginx.
- Navigate to **`localhost:8000/express`** to see the Express app.
- Navigate to **`localhost:8000/react`** to see the React app.
---
### Conclusion
With this setup, you’ve successfully configured **Nginx** to handle routing for two different servers—one React and one Express—through a single port (8000). Now you can host multiple services and route traffic dynamically based on the URL path.
How to Handle Two Different Servers Through Nginx
### Overview
In this guide, we'll explore how to run two different servers at the same time using **Nginx**. Imagine you have a React server running on port **3000** and an Express server on port **3030**. The goal is to configure **Nginx** to host both on **port 8000**, and route traffic based on URL paths.
### Example
Let's say:
- Your **React app** is hosted on `localhost:3000`
- Your **Express app** is hosted on `localhost:3030`
- Nginx is configured to listen on `localhost:8000`
When you navigate to:
- **`localhost:8000/express`**, you’ll be routed to the Express server.
- **`localhost:8000/react`**, you’ll be routed to the React server.
This is the behavior we are aiming to achieve.
---
## Steps to Achieve This
### Step 1: Set Up the React Server
1. Go to the directory where you want to set up your React web app.
2. In your terminal, run the following command to create a new React app:
```bash
npx create-react-app my-react-app
```
3. By default, the React server will be hosted on **`localhost:3000`**. No additional configuration is required.
---
### Step 2: Set Up the Express Server
1. Navigate to the directory where you want to create the Express server.
2. Initialize a new Node.js project:
```bash
npm init -y
```
3. Install the Express library:
```bash
npm install express
```
4. Create a `server.js` file and add the following code:
```javascript
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3030;
// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, 'public')));
// For any other routes, send the index.html file from the 'public' directory
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
```
5. To make development easier, install `nodemon` for auto-reloading:
```bash
npm install --save-dev nodemon
```
6. Your `package.json` file should look like this:
```json
{
"name": "express-static-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "^4.21.0"
},
"devDependencies": {
"nodemon": "^3.1.7"
}
}
```
7. Start the Express server:
```bash
node server.js
```
Your Express server should now be live on **`localhost:3030`**.
---
### Step 3: Configure Nginx
Assuming you already have **Nginx** installed on your system (I'm using a Mac, but this works on Windows as well), follow these steps:
1. Open a terminal and navigate to the Nginx configuration directory:
```bash
cd /usr/local/etc/nginx
```
2. Create a new `.conf` file for your setup:
```bash
sudo nano local-dev.conf
```
Alternatively, use Vim:
```bash
sudo vim local-dev.conf
```
3. Add the following Nginx configuration:
```nginx
server {
listen 8000;
server_name localhost;
# Route to Express server
location /express {
rewrite ^/express(/.*)$ $1 break;
proxy_pass http://localhost:3030;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# Route to React server
location /react {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# Ensure React static files load correctly
sub_filter 'src="/' 'src="/react/';
sub_filter 'href="/' 'href="/react/';
sub_filter_once off;
}
}
```
4. Save and close the file:
- In Vim, press `Esc`, type `:wq`, and hit **Enter**.
5. Reload the Nginx configuration:
```bash
sudo nginx -s reload
```
---
### Step 4: Test Your Setup
Now, you should be able to access both servers via Nginx.
- Navigate to **`localhost:8000/express`** to see the Express app.
- Navigate to **`localhost:8000/react`** to see the React app.
---
### Conclusion
With this setup, you’ve successfully configured **Nginx** to handle routing for two different servers—one React and one Express—through a single port (8000). Now you can host multiple services and route traffic dynamically based on the URL path.