How to deploy a MERN stack application in VPS with ubuntu

Deploying a MERN stack application to a VPS is an essential step for developers aiming to move their projects from local development to a live, production-ready environment. The MERN stack, which combines MongoDB, Express, React, and Node.js, offers a powerful full-stack framework for building modern web applications. This guide walks you through the process of setting up your VPS, configuring your database, and deploying your application to ensure it runs smoothly and securely in a real-world setting.

We will guide you on how to install each one in this guide

How to Install Node.js on Ubuntu

Node.js is a powerful, open-source JavaScript runtime built on Chrome's V8 engine, widely used for building scalable network applications. It’s lightweight, efficient, and highly versatile, making it a favorite among developers. This guide will walk you through installing Node.js on an Ubuntu server.

Before starting any installation, it's a good practice to update your system’s package index to ensure you are working with the latest package versions.

This command updates the list of available packages and their versions and then upgrades any out-of-date packages on your system.

Ubuntu's default repository often contains Node.js. To check for the version available in the repository, use the following command:

After installation, verify the version by running:

However, the version in the default repositories may not always be the latest one. If you need the latest version, consider using NodeSource

If you want to install a specific or the latest version of Node.js, you can use the NodeSource repository. First, install the NodeSource PPA:

The above command adds the NodeSource repository for the LTS (Long-Term Support) version of Node.js. . For a specific version like by replacing the version like this:

You can also install the latest version (instead of LTS) by running the command:

Once the repository is added, install Node.js:

If npm is not installed, you can install it with the command:

You can run the commands below to remove nodejs from the system, this is useful if the package you installed had issues, or you want to install another version:

You’ve now installed Node.js on your Ubuntu server. Whether you used the default repository, NodeSource,your environment is now set up to start developing with Node.js

How to Install MongoDB on Ubuntu

MongoDB is a popular NoSQL database known for its flexibility and scalability, making it a top choice for modern applications. This guide will walk you through the installation of MongoDB on an Ubuntu server.

Before installing any software, update the package index to ensure your system is working with the latest packages.

For the community edition you can follow the steps below, but please keep in mind that the versions may change over time, so it is better to check the official documentation, you can see them here

1- Import the Public Key

To import the MongoDB public GPG key, run the following command:

2- Create the List File

3- Reload the Package Database

4- Install MongoDB Community Server

Now that MongoDB is installed, you need to start the MongoDB service and ensure it starts automatically on boot.

Enable MongoDB to start on boot:

Check the status of MongoDB to ensure it is running:

Step 4: Verify MongoDB Installation

You can verify that MongoDB is working correctly by connecting to the database and running some basic commands.

Start the MongoDB shell:

You’ve successfully installed and configured MongoDB on your Ubuntu server. Whether you’re using it for development or production, MongoDB’s flexibility and scalability make it a powerful choice for your data storage needs. If you're planning to deploy it on production, don’t forget to secure your database with authentication and limit access to trusted IPs.

How to Install and Initiate a React Project on Ubuntu

React is a popular JavaScript library for building user interfaces, particularly single-page applications (SPAs). It's known for its efficiency, flexibility, and robust ecosystem. In this guide, you'll learn how to install React and create a new React project on an Ubuntu system.

create-react-app is an officially supported command-line tool that helps you create a new React.js project with a pre-configured build setup.

This installs create-react-app globally, allowing you to use the command anywhere on your system.

Now that create-react-app is installed, you can initiate a new React project by running the following command:

Replace my-react-app with the name you want for your project. The command will generate all the necessary files and install the required dependencies. This may take a few minutes, depending on your internet speed and system.

Once the project has been created, navigate to your project directory:

Now that you're in your project folder, you can start the development server by running:

This will start the local development server and automatically open your default web browser, displaying the React app. The app will be accessible at:

Whenever you make changes to your React components, the app will automatically reload to reflect the changes, providing a smooth development experience.

Now you can start building the React application by editing the files with your code editor like VScode for example

Once you've finished developing your React app and want to prepare it for production, you can build the application by running:

This will create a production-ready version of your React application in the build/ folder. You can then deploy the files from the build/ directory to a web server.

Congratulations! You've successfully installed React and created a new React project on your Ubuntu system. You now have a fully functional development environment for building React applications. From here, you can start building your React components, routing, and state management to create interactive user interfaces.

How to Deploy an Express Server in a MERN Stack Project

Deploying a backend server using Express.js in a MERN (MongoDB, Express, React, Node.js) stack is a key part of getting your full-stack application online. In this guide, we’ll walk through the steps to deploy an Express server, assuming you have an existing MERN stack project.

First, we need to create the directory where we want our ExpressJS server to run, you can use the commands below to create the folder and access it:

Use the npm init command to create a package.json file for your application. For more information on how package.json works,

This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit Enter to accept the defaults for most of them:

Now, install Express in the myapp directory and save it in the dependencies list. For example:

You’ve successfully deployed your Express server on an Ubuntu server, You can now connect your React frontend to the Express backend, ensuring seamless communication between them.

deploying a MERN stack project involves several key steps, from setting up your server and database to configuring your environment for optimal performance. By properly installing MongoDB, Express, React, and Node.js on your VPS, and ensuring your application is secured and optimized, you can smoothly transition from development to production. With everything set up, your MERN stack application is ready to serve real users, providing a dynamic, full-stack web experience. This process not only makes your application accessible but also scalable and maintainable for future updates.