Effortless React App Deployment: From Local to VPS

Deploying a frontend application with a single click has become the new norm. These one-click solutions are powerful — they automate setup, build, and deployment processes, making it easy to get your site online with minimal effort. However, while these platforms simplify deployment, it’s valuable to understand the mechanics behind them, especially if you want more control over your hosting environment.

React also makes deployment straightforward by allowing you to generate an optimized build for production. This build is a set of static files that can easily be served on any web server. When you run npm run build in your React project, React compiles and optimizes your app, creating files that are ready to deploy anywhere.

In this guide, I’m using DigitalOcean, but you can use any cloud service provider or VPS provider. You just need SSH access.

1. Setup your digital ocean droplet

There are many guides available on how to provision a droplet on DigitalOcean, so you can follow one of those to get your droplet up and running. For the specifications, you don’t need anything too powerful — you’re not running an Iron Man suit here; you’re simply deploying a static application. For this purpose, any droplet with 1GB RAM, 1 vCPU, and Ubuntu installed will be sufficient.

2. Connect to droplet using ssh

ssh root@your_droplet_ip

3. Installing Nginx, Node, and npm

We’ll need to install Nginx on our server to handle web traffic. Along with that, we’ll also install Node.js and npm to manage our packages and enable us to run the build process directly on the VPS. This setup will be useful if we want to establish a continuous integration (CI) process in the future, as it eliminates the need to manually copy the build directory to the VPS each time.

sudo apt update && sudo apt upgrade -y
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs
sudo apt install nginx -y
sudo apt install git -y

4. Create a build of your application

React provides all the necessary tools to build your application, with the build command already defined in the package.json file. To create an optimized, production-ready build, simply run:

npm run build

and you get the static files ready to be served.

You can either create these static files on your local system and copy them to the server or build them directly on the VPS. To build on the VPS, clone your project repository, install dependencies, and follow the same build steps as you would locally.

If you’d prefer not to create the build on the VPS, you can copy the locally-built static files directly to the server with this command:

scp -r build/* root@your_droplet_ip:/var/www/your_project

Permissions: After copying files to /var/www/your_project, ensure the directory has the correct permissions to allow Nginx to access them:

sudo chown -R www-data:www-data /var/www/your_project
sudo chmod -R 755 /var/www/your_project

5. Configure nginx

a. SSH into the VPS Log in to your VPS via SSH:

ssh root@your_droplet_ip

b. Create a Server Block for Serving Your Application Create a new Nginx configuration file for your project:

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

Paste the following configuration:

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/your_project;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

c. Enable the Configuration Create a symbolic link from the sites-available directory to the sites-enabled directory:

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

d. Test and Restart Nginx Test the Nginx configuration to ensure there are no syntax errors:

sudo nginx -t

If the test is successful, reload Nginx to apply the changes:

sudo systemctl reload nginx

That’s it! Now, you can visit your IP address or domain (as set in the Nginx server block) in a browser to check if your React app is up and running.

If you don’t see your site as expected, it might be due to the firewall not being set up properly. To fix this, enable the firewall and allow traffic for Nginx by running the following commands on your server:

sudo ufw allow 'Nginx Full'
sudo ufw enable

This will allow HTTP and HTTPS traffic to reach your server.

If you want to automate the deployment process using Continuous Integration (CI), I will be writing a separate blog on that. The key difference would be serving the files from within the server using tools like pm2 or serve for a more dynamic and automated approach.

If you have any questions or doubts, feel free to leave a comment below. And if you found this blog helpful, don’t forget to give it a thumbs up! Your feedback is appreciated.

Connect with me:

1. Twitter: https://x.com/Dikshantrajpu20/
2. Github: https://github.com/dikshantrajput
3. Medium: https://dikshantraj2001.medium.com/