This guide walks you through the steps required to deploy your application to Heroku with a MongoDB database using MongoDB Atlas.
If you don't yet have a MongoDB Atlas account, please see Set Up MongoDB Atlas before you proceed.
First, you'll create a database for your application.
-
Navigate to the MongoDB Atlas dashboard. You'll see something like the following image:
-
To create a database for your application, click the Collections button in your sandbox Clusters box. If you haven't previously created a database, you'll be taken to a page that looks like the following image:
-
From this page, select the "Add My Own Data" button. If you previously created a database through MongoDB Atlas and need to create another one for this app, click the "+ Create Database" button in the left column of the window pane instead. Either way, the resulting modal should look like the following image:
-
Fill out the form with the name of your MongoDB database and a collection for that database. You only need to create one collection to get started, as your application will create them upon deploy, so don't worry if you think your database will scale up or down in the future.
-
When you're done creating your database and initial collection, the dashboard should display them, as shown in the following image:
Great! Your database has been created. Let's move on to connect it to your application in production.
In order for your Heroku application to use the MongoDB Atlas database, you'll need to do two things:
-
Set up an environment variable in your Heroku application to hold the database's connection string.
-
Make sure your application's code is set up to look for that Heroku environment variable and, if it's not found, connect to a local database instead. This is important because that environment variable will only exist in production with Heroku.
First, you'll add the database's connection string to an environment variable in Heroku.
-
To get started, make sure you've created a Heroku app for your project. To create the app, navigate to your application's directory from the command line and type the following command:
heroku create
-
Once you receive confirmation that Heroku successfully created the name space for your application, navigate to that application in your Heroku account through the browser. To do that, go to the Heroku website, log in, and select the application from the list of applications in your account dashboard.
-
From your Heroku application, navigate to the Settings tab on the right side of the application's menu. The page should look like the following image:
-
On this page, you'll see a section called "Config Vars" with a form to enter key/value pairs. This will be where we add our product database's information. For now, type
MONGODB_URI
in the KEY field. For the VALUE, we'll fetch the database connection string from MongoDB Atlas in the next step. -
Open your MongoDB Atlas dashboard in another browser tab so you don't leave the Heroku page. Once there, locate the Connect button in your cluster's information and click it. If you're having trouble finding it, refer to the following image:
-
When the connection modal dialog opens, you should see the three options shown in the following image:
-
Because you want to connect our database to an application, select the second option, "Connect your application". You'll then see something like the following image:
-
Here, all you need to do is copy the connection string listed in the second step. So go ahead and click the Copy button.
-
With the connection string copied, navigate back to your Heroku application settings and paste it into the Value form field.
-
We need to update the connection string to include our database name, username, and password. Right now it probably looks like the following code:
mongodb+srv://<username>:<password>@cluster0.5k55w.mongodb.net/<dbname>?retryWrites=true&w=majority
-
Change it so your username, password, and database name are correct, as shown in this example:
mongodb+srv://lernantino-user:[email protected]/deep-thoughts?retryWrites=true&w=majority
-
Once your connection string contains the correct information, click the Add button save it. The resulting screen should look something like the following image:
Great! Now that you have this all set up, the last thing you need to do is update your application code.
Next and last, you'll update the application's code to accommodate the MongoDB connection.
-
In VS Code, navigate to your application and locate where you connect to your database. Once you find it, update it so it looks like the following code:
mongoose.connect( process.env.MONGODB_URI || 'mongodb://localhost/deep-thoughts', { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false } );
-
With this code in place, the
mongoose.connect()
command will attempt to use the environment variable first. If it's running on Heroku, it will find that variable and use it. If it's running locally on your machine, it won't find that variable and will fall back to use your local database connection instead. -
Save your code and use the following Git commands to add, commit, and push it to Heroku:
git add -A git commit -m 'deploying' # make sure you're pushing from your local master branch! git push heroku master
-
If everything worked correctly, use
heroku open
to open your app in the browser and see your work! If something isn't working, runheroku logs
from the command line to see where there may be issues.
Happy coding!