To prepare a **ReactJS server with Node.
js**, you’ll essen ally be se ng up a backend
([Link]/Express) to serve your React frontend and handle APIs. Here’s a step-by-step guide you
can follow:
---
## 📌 Step 1: Set Up Your Project
1. Create a project folder:
```bash
mkdir react-node-app && cd react-node-app
```
2. Ini alize [Link]:
```bash
npm init -y
```
3. Install Express (for server):
```bash
npm install express
```
---
## 📌 Step 2: Create the [Link] Server
Inside your project, create a file `[Link]`:
1
```js
const express = require('express');
const path = require('path');
const app = express();
// Serve sta c files from React build
[Link]([Link] c([Link](__dirname, 'client/build')));
// Example API route
[Link]('/api/hello', (req, res) => {
[Link]({ message: 'Hello from [Link] server!' });
});
// Catch-all handler to serve React frontend
[Link]('*', (req, res) => {
[Link]([Link](__dirname, 'client/build', '[Link]'));
});
const PORT = [Link] || 5000;
[Link](PORT, () => {
[Link](`Server running on port ${PORT}`);
});
```
2
---
## 📌 Step 3: Create the React App
1. Inside your project folder:
```bash
npx create-react-app client
```
2. Navigate into `client` and run:
```bash
npm start
```
This runs React on port 3000.
---
## 📌 Step 4: Connect React to [Link]
- In React, you can call your backend API using `fetch`:
```js
useEffect(() => {
fetch('/api/hello')
.then(res => [Link]())
.then(data => [Link](data));
}, []);
```
3
- When deployed, React will be served by [Link], and API calls will go through the same server.
---
## 📌 Step 5: Build React for Produc on
1. In the `client` folder:
```bash
npm run build
```
This creates a `build` folder with op mized sta c files.
2. Your [Link] server (`[Link]`) will serve these files.
---
## 📌 Step 6: Run the Combined App
From the root folder:
```bash
node [Link]
```
Now your React frontend and [Link] backend run together on port 5000.
---Got it — let’s walk through crea ng a simple **ReactJS applica on with a backend**. I’ll
outline the structure and give you starter code for both parts so you can run it locally.
4
---
## 🖥 Frontend: ReactJS
We’ll use **Create React App** for simplicity.
### Steps
1. Create the React app:
```bash
npx create-react-app my-app
cd my-app
```
2. Install Axios (for API calls):
```bash
npm install axios
```
3. Example `[Link]`:
```javascript
import React, { useState, useEffect } from "react";
import axios from "axios";
func on App() {
const [message, setMessage] = useState("");
5
useEffect(() => {
[Link]("h p://localhost:5000/api/hello")
.then(response => setMessage([Link]))
.catch(error => [Link](error));
}, []);
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h1>React + Backend Demo</h1>
<p>{message}</p>
</div>
);
export default App;
```
---
## ⚙ Backend: [Link] + Express
We’ll create a simple Express server.
### Steps
6
1. In the root folder (outside `my-app`), create a backend folder:
```bash
mkdir backend
cd backend
npm init -y
npm install express cors
```
2. Example `[Link]`:
```javascript
const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 5000;
[Link](cors());
[Link]("/api/hello", (req, res) => {
[Link]({ message: "Hello from backend!" });
});
[Link](PORT, () => {
[Link](`Server running on h p://localhost:${PORT}`);
7
});
```
3. Run the backend:
```bash
node [Link]
```
---
## 🔗 Connec ng Frontend & Backend
- React runs on port **3000**, backend on **5000**.
- Axios in React fetches data from `h p://localhost:5000/api/hello`.
- You’ll see `"Hello from backend!"` displayed in your React app.
**To configure Nginx as a reverse proxy, you’ll define a `server` block that listens on a public
port (like 80/443) and forwards requests to your backend (e.g., [Link]/Express on port 5000).
The key direc ve is `proxy_pass`, which tells Nginx where to send traffic.**
---
## 🔧 Basic Reverse Proxy Setup
### 1. Install Nginx
On Ubuntu/Debian:
8
```bash
sudo apt update
sudo apt install nginx
```
### 2. Create a Configura on File
Edit or create a site config in `/etc/nginx/sites-available/myapp`:
```nginx
server {
listen 80;
server_name [Link];
loca on / {
proxy_pass h p://localhost:5000;
proxy_h p_version 1.1;
proxy_set_header Upgrade $h p_upgrade;
proxy_set_header Connec on 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $h p_upgrade;
```
9
- **`listen 80`** → Nginx listens on port 80 (HTTP).
- **`proxy_pass h p://localhost:5000;`** → Forwards requests to backend running on port
5000.
- **Headers** → Ensure WebSocket and API requests work properly.
### 3. Enable the Site
```bash
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
sudo nginx -t # test configura on
sudo systemctl restart nginx
```
---
## 🌐 HTTPS with SSL (Recommended)
For produc on, secure with **Let’s Encrypt**:
```bash
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d [Link]
```
This automa cally updates your Nginx config with SSL cer ficates.
---
10
## ⚠ Common Pi alls
- **Firewall**: Ensure ports 80/443 are open.
- **Backend Binding**: Your Node/Express app should bind to `localhost:5000`, not `[Link]`,
when behind Nginx.
- **Mul ple Apps**: Use different `loca on` blocks or subdomains to proxy to different
backends.
---
## 📊 Example: Mul ple Backends
```nginx
server {
listen 80;
server_name [Link];
loca on /api {
proxy_pass h p://localhost:5000;
loca on /app {
proxy_pass h p://localhost:3000;
```
11
- Requests to `/api` go to backend (Express).
- Requests to `/app` go to React frontend.
---
## ✅ Next Steps
- Test with `curl h p://[Link]/api/hello`.
- Check logs in `/var/log/nginx/[Link]` if issues arise.
- Scale by adding **upstream blocks** for load balancing.
12