How to Deploy React App with node backend on Production?

Hi there,

The first tutorial seems to no longer be available. But here is a step-by-step guide on how to do that:

### 1. Set Up the Droplet

First, you’ll want to create a new Droplet on DigitalOcean.

• Choose Ubuntu as your OS
• Select the size of the Droplet according to your needs
• Select the datacenter region that’s closest to your target audience
• Choose additional options if necessary
• Add your SSH keys
• Name your Droplet and hit “Create”

https://docs.digitalocean.com/products/droplets/how-to/create/

### 2. Connect to Your Droplet

After the Droplet is created, connect to it using SSH:

ssh root@your_droplet_ip

https://docs.digitalocean.com/products/droplets/how-to/connect-with-ssh/

### 3. Update and Install Dependencies

Update package lists and upgrade existing packages:

sudo apt-get update
sudo apt-get upgrade

Install Node.js:

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04

### 4. Set Up Your Project

You can clone your project from a repository or transfer the files using SCP or FTP.

Clone the repository:

git clone https://github.com/yourusername/yourproject.git

Navigate to your project folder:

cd yourproject

Install dependencies:

npm install

### 5. Configure Environment Variables

You may have some environment variables that need to be configured for production. You can add these to a .env file or export them in your shell:

export NODE_ENV=production
export YOUR_VARIABLE=value

### 6. Build the React App

Build the React application for production:

cd client
npm install
npm run build

### 7. Configure a Process Manager

Using a process manager like PM2 can help keep your Node.js app running. Install PM2:

npm install -g pm2

Start your app:

pm2 start server.js --name my-app

Here is a quick video on how to do that as well:

### 8. Set Up a Reverse Proxy with Nginx

Install Nginx:

sudo apt-get install nginx

Configure a reverse proxy by editing a new Nginx config file:

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

Include the following (modify as needed):

server {
    listen 80;
    server_name yourdomain.com;

    # Serve static files from the React build directory
    location /static/ {
        alias /path/to/yourproject/client/build/static/;
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # Serve other files through the Node.js app
    location / {
        proxy_pass http://localhost:YOUR_NODE_PORT;
        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;
    }
}

Note: change the YOUR_NODE_PORT with your Node.js service port

Enable your new config:

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled

Restart Nginx:

sudo systemctl restart nginx

9. Secure with SSL (Optional)

You may want to secure your app with SSL using Certbot:

sudo apt-get install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com

10. Setup Firewall

You might also want to configure the firewall for added security:

sudo ufw allow 'Nginx Full'
sudo ufw enable

That’s it! Your React app with a Node.js backend should now be accessible at your domain name. Make sure your domain name is pointing to the Droplet’s IP address, and remember to check logs and monitor the system to ensure everything is running smoothly.

The DigitalOcean App Platform provides a streamlined approach to deploying React apps with a Node.js backend, eliminating much of the manual configuration and setup associated with traditional servers:

https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform

Best,

Bobby