DEV Community

Cover image for Let’s deploy the Web Application
Ferhat Demir
Ferhat Demir

Posted on • Edited on

4 2 2 2 1

Let’s deploy the Web Application

Hello, everyone. I want to share how we can deploy our Frontend and Backend applications in this article. I used React.js on the Frontend and Nest.js on the Backend side.

First of all, I want to explain these terms;

Web Hosting: Web hosting is an online service that makes your website’s content accessible online. When you purchase a hosting plan, you rent space on a physical server to store all the website’s files and data. I will use Hostinger in this article, but you can use other web hosting services like DigitalOcean, Contabo, etc.

Nginx: Ngnix is open-source web server software designed to handle many connections simultaneously. It is a web server but is commonly used as a reverse proxy. It can be scaled efficiently as a web server and a reverse proxy. Ngnix also helps establish a secure connection between your data centers and the outside network. It works well as an HTTP load balancer that allows you to use multiple load-sharing mechanisms.

PM2: PM2 is an advanced process manager for NodeJS applications that allows you to start, control, or stop your node processes quickly. It runs as a daemon on the server and will ensure your app is available 24/7. Therefore, I will run our backend on the server using the PM2 command.

Installing Nginx
First, I connect my remote Ubuntu server with SSH and run these commands.

sudo apt update
sudo apt install nginx
Enter fullscreen mode Exit fullscreen mode

After these commands, Ubuntu starts Nginx. The server should already be up and running. Open your browser and navigate to your server’s IP address to access the default Nginx landing page to confirm that the software is running correctly.

Configuring Nginx
Before the Nginx configuration, let’s clone our application to the /var/www/your_domain folder. You can initialize and set up the app in this directory, or you can clone the app from GitHub. I cloned it because my app already exists in my GitHub.

Nginx on Ubuntu has one server block enabled by default that is configured to serve documents out of a directory at /var/www/

Then, let’s update the Backend .env file.

APP_PORT=3000
APP_URL=http://your_ip_address
BE_APP_URL=http://your_ip_address
Enter fullscreen mode Exit fullscreen mode

And then, let’s update the Frontend .env file.

VITE_PORT=3001
VITE_APP_URL=http://your_ip_address
VITE_BASE_API_URL=http://your_ip_address/api
Enter fullscreen mode Exit fullscreen mode

Note: I did set a global prefix to my Nest.js app in start.ts using this command: app.setGlobalPrefix('api')

And then, let’s build our Backend and Frontend applications.

Now, we can continue to configure the Ngnix. Let’s run this command and open the Nginx config file.

sudo nano /etc/nginx/sites-available

We can configure it like this;

server {
 listen 80;
 listen [::]:80;

 root /var/www/your_domain/app/web/dist; #it's a build folder the frontend app
 server_name your_domain your_ip_address;

 location / {
   try_files $uri /index.html;
 }

 location /api {
     proxy_pass http://your_ip_address: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;
 }
}
Enter fullscreen mode Exit fullscreen mode

Next, let’s enable the file by creating a link from it to the sites-enabled directory, which Nginx reads from during startup:

ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled

/etc/nginx: The Nginx configuration directory. All of the Nginx configuration files reside here.
/etc/nginx/sites-available/: The directory where per-site server blocks can be stored. Nginx will not use the configuration files in this directory unless linked to the sites-enabled directory. Typically, all server block configuration is done in this directory and then enabled by linking to the other directory.
/etc/nginx/sites-enabled/: The directory where enabled per-site server blocks are stored. Typically, these are created by linking to configuration files in the sites-available directory.

Let’s test to make sure that there are no syntax errors in any of your Nginx files:

sudo nginx -t

And restart the nginx to enable our changes.

sudo systemctl restart nginx

Nginx should now be serving your Frontend app. You can test this by navigating to http://your_domain, or http://your_domain

Let’s serve the Backend
I’m installing the PM2 with NPM and starting the backend app.

pm2 start app.js

npm install pm2@latest -g
pm2 start /var/www/your_domain

And let’s check the process using the pm2 ps command.

Some definitions were sourced from this website https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-20-04

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (2)

Collapse
 
ritik_raj_eb4e6e986982918 profile image
Ritik Raj

I followed the guide to deploy my React.js frontend and Nest.js backend with Nginx, but I ran into quite a few problems. The Nginx installation seemed fine, but when it came to setting up the reverse proxy and making sure both the front end and back end were working, nothing went as planned. The configuration to handle /API routes kept failing, and PM2 wasn’t picking up my backend app correctly, even after multiple restarts. I spent hours troubleshooting, and it still didn’t work right. I wish there was more clarity on setting up the reverse proxy with Nginx and PM2 for apps like mine.

If you're facing similar issues, I recommend checking out the Guide on How to Install Nginx on Ubuntu 24.04. It was helpful for understanding some basic Nginx configuration steps and helped me resolve some of the issues I was dealing with.

Collapse
 
megha_khateek_aec27554ca7 profile image
Megha Khateek

I followed the guide to deploy my React.js frontend and Nest.js backend with Nginx, but I ran into quite a few problems. The Nginx installation seemed fine, but when it came to setting up the reverse proxy and making sure both the frontend and backend were working, nothing went as planned. The configuration to handle /API routes kept failing, and PM2 wasn’t picking up my backend app correctly, even after multiple restarts. I spent hours troubleshooting, and it still didn’t work right. I wish there was more clarity on setting up the reverse proxy with Nginx and PM2 for apps like mine.

If you're facing similar issues, I recommend checking out this guide on how to install Nginx on Ubuntu 24.04. It was helpful for understanding some basic Nginx configuration steps and helped me resolve some of the issues I was dealing with."

Let me know if you need any further adjustments!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay