Web Development
Linux Server Setup from Scratch: Deploying React.js, Express.js, and MySQL

Linux Server Setup from Scratch: Deploying React.js, Express.js, and MySQL

Bipin Yadav's photo
Bipin Yadav
·

6 min read

Table of contents

How to Deploy a Full-Stack Application: React.js, Express.js, and MySQL on a Linux Server

Deploying a full-stack application can be a bit overwhelming at first, but once you break it down into manageable steps, the process becomes much easier. In this guide, I’ll walk you through how to deploy a React.js frontend, an Express.js backend, and a MySQL database on a Linux server. Whether you’re a beginner or just looking for a refresher, this step-by-step tutorial will get your app up and running on your own server.

Let’s get started!

Step 1: SSH into Your Server

Before starting with the deployment process, you need to connect to your Linux server via SSH. If you haven't already, use the following command to log into your server:

ssh username@your-server-ip

Make sure to replace username with your server's username and your-server-ip with the actual IP address of your server.

Setting Up the React.js Frontend

Before diving into backend and database configurations, let’s start with the React.js frontend. In this tutorial, we’ll be using Nginx as our web server to serve the React build.

Step 1: Install Node.js and npm

To get started, we need Node.js and npm installed on our server, as they’re required to run React applications.

# Update package list
sudo apt update

# Install Node.js and npm
sudo apt install nodejs npm

Step 2: Clone Your React Project

Next, clone your React project from your version control system (like GitHub) to your server.

# Clone your React project
git clone [your-repo-url]
cd [your-project-name]

Step 3: Install Project Dependencies

Once you’ve cloned your project, move into the project directory and install the dependencies.

# Install project dependencies
npm install

Step 4: Build the Production Version of the App

To optimize the React app for production, run the following command to create a production build:

# Build the production version of your React app
npm run build

This will create a build directory that contains the optimized static files that can be served by a web server.

Step 5: Install Nginx

Now, let’s install Nginx, which will serve your React app on your Linux server.

# Install Nginx
sudo apt install nginx

Step 6: Configure Nginx for React

Edit the Nginx configuration file to serve your React app.

# Open Nginx configuration file
sudo vi /etc/nginx/sites-available/default

Inside the configuration file, add the following settings:

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/html/react-app;
    index index.html;

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

This tells Nginx to serve your app from the /var/www/html/react-app directory.

Step 7: Copy the Build Files to Nginx Directory

Now, copy your build files from the build folder to the Nginx directory:

# Copy the build files to Nginx's root directory
sudo cp -r build/* /var/www/html/react-app/

Step 8: Restart Nginx

Once the build files are in place, restart Nginx to apply the configuration changes.

# Restart Nginx
sudo systemctl restart nginx

Your React app should now be live and accessible via your domain!

Setting Up the MySQL Database

Step 1: Install MySQL

Now, let’s set up the MySQL database, which your Express app will connect to. Here’s how to install MySQL on Ubuntu:

# Update the package list
sudo apt update

# Install MySQL server
sudo apt install mysql-server

Step 2: Secure MySQL Installation

Run the MySQL security script to configure your database securely:

# Run MySQL secure installation
sudo mysql_secure_installation

Step 3: Create the Database

Log into MySQL and create the necessary database and user for your application:

# Log into MySQL as root
sudo mysql -u root -p

# Create a database
CREATE DATABASE yourdatabase;

# Create a user and grant privileges
CREATE USER 'youruser'@'localhost' IDENTIFIED BY 'yourpassword';
GRANT ALL PRIVILEGES ON yourdatabase.* TO 'youruser'@'localhost';

# Flush privileges
FLUSH PRIVILEGES;

# Exit MySQL
EXIT;

Step 4: Connect the Backend to MySQL

Now, modify your Express app to connect to the MySQL database using the credentials you just created in the .env file.

Setting Up the Express.js Backend

Now, let's focus on the Express.js backend. We’ll also use PM2, a process manager, to keep the Express app running in the background and restart it if the server crashes.

Step 1: Install Node.js and npm

Like the frontend, the backend also requires Node.js and npm to run.

# Update package list
sudo apt update

# Install Node.js and npm
sudo apt install nodejs npm

Step 2: Clone Your Express Project

Next, clone your Express project from your version control system.

# Clone your Express project
git clone [your-repo-url]
cd [your-project-name]

Step 3: Install Dependencies

Navigate to your project directory and install the required dependencies.

# Install project dependencies
npm install

Step 4: Set Up Environment Variables

For sensitive information like database credentials, we can use environment variables. Create a .env file in your project root and define your environment variables:

# Example .env file
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=yourpassword
DB_NAME=yourdatabase
PORT=5000

Make sure your Express app uses these variables for connecting to MySQL and configuring other settings.

Step 5: Set Up PM2 for Process Management

To ensure your Express app runs continuously, even if your server is restarted, we’ll use PM2, a powerful process manager.

# Install PM2 globally
sudo npm install pm2@latest -g

# Start the Express app with PM2
pm2 start app.js --name "express-backend"

# Save PM2 process list
pm2 save

# Set PM2 to auto-start on boot
pm2 startup

Step 6: Configure Nginx as a Reverse Proxy

Now that we have both the frontend and backend running, we need to configure Nginx to act as a reverse proxy, forwarding API requests to the backend.

Edit the Nginx configuration file:

# Open the Nginx default config
sudo vi /etc/nginx/sites-available/default

Add the following configuration inside the server block:

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

    # Serve React frontend
    location / {
        root /var/www/html/react-app;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # Proxy API requests to Express backend
    location /api {
        proxy_pass http://localhost:5000;  # Change the port if necessary
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

This configuration ensures that requests to /api will be forwarded to your Express backend, while React’s static files will be served at the root.

Step 7: Restart Nginx

After saving the configuration, restart Nginx to apply the changes:

# Restart Nginx
sudo systemctl restart nginx

Congratulations! You've successfully deployed a full-stack application using React.js, Express.js, and MySQL on a Linux server. This setup involves serving your React app with Nginx, running your Express app with PM2, and setting up MySQL for database storage.

References

ReactExpress.jsdeploymentJavaScriptLinuxserverMySQL