Keeping your React app updated on a live server doesn’t have to be a headache. In this quick guide, I’ll walk you through the simplest way to update your React-based web app on a VPS. Whether you’re using a DigitalOcean droplet, AWS EC2, or any other Linux-based server, this method will work smoothly.
Let’s dive right in. 👇
First, open your terminal in the project root directory and run the following command:
npm run build
This will create an optimized production build of your app inside the build/ folder.
Archive all the contents inside the build/ folder (not the folder itself). You can use any zip tool or terminal command like this:
zip -r react-build.zip build/*
This creates a zipped file containing all your static assets that are ready to go live.
Use SSH to log into your VPS:
ssh root@your-server-ip
Replace your-username and your-server-ip with your actual VPS credentials.
Now, go to the directory where your current React app is hosted. For example:
cd /new/www/html
Remove all existing files from the directory to avoid conflicts with your new build:
rm -rf *
⚠️ Be careful! This command deletes everything in the directory. Make sure you’re in the right folder before running it.
Use your preferred FTP/SFTP client (like FileZilla or WinSCP) to upload the react-build.zip file into your VPS directory (e.g., /new/www/html).
Alternatively, you can use SCP from your local machine:
scp react-build.zip your-username@your-server-ip:/var/www/html
Once uploaded, go back to your VPS terminal and unzip the file:
unzip Archive.zip
Then, you can delete the zip file to keep things clean:
rm Archive.zip
That’s it! Your updated React app is now live on your VPS. Just refresh your browser and enjoy the changes. If you’re using Nginx or Apache, make sure it’s already set up to serve the React app from this directory.
Have questions or want to automate deployments? Let’s chat in the comments below!
Happy coding! ✨