Accessing MongoDB URI from Heroku for MERN app

In this blog, I will share what is the best way to access the Mongo URI for a MERN app deployed on Heroku.

Mostly, people create a dotenv file or a key.js file to store their Mongo URI and then probably add it to gitignore. In my opinion, that’s not the best thing to do, here’s why. If in the future, you wish to make your code publicly available, let’s say on Github, then it could create a security vulnerability in your project and your password might be visible in the repository’s commit history.

So what you need to do here is to add the Mongo URI on Heroku as config variables and then access it using process.env in your MERN app. This will prevent any unauthorised access to your database. Now let’s see how to get that done.

I will discuss both, the Heroku CLI method as well as GUI method here.

Heroku CLI method

In order to use this method, first make sure you have installed the Heroku CLI in your app.

Now, your Mongo URI will be somewhat in this form:

mongoURI: 'mongodb+srv://DBUSERNAME:DBPASSWORD@cluster0-ajg9f.mongodb.net/Opportunist?retryWrites=true&w=majority'

All we have to do, is to create this same variable in our Heroku app. So first, navigate to your project folder on your command line and then login to your Heroku account.

heroku login

Then we create a new configure variable for our Heroku app and set its value to our Mongo URI string as follows:

heroku config:set MONGOLAB_URI='mongodb+srv://DBUSERNAME:DBPASSWORD@cluster0-ajg9f.mongodb.net/Opportunist?retryWrites=true&w=majority'

That’s it! The CLI part is now done. All you need to do now is access this variable from your app, which has been discussed in the section following the GUI method.

Heroku GUI method

Login to your Heroku account and click on your app in the dashboard. Go to settings. Scroll down and you will see Config Vars. Click on Reveal Config Vars. Here, put the KEY as MONGODB_URI and the VALUE as your Mongo URI string (no need to add quotes here). You can also keep the key as ‘mongoURI’, ‘mongodbURI’ or anything else, as long as it is according to the Config Var Policies of Heroku.

This is how your Config Vars should look like after adding the Mongo URI.

Accessing the URI from your app

After creating the config variable in your Heroku app, you can access it using process.env. Node.JS has a module called process. This module provides us with a property called env which hosts the environment variables that had been set up at the instant the process started.

So in your server.js file, where you must have established the MongoDB connection, create a variable which fetches the MongoURI :

const uri = process.env.MONGODB_URI;
// process.env.config_variable_name

Now, your Mongo URI string is stored in the variable uri, so you can now pass this to the mongoose.connect() function :

mongoose
.connect(uri, { useUnifiedTopology: true, useNewUrlParser: true })
.then(() => console.log('MongoDB connected!'))
.catch(err => console.log('Error:- ' + err));

And, we’re done! That’s all about accessing the Mongo URI from Heroku, now your credentials are safe and you can publicise your Github repo. Also, don’t forget to change your Mongo database password after implementing this, since the previous password might still be visible on the commit history.

Note:- If you are running your server locally, you might see something like this:

It says the ‘uri’ variable has got undefined instead of a string.

Not to worry here, it’s only because you are running your server locally, which makes the environment variable undefined. If you go to your deployed site, you will see that it is working fine.

Hope you found this helpful, if you still have any doubts or are stuck somewhere, feel free to reach out to me.