mern stack hosting in hostinger with nigex

MERN Stack Hosting on Hostinger with Nginx

In this blog post, we will go over how to host your MERN (MongoDB, Express, React, Node.js) stack application on Hostinger using Nginx as a reverse proxy server. This tutorial will guide you step by step to make your MERN app production-ready on a shared Hostinger server with Nginx handling requests and routing traffic.

What is MERN Stack?

MERN Stack is a collection of technologies that helps developers create full-stack web applications. It consists of the following components:

• MongoDB - A NoSQL database for storing application data.
• Express.js - A web framework for Node.js to build web applications and APIs.
• React - A JavaScript library for building user interfaces.
• Node.js - A JavaScript runtime for server-side programming.

Why Host MERN Stack on Hostinger with Nginx?

Hostinger provides affordable hosting solutions that can easily support a MERN stack application. Nginx, a powerful web server, will act as a reverse proxy to handle incoming requests and direct them to the appropriate Node.js server. Nginx is known for its speed, efficiency, and ability to handle a large number of concurrent connections, making it ideal for production deployments.

Steps to Host MERN Stack on Hostinger with Nginx

Here are the steps to host your MERN Stack application on Hostinger with Nginx:

• Step 1: Set up your Hostinger VPS
  Create a VPS account on Hostinger. You can choose a basic VPS plan and install a Linux distribution (Ubuntu or CentOS) to get started.
• Step 2: Install Node.js and NPM
  SSH into your server and install Node.js and NPM by running the following commands:

  
  sudo apt update
  sudo apt install nodejs npm
              

• Step 3: Upload your MERN app
  Once you’ve built your MERN app locally, upload the files to your VPS server using SCP or SFTP.
• Step 4: Install dependencies
  Navigate to the project directory and install the necessary dependencies by running:

  
  npm install
              

• Step 5: Start your Node.js application
  Start your Node.js app in the background using PM2 to keep it running even after you log out:

  
  pm2 start app.js --name "mern-app"
  pm2 save
              

• Step 6: Install and Configure Nginx
  Install Nginx on your server:

  
  sudo apt install nginx
              

  Now, configure Nginx to serve your MERN app by editing the Nginx configuration file:

  
  sudo nano /etc/nginx/sites-available/default
              

  In the server block, you’ll want to set up the reverse proxy:

  
  server {
      listen 80;
      server_name your_domain_or_ip;
  
      location / {
          proxy_pass http://localhost:3000;  # Port your Node.js app is running on
          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;
      }
  }
              

• Step 7: Restart Nginx
  Restart Nginx to apply the changes:

  
  sudo systemctl restart nginx
              

• Step 8: Test your application
  Open your browser and visit your server's IP address or domain name to check if your MERN application is running smoothly!

Conclusion

By following these steps, you will have successfully deployed your MERN stack application on Hostinger, using Nginx as a reverse proxy to manage requests. This setup ensures that your app is optimized for production and ready to handle incoming traffic efficiently. Happy coding!