How to Deploy a React App to a VPS: The Complete 2026 Guide
Deploy your React app to a VPS with Nginx and SSL for under $5/month. We cover the manual approach step by step, then show you how DeployWise automates the entire process in under 2 minutes.
Why deploy React to your own VPS?
Platforms like Vercel and Netlify make React deployments effortless, but they come with trade-offs: bandwidth limits, vendor lock-in, and costs that scale with traffic. A VPS gives you a fixed monthly cost regardless of how many visitors you get, full SSH access, and the freedom to host multiple projects on one server.
A production React app built with npm run build outputs static HTML, CSS, and JavaScript files. Serving these from Nginx on a VPS is incredibly fast and resource-efficient. Even a $5/month server can handle hundreds of thousands of monthly visitors.
No bandwidth fees, no per-request charges. Predictable costs.
Root access, custom configs, no vendor lock-in.
Nginx serves static React builds with sub-millisecond latency.
Prerequisites
Before you start, make sure you have the following ready:
| Requirement | Details | Cost |
|---|---|---|
| VPS | Ubuntu 22.04+, 1GB RAM minimum | $3-5/mo |
| Domain name | A-record pointing to your VPS IP | $10-12/yr |
| React app | CRA, Vite, or any build-based React project | Free |
| SSH access | SSH key configured for your VPS | Free |
| Node.js (local) | v18+ for building your React app locally | Free |
Method 1: Deploy React to VPS manually
This method walks you through every step of deploying a React app to a VPS by hand. It takes about 15-20 minutes the first time. Once you understand the process, you can automate it with Method 2.
1Build your React app
Run the production build command in your project directory. This compiles your React code into optimized static files.
# For Vite-based React projects npm run build # Output: dist/ # For Create React App npm run build # Output: build/
2Set up your VPS
SSH into your VPS and install Nginx. We will use Nginx to serve the static build files.
# SSH into your server ssh root@your-server-ip # Update packages and install Nginx sudo apt update && sudo apt upgrade -y sudo apt install nginx -y # Start and enable Nginx sudo systemctl start nginx sudo systemctl enable nginx # Create a directory for your app sudo mkdir -p /var/www/myreactapp
3Transfer build files to the server
Use SCP or rsync to upload your build output to the VPS. Rsync is preferred for subsequent deploys because it only transfers changed files.
# Using SCP (first deployment) scp -r ./dist/* root@your-server-ip:/var/www/myreactapp/ # Using rsync (faster for updates) rsync -avz --delete ./dist/ root@your-server-ip:/var/www/myreactapp/
4Configure Nginx
Create an Nginx server block to serve your React app. The try_files directive is critical for React Router to handle client-side routing.
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;
root /var/www/myreactapp;
index index.html;
# Handle React Router (SPA routing)
location / {
try_files $uri $uri/ /index.html;
}
# Cache static assets aggressively
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Enable gzip compression
gzip on;
gzip_types text/plain text/css application/json
application/javascript text/xml application/xml
image/svg+xml;
gzip_min_length 256;
}# Enable the site sudo ln -s /etc/nginx/sites-available/myreactapp /etc/nginx/sites-enabled/ # Remove default site sudo rm /etc/nginx/sites-enabled/default # Test config and reload sudo nginx -t sudo systemctl reload nginx
5Add SSL with Certbot
Install Certbot and get a free SSL certificate from Let's Encrypt. This automatically modifies your Nginx config to serve over HTTPS.
# Install Certbot sudo apt install certbot python3-certbot-nginx -y # Get SSL certificate (auto-configures Nginx) sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com # Verify auto-renewal sudo certbot renew --dry-run
Visit https://yourdomain.com to see your React app served from your VPS with SSL. Total time: ~15 minutes. Total cost: ~$5/month.
Method 2: The automated way with DeployWise
The manual method works, but every time you push a change you need to build locally, transfer files, and reload Nginx. DeployWise automates this entire pipeline. Here is how to set it up in under 2 minutes.
Sign in to DeployWise with GitHub and select the repository containing your React app. DeployWise detects your build command and output directory automatically.
Paste your server IP and SSH key. DeployWise installs all required dependencies (Nginx, Node.js, Certbot) and configures your server in one click.
Every push to your main branch triggers a build and deployment. DeployWise handles the build, file transfer, Nginx reload, and SSL renewal automatically.
Manual vs DeployWise: side by side
| Task | Manual | DeployWise |
|---|---|---|
| Initial setup time | 15-20 minutes | 2 minutes |
| Deploy new changes | Build + SCP + reload | git push |
| SSL setup | Manual Certbot | Automatic |
| Nginx configuration | Write config manually | Auto-generated |
| Rollback | Manual (keep old builds) | One-click rollback |
| Zero-downtime deploy | No (unless scripted) | Yes, built-in |
| Cost | VPS only ($5/mo) | VPS only ($5/mo) - DeployWise is free |
Performance optimization tips
Once your React app is deployed, apply these optimizations to make it load faster and rank better in search engines.
Add gzip directives in your Nginx config to compress text-based assets. This typically reduces transfer sizes by 60-80% and dramatically improves load times.
Use 'expires 1y' for hashed static assets (JS, CSS). Vite and CRA add content hashes to filenames, making long-term caching safe and effective.
Place Cloudflare (free tier) in front of your VPS for global edge caching. This adds DDoS protection and reduces latency for international visitors.
Use React.lazy() and dynamic imports to split your bundle. This reduces initial load time by only loading the code needed for the current route.
Common errors and troubleshooting
Cause: Nginx is looking for a file matching the URL path instead of serving index.html.
Fix: Add 'try_files $uri $uri/ /index.html;' to your Nginx location block. This is the most common issue when deploying React SPAs.
Cause: Nginx does not have permission to read files in your web root.
Fix: Run 'sudo chown -R www-data:www-data /var/www/myreactapp' and ensure the directory has 755 permissions.
Cause: Nginx is not running or your firewall is blocking port 80/443.
Fix: Check Nginx status with 'sudo systemctl status nginx'. Open ports with 'sudo ufw allow 80' and 'sudo ufw allow 443'.
Cause: Your React app is making HTTP requests instead of HTTPS to APIs or assets.
Fix: Update API URLs to use HTTPS, or use relative URLs. Check for hardcoded 'http://' in your source code or environment variables.
Cause: The homepage field in package.json is incorrect, or the build output path is wrong.
Fix: Set 'homepage': '.' in package.json (CRA) or check 'base' in vite.config.ts. Verify the build output is in the correct Nginx root directory.
React hosting cost comparison
How does hosting a React app on a VPS compare to popular platforms? Here is a realistic cost breakdown for a React app with 100K monthly pageviews:
| Platform | Monthly Cost | Bandwidth | Custom Domain + SSL |
|---|---|---|---|
| Vercel (Pro) | $20+ | 1TB (overages apply) | Included |
| Netlify (Pro) | $19+ | 1TB (overages apply) | Included |
| AWS Amplify | $5-20 | Pay per GB | Included |
| Firebase Hosting | $0-25 | 10GB free, then pay | Included |
| VPS + DeployWise | $5 | 20TB+ included | Free (Let's Encrypt) |
* VPS pricing based on Hetzner CX22. Bandwidth and SSL included at no extra cost.
Frequently asked questions
Is a VPS good for hosting a React app?
Yes. A VPS is one of the best options for hosting a React app in production. Since React builds into static files (HTML, CSS, JS), even a $5/month VPS with Nginx can serve millions of requests. You get full control, predictable pricing, and no bandwidth overage charges.
How much does it cost to host a React app on a VPS?
You can host a React app on a VPS for as little as $3-5/month. Providers like Hetzner, DigitalOcean, and Vultr offer entry-level VPS plans with enough resources to serve a production React app with moderate traffic. There are no per-request or bandwidth fees.
Do I need Node.js on the server to host a React app?
No. A production React app built with npm run build outputs static files. You only need a web server like Nginx or Apache to serve them. Node.js is only needed on the server if you are running a server-side rendered (SSR) React app or a Next.js app.
How do I set up SSL for a React app on a VPS?
Use Certbot with Let's Encrypt to get a free SSL certificate. After installing Certbot, run 'sudo certbot --nginx -d yourdomain.com' and it will automatically configure SSL for your Nginx server block. Certificates auto-renew every 90 days.
Can I use CI/CD with a VPS for React deployments?
Yes. You can set up GitHub Actions, GitLab CI, or tools like DeployWise to automate deployments. With DeployWise, you connect your GitHub repo and VPS once, and every push to your main branch triggers an automatic build and deployment.
Should I use Vercel or a VPS for my React app?
It depends on your needs. Vercel is easier to set up but charges for bandwidth and has vendor lock-in. A VPS costs $5/month flat, gives you full control, and has no bandwidth limits. For side projects and startups watching costs, a VPS with DeployWise offers the best value.
How do I handle routing for a React SPA on Nginx?
Add 'try_files $uri $uri/ /index.html;' to your Nginx server block. This tells Nginx to serve index.html for any route that does not match a static file, which allows React Router to handle client-side routing correctly.
What VPS provider is best for hosting React apps?
Hetzner, DigitalOcean, Vultr, and Linode are all excellent choices. Hetzner offers the best price-to-performance ratio in Europe. DigitalOcean has the most beginner-friendly interface. All of them work with DeployWise for automated deployments.
Deploy your React app in 2 minutes
Connect your GitHub repo, add your VPS, and push to deploy. No config files, no Docker, no CI/CD pipelines to maintain. DeployWise is free and open source.
Try DeployWise Free