Shaik Ahmad Nawaz's Blog
Deploying a React Application with Nginx

Deploying a React Application with Nginx

Shaik Ahmad Nawaz's photo
Shaik Ahmad Nawaz
·

4 min read

Table of contents

Introduction

Deploying a React web application with Nginx as a reverse proxy server is a reliable and efficient approach. In this guide, we will explore how Nginx can enhance the deployment of your React application. We'll cover the installation of Nginx, configuring the server, and deploying your React app. Let's dive in!

Understanding Nginx

Nginx is a powerful open-source web server software known for its high performance, scalability, and robust features. It serves as a reverse proxy server, handling client requests and forwarding them to the appropriate backend server. Nginx is particularly well-suited for serving static files and improving the performance of your React application.

Setting up Nginx

Before deploying your React application, you need to install and configure Nginx on your server. Here are the steps:

Provision an environment: Set up an environment where you will deploy your React app. This can be an AWS EC2 instance, a virtual machine, or any other hosting provider that allows you to install software.

Install Nginx: Use the package manager of your server's operating system to install Nginx. For example, on Ubuntu, you can run:

sudo apt update
sudo apt install nginx

Verify Nginx installation: After installation, ensure that Nginx is running by accessing your server's IP address in a web browser. If Nginx is installed correctly, you should see the default Nginx welcome page.

You can also check nginx by using the below command:

sudo systemctl status nginx

Configuring Nginx for React Application

If you are cloning a React project from GitHub, you can follow these steps to deploy it with Nginx:

Step 1: Clone the React project

Clone the React project repository from GitHub onto your server using the git clone command. Open your terminal and navigate to the directory where you want to clone the project. Then run:

git clone <repository_url>

Replace <repository_url> with the URL of the GitHub repository.

Step 2: Install dependencies and build the project Navigate into the cloned project directory:

cd <project_directory>

Install the project dependencies using npm or yarn:

npm install

Once the dependencies are installed, build the project by running:

npm run build

This will generate an optimized production build in the build folder.

The below practice is the best approach according to nginx documentation:

Open the nginx.conf and do comment like below:

Create a new server configuration file:

Add the following configuration to the react-portfolio.conf file:

server {
    listen 80;
    server_name 65.2.29.39;

    root /home/ubuntu/react-portfolio/build;
    index index.html;

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

Replace your_domain.com with your actual domain name or server IP, and /home/ubuntu/react-portfolio/build with the absolute path to your React app's build folder.

Save the configuration file and exit the text editor.

Test the Nginx configuration to ensure there are no syntax errors:

sudo nginx -t

Finally, restart Nginx to apply the changes:

sudo service nginx restart

Verify the deployment:

Visit your domain name or server IP in a web browser, and you should see your React web application successfully deployed using Nginx.

Now you can access your React app by visiting your server's IP address in a web browser. For example, if your server's IP address is 65.2.29.39, you can access your app by entering http://65.2.29.39/ in the browser's address bar.

If you got permission denied error then you can refer this 👉 https://stackoverflow.com/questions/25774999/nginx-stat-failed-13-permission-denied

Note: Without a domain name, your app will only be accessible via the IP address, so you may consider obtaining a domain name if you want a more user-friendly URL.

That's it! You have successfully deployed your cloned React project with Nginx. Enjoy using Nginx to serve your React application efficiently.

Conclusion

Deploying a React application with Nginx offers improved performance and scalability. Nginx's reverse proxy capabilities and efficient handling of static files make it an excellent choice for serving React applications. By following the steps outlined in this guide, you can successfully deploy your React app using Nginx. Enjoy the benefits of a fast and reliable web server for your React application!

If you have any questions or need further assistance, feel free to leave a comment below. Happy coding!

Nginx documentation: https://nginx.org/en/docs/?_ga=2.148869746.453070200.1684412743-1722295106.1683266947

And don't forget to connect with us on social media to stay updated with the latest tips, tutorials, and guides:

We also encourage you to check out our GitHub repository for more code samples and projects:

nginxReactWeMakeDevsDevopsAWS