Introduction

Deploying a React JS project can seem daunting, but with the right steps, you can transform your local application into a live, accessible web service. This comprehensive guide will walk you through every step of deploying your React application on an Ubuntu server, including domain configuration, server setup, and SSL installation.

Prerequisites

Before we begin, ensure you have:

  • A React JS project ready for deployment
  • An Ubuntu server (VPS or dedicated server)
  • SSH access to your server
  • A registered domain name
  • Basic understanding of Linux commands

Step 1: Connecting to Your Ubuntu Server

For Windows Users: Getting Started with PuTTY
If you're using Windows, no worries! Download PuTTY, a popular SSH client that makes connecting to your server a breeze:

  1. Visit the official PuTTY website (https://www.putty.org/)
  2. Download the Windows installer
  3. Install PuTTY and open the application
  4. Enter your server's IP address in the "Host Name" field
  5. Click "Open" and enter your username and password when prompted

SSH Connection Command
For those using Linux, macOS, or Windows with built-in SSH, connect to your server using:

ssh username@your_server_ip

Replace username with your server username and your_server_ip with the actual IP address of your Ubuntu server.

💡 Pro Tip: If you're frequently connecting to servers, consider generating an SSH key for passwordless, more secure connections!

Step 2: Server Preparation

Update your server's package list and upgrade existing packages:

sudo apt update && sudo apt upgrade -y

Install essential dependencies:

sudo apt install -y nodejs npm nginx certbot python3-certbot-nginx

Step 3: Node.js and NPM Setup

Ensure you have the latest Node.js and npm versions:

# Install Node Version Manager (NVM)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# Reload shell
source ~/.bashrc

# Install latest Node.js
nvm install node
nvm use node

Step 4: Project Deployment

Clone your React project from your version control system:

# Example with GitHub
git clone https://github.com/yourusername/your-react-project.git
cd your-react-project

# Install dependencies
npm install

# Build production version
npm run build

Step 5: Nginx Configuration

Create an Nginx configuration for your React application:

sudo nano /etc/nginx/sites-available/your-domain.com

Add the following configuration:

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    root /path/to/your/react/build;
    index index.html;

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

Enable the configuration:

sudo ln -s /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Step 6: SSL Installation with Let's Encrypt

Obtain a free SSL certificate:

sudo certbot --nginx -d your-domain.com -d www.your-domain.com

Follow the interactive prompts to complete SSL installation.

Step 7: Process Management with PM2

Install PM2 to manage your Node.js processes:

sudo npm install -g pm2

# Start your application
pm2 start npm --name "react-app" -- start

# Ensure app starts on server reboot
pm2 startup
pm2 save

Advanced Deployment Tips

  1. Use environment variables for configuration
  2. Implement proper error logging
  3. Set up automated deployment scripts
  4. Configure firewall rules
  5. Regular server and dependency updates

Common Troubleshooting

  • Check Nginx logs: sudo tail -f /var/log/nginx/error.log
  • Verify PM2 processes: pm2 list
  • SSL certificate renewal: sudo certbot renew

Conclusion

Congratulations! You've successfully deployed your React JS project on an Ubuntu server with robust configuration, secure SSL, and efficient process management.

Bonus: Continuous Deployment

Consider implementing GitHub Actions or GitLab CI/CD for automated deployments, further streamlining your workflow.

Happy Deploying! 🚀

Note: Always adapt these commands to your specific project structure and requirements.