Deploying to Production

Now that you have completed your first React application, it is time to learn how to deploy it to the world. For this purpose, we will use the cloud service called DigitalOcean.

In this chapter, you will learn how to deploy your React application using Node.js and nginx on an Ubuntu server from DigitalOcean. In a nutshell, we will cover the following topics:

• Creating a DigitalOcean Droplet and configuring it
• Configuring nginx, PM2, and a domain
• Implementing CircleCI for continuous integration

Technical requirements

To complete this chapter, you will need the following:

• Node.js 19+
• Visual Studio Code

Creating our first DigitalOcean Droplet

I have used DigitalOcean for the last seven years, and I can say that it is one of the best cloud services I have tried, not just because of the affordable costs but also because it is super easy and fast to configure, and the community has a lot of updated documentation to fix most of the common issues related to server configuration.

At this point, you will need to invest some money to get this service. I will show you the cheapest way to do this, and if in the future you want to increase the power of your Droplets, you will be able to increase the capacity without redoing the configuration.

The lowest price for a very basic Droplet is $6.00 per month ($0.009 per hour).

We are going to use Ubuntu 20.04 (but feel free to use the latest version, 21.04); you will need to know some basic Linux commands to be able to configure your Droplet. If you’re a beginner using Linux, don’t worry—I’ll try to show...

Configuring nginx, PM2, and a domain

Our Droplet is ready to be used for production, but as you can see, we are still using port 3000. We need to configure nginx and implement a proxy to redirect the traffic from port 80 to 3000; this means we won’t need to specify the port directly anymore.

Node PM2 will help us run the Node server in production securely. Generally, if we run Node directly with the node or babel-node commands, and there is an error in the app, then it will crash and will stop working. PM2 restarts the node server if an error occurs.

First, in your Droplet, you need to install PM2 globally:

npm install -g pm2

PM2 will help us to run our React app in a very easy way.

Installing and configuring nginx

To install nginx, you need to execute the following command:

sudo apt-get update 
sudo apt-get install nginx

After you have installed nginx, you can start the configuration:

1. We need to adjust the firewall to allow the...

Implementing CircleCI for continuous integration

I’ve been using CircleCI for a while, and I can tell you that it is one of the best CI solutions: it is free for personal use, giving you unlimited repositories and users; you have 1,000 build minutes per month, one container, and one concurrent job; if you need more, you can upgrade the plan with an initial price of $50 per month.

The first thing you need to do is sign up on the site using your GitHub account (or Bitbucket, if you prefer).

If you choose to use GitHub, you need to authorize CircleCI in your account, as shown in the following screenshot:

Figure 17.31: Authorize CircleCI

In the next section, we are going to add our SSH key to CircleCI.

Adding an SSH key to CircleCI

Now that you have created your account, CircleCI needs a way to log in to your DigitalOcean Droplet to run the deploy script. Follow these steps to complete this task:

1. Create a new SSH key inside your Droplet...

Summary

Congratulations! We’ve reached the end of our journey through the deployment process, and you now have the knowledge and skills needed to deploy your React application to the world (production). You’ve also learned how to implement CircleCI for continuous integration, streamlining your development process and ensuring that your application remains performant and reliable.

By leveraging the strategies and best practices outlined in this chapter, you can confidently launch your application to a global audience, secure in the knowledge that it has been optimized for speed, scalability, and resilience. Thank you for joining me on this journey. I hope you’ve enjoyed reading my book.