The MERN stack is a popular choice to build full-stack web applications using JavaScript. It pairs MongoDB, Express, React and Node.js to handle the database, backend and frontend layers of an application.
Building a MERN application locally is only the first step. If you need users to access it through a domain name, you must deploy the application on a server. If you choose VPS hosting, it gives a practical option because of control over the server environment. Also, VPS hosting lets you configure Node.js, Nginx, and other solutions to the application’s needs.
The guide briefs you on how to host a MERN on a VPS, from configuring the server to connecting the database, building the React frontend and domain configuration.
Understand How a MERN Application Works
Before deploying the application, it helps in understanding what each part of the MERN stack does.
The application data is stored in MongoDB. Express.js is used as a backend framework for API development, and Node.js is used to run the backend application and React.js for user interface and front-end interactivity.
A production setup may look something like this:
User> Domain> Nginx> React Frontend / Node.js Backend> MongoDB
MongoDB can be hosted on the same VPS, or on a separate managed service like MongoDB Atlas. You can shard the database to scale and accommodate your app growth
Selecting a VPS for Your MERN Application
Choose VPS hosting with sufficient CPU, RAM and storage for your application.
For a small MERN application, 4 GB RAM and 2 CPU cores is a good start. More resource hungry if MongoDB is running on the same VPS as the app.
Your requirements will depend on:
- Number of users
- API requests
- Database size
- Background processes
- Number of Node.js processes
- Application traffic
- File storage requirements
Do not choose the VPS based only on the number of visitors. Monitor actual CPU, RAM, and storage usage after deployment and scale when required.
Prepare the VPS
For this particular guide we will use an Ubuntu based VPS.
First, connect to the server via SSH and update the system:
sudo apt-get update && sudo apt-get upgrade -y
You also want to create a non-root user for daily server administration and create a secure SSH access.
Then make sure that your firewall only allows necessary services. Typically, you’ll need SSH for admin access and HTTP/HTTPS for web traffic.
A good first step in reducing security risks is to keep the server updated and limit unnecessary exposed services.
Install Back-End Requirements
Navigate into backend directory:
cd server
Now install the dependencies of the application:
npm install
It reads the file package.json and installs the packages that are needed by the Node.js application.
A typical Express application uses packages for routing, database connectivity, authentication, CORS and other functionality.
MongoDB’s MERN examples use Node.js with Express and the MongoDB driver connecting the backend to MongoDB.
Connect Your Application to MongoDB
Your Express backend needs to establish a connection to MongoDB.
If you are using MongoDB Atlas, create the database deployment and obtain its connection string. Then add that connection string to the environment configuration.
For example:
MONGODB_URI=mongodb+srv://username:password@cluster.example.mongodb.net/mydatabase?retryWrites=true&w=majority
Your application can then use the MongoDB Node.js driver or an Object Data Modelling (ODM) library like Mongoose to work with the database. MongoDB supports the Node.js driver and lists Mongoose as a JavaScript integration.
If you are running MongoDB on the same VPS you need to add some more configuration and security. A managed database can make database administration easier for many beginners.
Testing the Full MERN Application
When everything is in place, test the application in the browser for:
- The home page loads correctly
- React routes work
- Login and registration work
- The API requests go to Express
- MongoDB operations function
- Forms submit well
- Loads static files and images
- HTTPS works
- Invalid URLs behave correctly
The application remains available after restarting the VPS
You must also test the application from a different network or device rather than relying only on local browser testing.
Common Mistakes to Avoid
A major mistake is running the React development server in production. A production build served through Nginx is generally a better approach.
Another mistake is exposing the Node.js API port directly to the internet when Nginx acts as the public reverse proxy. Keeping the backend accessible through the internal server interface simplifies the network setup.
You need to avoid storing MongoDB credentials in frontend code or committing .env files containing secrets to public repositories.
Finally, do not skip backups. A working application is not enough if you have no reliable way to recover its data.
Conclusion
Hosting a MERN stack application on VPS includes more than uploading project files. You need to prepare the server, install Node.js, configure MongoDB, build the React frontend, run the Express backend, configure Nginx, connect your domain and enable HTTPS.
A common production architecture uses React as a frontend framework. Node.js and Express for the API, MongoDB for data storage, Nginx as the reverse proxy and PM2 keeping the Node.js application running.
Once the application is live, continue monitoring resource usage, application errors and database performance. You can scale the VPS as your user base grows to experience the upgraded performance of the hosting environment.
