Deploy React App - Production Server

NOTE: This blog primarily focuses on Linux systems to host and deploy on servers.

In this blog

• How to create a build file

• How to deploy in production

If you don't know how to set up a production Linux server (AWS or Any other Debian Server) You can check my article Setup your server for production

After setup, your server should have Node.js, npm, pm2, and Nginx. With that being set we can start our deploying process

1. Setting up the React app

Why is creating a build important?

Creating a build file is crucial in the context of React (and web development in general) for several important reasons:

Creating a build file is important for React projects. Here's why:

Makes Things Fast: Build files are like streamlined versions of your code. They load quicker, which means your website loads faster for users.

Less Waiting: With a build file, there are fewer separate requests to the server. This reduces waiting time and makes your website snappier.

Keeps Things in Storage: Build files are more likely to be saved in a user's browser. This means when they come back to your site, things load up even quicker from their storage.

Smart Loading: Build files can be split, so only the parts needed are loaded. This helps your site start up faster.

Slimmed Down Code: Build files and remove extra stuff like spaces and long words. This makes files smaller and your site faster.

Works Everywhere: Build files can turn newer code into older code that works on more browsers. This way, your site is compatible with lots of devices.

Safe and Sound: By getting rid of certain extra things, build files make your site safer from bad guys.

Takes Care of Everything: Build processes and handle other stuff like images and fonts, making sure everything works perfectly on your website.

Here are some points worth noting: Optimization, Reduced Network Requests, Caching, Code Splitting, Minification, Compatibility, Security, Static Asset Management

In short, build files make your React site faster, smoother, and safer for people to use. They're like your site's supercharged version for the real world!

So how do we create a build?

Creating a build file is relatively easy, especially when you're using tools like Create-React-App or Vite to set up your React application. These tools streamline the process and generate optimized build files for you.

Assuming you already created a React application. We will directly jump to the building part.

npm run build

This will create an optimized build for your project.

The name of the build folder may vary from dist, build some other based on what you used to start your project. In my case, I used Vite to start my app.

Okay, I created a build file how do I make this live? Don't worry I got you

2. Running your React app from the build

For serving your React app we are using pm2 . if you are not installed pm2 you can do it using

sudo npm install pm2 -g

To run the React app from the build

 pm2 serve /path/to/build 8000 --name react-app --spa

Here 8000 is the port number. Replace /path/to/build with an actual path to build

3. Making it online!

We can use nginx to serve this online or available to the public for that you can refer to Setup your server for production