Deploy with Heroku and MongoDB Atlas

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.

Create a Database on MongoDB Atlas

First, you'll create a database for your application.

1. Navigate to the MongoDB Atlas dashboard. Click on the "Database" link in the left-hand sidebar. You'll see something like the following image:

   

2. To create a database for your application, click the "Browse 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:

   

3. 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:

   

4. Fill out the form with the name of your MongoDB database and a collection for that database. Leave the "Additional Preferences" field blank. 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.

5. 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.

Connect the Database to Heroku

In order for your Heroku application to use the MongoDB Atlas database, you'll need to do two things:

1. Set up an environment variable in your Heroku application to hold the database's connection string.

2. 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.

Set Up the Environment Variable in Heroku

First, you'll add the database's connection string to an environment variable in Heroku.

1. 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

2. 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.

3. 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:

   

4. 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.

5. 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:

   

6. When the connection modal dialog opens, you should see the options shown in the following image:

   

7. Because you want to connect our database to an application, select the first option, "Drivers," under the header "Connect your application." You'll then see something like the following image:

   

8. Here, all you need to do is copy the connection string listed in the third step. So go ahead and click the Copy button.

9. With the connection string copied, navigate back to your Heroku application settings and paste it into the Value form field.

10. We need to update the connection string to include our database name, username, and password. The URL connection string should look like the following code:

    mongodb+srv://<username>:<password>@cluster0.5k55w.mongodb.net/<dbname>?retryWrites=true&w=majority

11. By default, MongoDB Atlas will populate your database username and leave off the database name, as shown in the following code:

    mongodb+srv://twoser:<password>@cluster0.dfd4e4s.mongodb.net/?retryWrites=true&w=majority

12. Update the string so your password is correct and make sure to add the database name where <dbname> is indicated above, as shown in the following code:

    mongodb+srv://twoser:password1234@cluster0.5k55w.mongodb.net/firstdb?retryWrites=true&w=majority

    Note: Make sure you're using the database user password, and not your MongoDB Atlas account password.

13. 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.

Update Application Code for MongoDB Connection

Lastly, you'll update the application's code to accommodate the MongoDB connection.

1. 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 using your database name:

   mongoose.connect(process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/your-database-name');

2. 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.

3. 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 main branch!
   git push heroku main

4. If everything worked correctly, use heroku open to open your app in the browser and see your work! If something isn't working, run heroku logs from the command line to see where there may be issues.

Happy coding!

This page was updated 4 months ago
© 2022 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.

Category: MongoDB

Tagged under: mongodb, mongodb atlas, deployment, heroku, guide,