How to Deploy React App with node backend on Production?

Question

Hi ,

I am having react app with node backend.I had successfully deployed react app on digital ocean using the tutorial.

“https://coderrocketfuel.com/article/deploy-a-create-react-app-website-to-digitalocean#option-2-install-the-key-manually”

but it is not able to use backend.

I am getting “.500 Internal Server Error” For node, i had used tutorial below for server setting.

https://hackernoon.com/start-to-finish-deploying-a-react-app-on-digitalocean-bcfae9e6d01b.

Thanks

Bobby · Answer

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

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

The developer cloud

Start building today

Report this

How to Deploy React App with node backend on Production?

Related questions

How to tell if Docker Compose is recreating containers for no reason, and whether 5.5 actually fixes it

How should I deploy a browser-based Instagram media downloader on DigitalOcean?

Is it safe to run production apps on a single DigitalOcean Droplet?

403 Forbidden on DigitalOcean App Platform with FastAPI Backend & Streamlit Frontend

I'm getting this ERROR: you dont' have permission to complete this action

App.yaml file is not detected in the root or .do directory

ReferenceError: module is not defined in ES module scope

npm run build/vite build time out killed

Droplet's Nginx Reverse Proxy Fails with 502 Bad Gateway Only After Deploy Any Thoughts?

Cannot deploy from private github repo

Django/Nginx/Gunicorn "unknown errors" in nginx logs

How to deploy a responsive web design project on a VPS using Git?

Report this

How to Deploy React App with node backend on Production?

Related questions

How to tell if Docker Compose is recreating containers for no reason, and whether 5.5 actually fixes it

How should I deploy a browser-based Instagram media downloader on DigitalOcean?

Is it safe to run production apps on a single DigitalOcean Droplet?

403 Forbidden on DigitalOcean App Platform with FastAPI Backend & Streamlit Frontend

I'm getting this ERROR: you dont' have permission to complete this action

App.yaml file is not detected in the root or .do directory

ReferenceError: module is not defined in ES module scope

npm run build/vite build time out killed

Droplet's Nginx Reverse Proxy Fails with 502 Bad Gateway Only After Deploy Any Thoughts?

Cannot deploy from private github repo

Django/Nginx/Gunicorn "unknown errors" in nginx logs

How to deploy a responsive web design project on a VPS using Git?