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:
Step 2: Allow UFW Apache2
Ensure that the firewall allows Apache2 traffic by running:
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):
Sample Nest App Configuration (nest-app.conf):
Step 4: Enable Both the Sites
Enable the sites by creating symbolic links in the /etc/apache2/sites-enabled directory:
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:
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 buildto generate the production build.
- As I already set the path to the build folder in Apache2 configuration file.
- Additionally,
.htaccessfile 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):
- Save this file as
.htaccessin the root directory of your React application. This configuration instructs Apache to rewrite requests that do not match an existing file or directory toindex.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 buildbasic command to build my nest app. - Install PM2 to manage the Node.js process:
- Start the Nest app using PM2 and specify a name:
- Save the process list to ensure persistence across reboots:
- Monitor the logs for debugging purposes:
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
Top comments (0)