# 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](https://blog.remin.in/hosting-mern-app-on-server-ubuntu-2204-2023)

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.

```markdown
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

```markdown
sudo npm install pm2 -g
```

To run the React app from the build

```markdown
 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](https://blog.remin.in/hosting-mern-app-on-server-ubuntu-2204-2023)