Deploy MERN web app using Heroku and mongoDB Atlas

Hello everyone,

This article is for developers who build a MERN web application and want to deploy it by Heroku(server) and using mongoDB atlas (DB). There is many reason why you want to upload your MERN project to Heroku and connect it to mongoDB atlas. In my personal case I was interviewing for a job as a full stack web developer, to test my skills as a web developer I was assign to build a MERN app. After finishing my MVP and pushing my project to GitHub I decided that I want to share what I build not just locally but also with my interviewer to do so I was looking for a way to upload my MERN app. After searching over the internet I found some YouTube videos how to upload your MERN project by using Heroku and connect to mongoDB atlas. The idea to write an article of this kind came to combine all the steps in one place. After all this preview Let’s Begin!!!

Here are the steps:

1. If you don’t have an account in Heroku you need to open one.
2. Create a new project.
3. Open your VS code and inside your terminal deploy your project to Heroku.
4. In Heroku inside your project open the settings tab.
5. Search for Reveal Config Vars, click on it.

6. Go back to your project and copy the MONGODB_URI and past it inside Heroku under the Config Vars. If you don’t know what is it MONGODB_URI you can ctrl+c the code below.

const mongoose = require(“mongoose”);
const MONGODB_URI =
 process.env.MONGODB_URI || “mongodb://localhost/localDBname”;mongoose .connect(MONGODB_URI,
 { useNewUrlParser: true, useUnifiedTopology: true, }) 
.then(() => console.log(“you are connected to mongodb”)) .catch((err) => console.log(err)); module.exports = mongoose;

7. Inside your server file ctrl+c your NODE_ENV and past it past inside Heroku under the Config Vars. If you don’t know what is it NODE_ENV you can ctrl+c the code below.

process.env.NODE_ENV === "production"

After this step we are done for now with Heroku, you supposed to have your project already deploy and all the config variables are stored in Herokuת next step is to create your mongoDB atlas.

8. Create an account in https://www.mongodb.com/cloud/atlas/register

9. Go to Database Access and create a new user

10. Go to Network Access and add IP address, for the IP you can use 0.0.0.0/0.

11. Create your cluster

12. Connect your cluster to your Heroku

Click on connect button

13. Choose second option — connect your application

14.Let’s go back to Heroku to Config Vars, near the MONGODB_URI ctrl +c and link from the the pervious section. Note :” Replace <password> with the password for the <username>user. Replace myFirstDatabase with the name of the database that connections will use by default. Ensure any option params are URL encoded.”

15. Go back to mongoDB atlas and click on cluster, and create your collection.

I hope you find this article useful, please leave some comments and enjoy ✌.