From Code to Cloud: Effortless Deployment of React Applications On Ubuntu With Nginx

by

Introduction:

In this tutorial, we will guide you through the process of Effortless Deployment of React Applications on an Ubuntu 22.04 server using Nginx as the web server. By the end of this tutorial, you will have your React application up and running on your Ubuntu server, accessible to users over the internet.

Prerequisites:

Before we begin, make sure you have the following prerequisites in place:

  1. An Ubuntu 22.04 server with a non-root user with sudo privileges.
  2. Node.js and npm (Node Package Manager) are installed on your server.
  3. A React application ready for deployment. If you don’t have one, you can create a basic React application using the Create React App tool.

Discover the seamless process of deploying React applications for enhanced user experiences and optimal performance. We are going to follow step by step procedure.

Step 1: Install Nginx

The first step is to install Nginx on your Ubuntu server. Nginx will act as the web server that serves your React application.

  1. Log in to your Ubuntu server via SSH.
  2. Update the package lists by running the command: sudo apt update.
  3. Install Nginx by running: sudo apt install nginx.
  4. Start the Nginx service by running: sudo systemctl start nginx.
  5. Enable Nginx to start on boot with: sudo systemctl enable nginx.
  6. Check Nginx running status: sudo systemctl status nginx.
Step 2: Build the React Application

Next, we need to build our React application into a production-ready bundle.

  1. Move to the root directory of your React application.
  2. Install the required dependencies by running: npm install.
  3. Check the build script in package.json, if not found you can add it by
    “build”: “react-scripts build”
  4. Build the application by running: npm run build.
Step 3: Configure Nginx Now, we will configure Nginx to serve our React application.

1. Create a new Nginx configuration file for your application

sudo nano /etc/nginx/sites-available/example.com.conf

2. Copy all the below code and paste it to your new file, Save and exit the file (Ctrl + O, then Ctrl + X).

server {
  listen 80;
  server_name your_domain_or_server_ip;
  #server_name reactapp.developernoob.com;
  
  location / {
    root /path/to/your/react/application/build;
    #root /var/www/html/reactapp/build;
    
    index index.html;
    try_files $uri /index.html;
  }
}

Make sure to replace your_domain_or_server_ip with your actual domain name or server IP address, and /path/to/your/react/application/build with the absolute path to your React application’s build folder (generated in Step 2).

3. Enable the Server Blocks: Create symbolic links to enable the server blocks.

sudo ln -s /etc/nginx/sites-available//example.com.conf /etc/nginx/sites-enabled/

4. Ensure there are no syntax errors in the configuration files by using the below command

sudo nginx -t

5. Restart NGINX to apply the changes.

sudo service nginx restart
Step 4: Restart Nginx and Test the Deployment
  1. Open a web browser and enter your domain name or server IP address.
    • If everything is configured correctly, you should see your React application running.
    • If you encounter any issues, check the Nginx error logs for troubleshooting: sudo tail -f /var/log/nginx/error.log.
Deployment of React Applications On Ubuntu
Step 5: Automate Deployment (Optional)

To simplify the deployment process, you can automate it using a deployment script or a CI/CD (Continuous Integration/Continuous Deployment) tool like Jenkins or GitLab CI/CD.

You can learn more about CI/CD Here

Conclusion:

Congratulations! You have successfully deployed your React application on an Ubuntu 22.04 server using Nginx as the web server. You can now access your React application from any web browser. Feel free to explore further customization options and optimization based on your specific requirements. Happy coding!

If you’re looking to initiate the deployment of your next app, feel free to click on the provided link – Right Here

Leave a Comment