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

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

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

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;
 }
}

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