Mastering Full-Stack Deployment: A Guide to Hosting React and Nest Apps on Linux (Ubuntu 20) Server in 2024
Tags: fullstackdev, hosting, react, nestjs
Published: 2024-02-23 15:26:12

In the dynamic landscape of web development, deploying a full-stack application with separate frontend and backend components is a common scenario. As we step into 2024, the need for efficient deployment strategies remains paramount. In this blog post, we will explore the process of deploying React and Nest apps together on a Linux (Ubuntu 20) server. By following these steps, you can seamlessly host your frontend and backend applications, ensuring smooth operation and enhanced performance.

> Note: As of writing this blog, I am using Node.js version 18. Please ensure compatibility with your environment or adjust accordingly. Additionally, while Node.js version 21 has been launched, it’s essential to verify compatibility and consider upgrading for optimal performance and security.

## Step 1: Install Apache2
Apache2 serves as the web server for hosting our applications. Install it using the following command:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/baqgqudf6kk4wu88j4xh.png)

## Step 2: Allow UFW Apache2
Ensure that the firewall allows Apache2 traffic by running:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhvxflhprdgllxfxogvg.png)

## Step 3: Create and Configure sites-available Conf File
Navigate to the `/etc/apache2/sites-available` directory and create configuration files for both the React and Nest apps. Configure the VirtualHost settings accordingly.

Sample React App Configuration (`react-app.conf`):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66lbdlf6xb371mpw0cxe.png)

Sample Nest App Configuration (`nest-app.conf`):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65lqtjyni9dmcdb1epjr.png)

## Step 4: Enable Both the Sites
Enable the sites by creating symbolic links in the `/etc/apache2/sites-enabled` directory:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b19oapmz6znp2yqhi92z.png)

Do not forget to restart Apache2 Services via `service apache2 restart` command on terminal.

## Step 5: Install Node.js and npm
Node.js and npm are essential for building and running our applications. Install them using:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8lh7infjpgpbyx5e1mv.png)

## Step 6: Build React App
- Clone the React app at `/var/www/your-react-app/` from Git and navigate into its directory.
- Run `npm run build` to generate the production build.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kefnmzzs45ncjzhv2tlz.png)

- As I already set the path to the build folder in Apache2 configuration file.
- Additionally, `.htaccess` file that you can use to configure Apache to handle routing for a React application, ensuring that requests to inner pages are correctly routed to your React app's entry point (`index.html`):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrzju3j39hvchi64jocs.png)

- Save this file as `.htaccess` in the root directory of your React application. This configuration instructs Apache to rewrite requests that do not match an existing file or directory to `index.html`, allowing React Router to handle the routing internally.

> With this .htaccess file and Apache configuration, your React application should handle internal routing correctly, allowing users to access inner pages directly or refresh them without encountering 404 errors.

## Step 7: Build Nest App
- Clone the Nest app at `/var/www/your-nest-app/` from Git and navigate into its directory.
- Run the build command as specified in your project’s configuration. Here I am using `nest build` basic command to build my nest app.
- Install PM2 to manage the Node.js process:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt3wjd7nmuhqom9lrgt3.png)

- Start the Nest app using PM2 and specify a name:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ajxd2uwn19gh6oq3s3k.png)

- Save the process list to ensure persistence across reboots:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/louc82ejz06kv1i257fp.png)

- Monitor the logs for debugging purposes:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rp2cjcwuo437819n1y1.png)

> Step 8: Use sudo if You are not an Admin
> When executing commands that require administrative privileges, prepend them with sudo.

## Step 9: Install SSL Certificate
Securing your applications with SSL certificates is crucial for data privacy and security. Install SSL certificates using Let’s Encrypt or any other trusted certificate authority.

## Conclusion
Deploying React and Nest apps together on a Linux server provides a robust foundation for building modern web applications. By following the outlined steps, you can effectively host both frontend and backend components, ensuring scalability, reliability, and enhanced user experience. Embrace the power of full-stack development and elevate your projects to new heights in 2024 and beyond.

> Don’t forget to follow me on social media platforms for more insightful content.
> https://www.linkedin.com/in/compilerharris/
> https://github.com/compilerharris
> https://medium.com/@compilerharris