Araz Gholami

For old-generation developers like me, switching from jQuery to React in terms of deployment concepts was horrifying. Remember when deploying meant just FTPing some files and refreshing the browser? Those days are gone, replaced by builds, bundles, and server-side rendering.

Let’s assume you wrote your first React app using crash courses. Now what? How to deploy it? I’ve found that deploying React apps doesn’t have to be as complicated as it seems. Here’s my complete, no-nonsense guide to deploying a React SSR application on Ubuntu with Apache2.

Prerequisites

Before we dive in, make sure you have:

• An Ubuntu server with root/sudo access
• A domain name (I’ll use mywebsite.com in examples)
• Node.js and npm installed
• Git for version control
• About 45 minutes of focused time

1. Setting Up Your Server

First things first. Let’s update your system and install the necessary packages:

sudo apt update && sudo apt upgrade -y
sudo apt install apache2 -y

Now, enable the Apache modules we’ll need:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod rewrite
sudo systemctl restart apache2

2. Preparing Your Application Directory

Create a home for your application:

sudo mkdir -p /var/www/mywebsite.com
sudo chown -R $USER:$USER /var/www/mywebsite.com

Install PM2 globally—it’s your application’s reliable babysitter:

sudo npm install -g pm2

3. Apache Virtual Host Setup

This is where the magic happens. Create a new virtual host configuration:

sudo nano /etc/apache2/sites-available/mywebsite.com.conf

Add this configuration (I’ll explain why each part matters):

ServerName mywebsite.com
ServerAlias www.mywebsite.com

ProxyPreserveHost On
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

ErrorLog ${APACHE_LOG_DIR}/mywebsite.com_error.log
CustomLog ${APACHE_LOG_DIR}/mywebsite.com_access.log combined


Options Indexes FollowSymLinks
AllowOverride All
Require all granted

Enable your site and disable the default Apache site:

sudo a2ensite mywebsite.com.conf
sudo a2dissite 000-default.conf
sudo systemctl restart apache2

4. Securing Your Application with SSL

In 2024, SSL isn’t optional. Here’s how to set it up:

sudo apt install certbot python3-certbot-apache -y
sudo certbot --apache -d mywebsite.com -d www.mywebsite.com

5. Deploying Your React Application

Clone your repository and install dependencies:

cd /var/www/mywebsite.com
git clone your-repository-url .
npm install

Build for production:

npm run build

Start your SSR server with PM2:

pm2 start npm --name "mywebsite" -- start
pm2 save
pm2 startup

6. Monitoring and Troubleshooting

Here are the commands I use daily for monitoring:

# Check application status
pm2 status
pm2 logs mywebsite# Check Apache logs
sudo tail -f /var/log/apache2/error.log
# Verify Apache config
sudo apache2ctl -t

Common issues you might encounter:

• Port 3000 conflicts:

lsof -i :3000

• Permission issues:

sudo chown -R $USER:$USER /var/www/mywebsite.com

Maintenance and Updates

Keep your deployment healthy with these regular maintenance commands:

# Update your application
git pull
npm install
npm run build
pm2 restart mywebsite# Renew SSL certificate
sudo certbot renew
# Monitor real-time metrics
pm2 monit

Why This Approach Works

Unlike jQuery deployments where we could simply upload files and refresh, React SSR applications need a more robust infrastructure. The setup we’ve created:

• Handles server-side rendering efficiently
• Provides production-grade process management
• Includes proper error logging and monitoring
• Supports SSL out of the box
• Makes updates straightforward

That’s it!

Yes, deploying React SSR applications requires more setup than the jQuery days. But once you understand the pieces and why they’re needed, it becomes a repeatable, reliable process.

Have questions about specific parts of the deployment process? Drop them in the comments below. I read and respond to every comment.