Deploy MERN website on VPS Hostinger
Published: 2024-02-10 19:09:24

Deploying a MERN (MongoDB, Express.js, React.js, Node.js) stack on a VPS (Virtual Private Server) like Hostinger involves several steps. Here's a general guide to help you get started:

1. **Set up your VPS:**
   - Log in to your Hostinger account and access your VPS dashboard.
   - Create a new VPS instance if you haven't already.
   - Note down your VPS IP address and SSH credentials.

2. **Connect to your VPS via SSH:**
   - Use an SSH client like PuTTY (Windows) or Terminal (Mac/Linux) to connect to your VPS using the provided SSH credentials.

3. **Install necessary software:**
   - Update your package list: `sudo apt update`
   - Install Node.js and npm: Follow Node.js installation instructions for your Linux distribution.
   - Install MongoDB: You can follow the official MongoDB installation guide for your Linux distribution.
   - Install a web server like Nginx to serve your React frontend.

4. **Set up your MongoDB database:**
   - Configure MongoDB to run as a service.
   - Secure your MongoDB installation by setting up authentication and firewall rules.

5. **Clone your MERN project:**
   - Use Git to clone your MERN project repository onto your VPS.

6. **Install dependencies and build your React app:**
   - Navigate to your project directory.
   - Install backend dependencies: `npm install`
   - Navigate to the client directory (where your React app resides) and install frontend dependencies: `npm install`
   - Build your React app: `npm run build`

7. **Configure Express.js server:**
   - Ensure your Express.js server is configured to serve the built React app from the `build` directory.

8. **Start your MERN stack:**
   - Start your Express.js server: `npm start` or using a process manager like PM2 for better process handling.
   - Start your MongoDB service if it's not already running.

9. **Configure Nginx:**
   - Set up Nginx as a reverse proxy to forward requests to your Express.js server.
   - Create a new server block in your Nginx configuration file and configure it to point to your Express.js server.

10. **Secure your server:**
    - Configure firewall rules to only allow necessary incoming connections.
    - Set up HTTPS using Let's Encrypt SSL certificates for secure communication.
    - Harden your server by following security best practices.

11. **Monitor and maintain your server:**
    - Set up monitoring tools to track server performance and uptime.
    - Regularly update your server's software and dependencies to patch security vulnerabilities.
    - Back up your data regularly to prevent data loss.

> Steps Summary to check the deployment

`mkdir <project folder name>` 
`cd <project folder>` 
`git clone <repo url>`
`npm install`
`npm run build`
`pm2 serve build/ 3000 --name "react-build" --spa`
`pm2 status` 
`sudo ufw allow 3000`
`sudo ufw status`

for reactjs files
`pm2 serve build/ 3000 --name "react-build" --spa`

for static file like html (inside the folder)
`pm2 serve --spa`

Remember to adapt these steps according to your specific project requirements and the configurations of your VPS provider. Additionally, it's essential to ensure the security and performance of your deployed application by implementing best practices and regularly monitoring your server.