Deploying MERN app using a Node.js Droplet and DreamHost

Hi there,

What I could suggest is using a web service like Nginx to serve your frontend, that way you will also be able to install an SSL certificate as well.

Here’s how you can deploy your MERN stack app using Nginx:

Backend Deployment (Node.js):

Since you already have this running, ensure that your Node.js backend is listening on a local port, like localhost:5000.

Frontend Deployment:

1. Build the React App: On your local machine, navigate to the client directory and run:

   yarn build
   

2. Upload the Build to DigitalOcean: Transfer the build directory to your DigitalOcean Droplet.

3. Install Nginx: If you haven’t already, install Nginx on your Droplet:

   sudo apt update
   sudo apt install nginx
   

4. Configure Nginx:

   • Open the Nginx default configuration:

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

   • Modify the configuration to serve your static files and proxy requests to your Node.js backend:

server {
    listen 80;

    server_name yourdomain.com www.yourdomain.com;

    location / {
        root /path/to/your/client/build;
        try_files $uri /index.html;
    }

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

Make sure to replace /path/to/your/client/build with the actual path to the build directory on your Droplet. Also, if your backend routes don’t follow the /api/ pattern, adjust the location directive accordingly.

Next restart Nginx:

sudo systemctl restart nginx

After that configure your DNS:

• Point your domain’s A record to the IP address of your DigitalOcean Droplet.
• It might take some time for DNS changes to propagate.

Some additional remarks:

• SSL: For security, set up SSL for your domain using Let’s Encrypt. Nginx and Let’s Encrypt work really well together. Once set up, you can modify your Nginx configuration to redirect HTTP traffic to HTTPS and set up the SSL certificate and key paths:

https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-22-04

• Environment Variables: Ensure all environment variables needed for production are set on your DigitalOcean Droplet.

• Database: If your app uses a database, ensure it’s properly set up, optimized, and secured for production.

• DreamHost: You’re primarily using DreamHost for domain registration and DNS management, since you’re serving both frontend and backend from the DigitalOcean Droplet using Nginx.

Best,

Bobby