Using Nginx as a Reverse Proxy for Full Stack Applications
When you build a full stack application, you often have two parts: the frontend and the backend. The frontend is usually something like React, Vue, or Angular. The backend might be built with Node.js, Express, or another server-side framework.
Once your app is ready, you need to put it online. But here’s the problem—your frontend and backend are running on different ports, like 3000 and 5000. You want users to access your app from one single URL, like example.com, without worrying about which part is running where.
That’s where Nginx comes in. Nginx is a favoured web server that can also act as a reverse proxy. It takes requests from users and sends them to the correct part of your application. This keeps things clean, simple, and secure.
If you’re enrolled in a full stack developer course, learning how to use Nginx is a smart move. It’s used in real production systems and helps manage traffic between your frontend, backend, and other services.
What Is a Reverse Proxy?
Let’s start with the basics.
A proxy is something that sits between two other things. In networking, a reverse proxy is a server that obtains requests from users and forwards them to another server (like your backend or frontend).
So, if a user goes to yourapp.com, Nginx receives that request. Based on your setup, it decides whether to send it to:
- Your frontend, which handles pages and design
- Your backend, which handles API and database
This way, the user only sees one clean URL, even though your app is running in two different places.
Why Use Nginx in Full Stack Projects?
Here are some reasons why developers use Nginx:
- Single entry point for your whole app
- Hides internal ports like 3000 or 5000
- Improves security by filtering bad traffic
- Supports HTTPS, caching, and other features
- Scales easily when you add more services
When building serious apps, Nginx becomes very useful. It helps you control the flow of traffic and gives you more control over how users reach your app.
Basic Setup: A Frontend and Backend
Let’s say you have:
- A frontend (React app) running on port 3000
- A backend (Node.js + Express) running on port 5000
Without Nginx, users would have to go to:
- http://yourdomain.com:3000 for the frontend
- http://yourdomain.com:5000/api for the backend
That’s messy. Instead, you want everything to be served from:
- http://yourdomain.com for the frontend
- http://yourdomain.com/api for the backend
Nginx makes this possible.
Installing Nginx
If you’re using Ubuntu or a similar Linux system, you can install Nginx like this:
sudo apt update
sudo apt install nginx
After installing, you can check the status:
sudo systemctl status nginx
If it’s running, your server is ready to accept traffic.
Configuring Nginx as a Reverse Proxy
Now we’ll write a simple Nginx config to serve both parts of your app.
Step 1: Open the Nginx config file
sudo nano /etc/nginx/sites-available/default
You might see a default setup. You can replace it or adjust it like this:
server {
listen 80;
server_name yourdomain.com;
location / {
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_cache_bypass $http_upgrade;
}
location /api/ {
proxy_pass http://localhost:5000;
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;
}
}
What this config does:
- All requests to / go to the React frontend on port 3000
- All requests to /api/ go to the Node.js backend on port 5000
- It forwards necessary headers for smooth communication
Save and exit the file.
Step 2: Restart Nginx
sudo systemctl restart nginx
Now when users go to http://yourdomain.com, they’ll see your frontend. When the frontend makes API calls to /api, those calls go to your backend.
This simple setup works for many full stack applications.
If you’re working on deployment projects in your full stack developer classes, using Nginx like this will help you combine frontend and backend cleanly on one domain.
Adding HTTPS with Nginx and Let’s Encrypt
To make your site protected (using HTTPS), you can use Certbot with Nginx. It’s free and easy.
Step 1: Install Certbot
sudo apt install certbot python3-certbot-nginx
Step 2: Get a certificate
sudo certbot –nginx -d yourdomain.com
Follow the prompts. Certbot will automatically update your Nginx config to use HTTPS.
Now your site is secure, and users will see a padlock in the browser.
Testing and Debugging
Sometimes things don’t work right away. Here are some tips:
Check Nginx status:
sudo systemctl status nginx
Test your config before restarting:
sudo nginx -t
View logs if something breaks:
- Access log: /var/log/nginx/access.log
- Error log: /var/log/nginx/error.log
You can also use your browser’s dev tools (F12) to see if API calls are working or not.
Nginx with Dockerized Apps
If your frontend and backend are running in Docker containers, you can still use Nginx. Just update the IPs or container names in the Nginx config. For example:
proxy_pass http://frontend_container:3000;
proxy_pass http://backend_container:5000;
Make sure Nginx is on the same Docker network, or install it directly on the server.
Using Nginx with Docker is great for real deployment setups.
Advanced Ideas
Once you’re comfortable, you can try:
- Load balancing with Nginx (for multiple servers)
- Caching static files
- Rate limiting to prevent abuse
- Redirects and URL rewrites
Nginx is a powerful tool and used by many companies around the world.
Why Nginx Matters for Full Stack Developers
In small demo projects, you can skip Nginx. But in real-world apps, it becomes essential.
Here’s why it matters:
- Professional deployment: Used in real production apps
- Clean URLs: Users don’t see confusing ports or endpoints
- Security and speed: Nginx helps protect and optimize your app
- Flexible routing: Connect multiple services behind one domain
If you are learning through a full stack developer course, adding Nginx to your toolset makes your apps deployment-ready and shows that you understand how real systems are built.
Final Thoughts
In this blog, we learned how to use Nginx as a reverse proxy for full stack applications. We covered:
- What a reverse proxy is
- Why Nginx is useful
- How to set it up for frontend and backend
- How to secure it with HTTPS
- How to use it with Docker
Whether you’re building your first app or deploying a client project, Nginx is a reliable and smart tool to have.
If you’re going through full stack developer classes, make sure you practice with Nginx in at least one of your projects. It will improve your understanding of deployment and help you stand out in interviews or job applications.
Now try setting up Nginx with your own project—and make your full stack app look and feel like a real product!
Contact Us:
Name: ExcelR – Full Stack Developer Course in Hyderabad
Address: Unispace Building, 4th-floor Plot No.47 48,49, 2, Street Number 1, Patrika Nagar, Madhapur, Hyderabad, Telangana 500081
Phone: 087924 83183
