Table of Contents
Create a Database on MongoDB Atlas..................................................1
Project Setup.........................................................................................4
Create a Render App............................................................................6
Seeding Your Deployed Database........................................................14
Project Setup.......................................................................................18
Create a Heroku App..........................................................................19
Deploy to Heroku 🚀.............................................................................19
Troubleshooting..................................................................................20
Subscribing to Eco Dynos...................................................................20
Spinning Down Applications Deployed on Heroku.............................22
1
Module 28 : Deployment on Render /
Heroku
This guide walks you through the steps required to deploy your MERN stack application to
Render 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:
2
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
3
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.
Project Setup
You've likely already deployed a front-end application to a platform like GitHub Pages. But
to deploy an application with a back end, you'll need a platform like Render that can handle
the additional configuration—so that your app can accept incoming connections from the
internet.
To start, make sure that your project is initialized as a Git repository. You can check this by
running the following command at the root of your project:
git status
If you encounter an error, that means that your project isn't yet a Git repository. You can
initialize the repository by running the following command:
git init
Applications that feature an [Link] back end can use Render's PORT environment
variable. To set this up, create a port variable with a value of [Link]. You can
4
also add a default value for local instances of your server by using the || syntax, as shown in
the following example:
const port = [Link] || 3001
Render allows you to deploy directly from a GitHub repository, so make sure you have
committed and pushed your changes to your GitHub:
git add -A
git commit -m "<descriptive message here>"
git push
Update the install script and add a render-build script to your [Link] similar to the
following example:
"name": "googlebooks-app",
"version": "1.0.0",
"description": "",
"main": "server/[Link]",
"scripts": {
"start": "node server/[Link]",
"develop": "concurrently \"cd server && npm run watch\" \"cd client && npm run dev\"",
"install": "cd server && npm i && cd ../client && npm i --production=false",
"build": "cd client && npm run build",
"render-build":"npm install && npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"concurrently": "^8.2.0"
5
Now that we've created the repository, configured the server, and pushed to GitHub, we can
create an app on Render and link it to our existing GitHub repository.
Create a Render App
The Render dashboard allows us to easily create an app and link an existing GitHub
repository to it to deploy.
Create a new Render app by clicking the "New" button on the right side of the navbar, as
shown in the following image:
Select "Web Service" from the dropdown menu, as shown in the following image:
6
Make sure "Build and deploy from Git repository" is selected, then click "Next," as shown in
the following image:
If this is your first time deploying to Render, you will need to allow access to your GitHub
repositories. Click on the "+ Connect account" link under the GitHub heading, as shown in
the following image:
7
Next, install Render to your GitHub account, providing access to all of your repositories, as
shown in the following image:
Click the blue "Connect" button next to the repo you want to deploy. You can use the search
box to filter out the repo you want, as shown in the following image:
8
Give your new Render app a unique name, as shown in the following image. It does not have
to match the repo name, but it is useful to do so to keep track of which app is attached to
which repo:
Render needs to know which steps need to be taken to get your app up and running. In the
case of a MERN stack app, we need to run npm install to install all required dependencies
and npm build to build compile the front-end of our application. We created a custom
script, render-build, that will perform both of these tasks. Scroll to the section "Build
Command" and update the field to npm run render-build. Render also needs to know which
command to run to start your application. The "Start Command" field will be automatically
9
populated with the start script from your [Link]. Confirm that the "Start Command" is
correct, as shown in the following image:
Make sure you leave the free tier selected, as shown in the following image:
Next, click the "Create Web Service" button, as shown in the following image:
10
The next page will log all the actions being taken to set up your server. Once your server goes
live, you can use the provided link toward the top of the page to view your live site, as shown
in the following image:
Clicking the "Environment" link takes you to a page where you can set your environment
variables, as shown in the following image:
11
Open your MongoDB Atlas dashboard in another browser tab so you don't leave the Render
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 options shown in the following
image:
12
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:
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 Render application settings.
13
Click the "Add Environment Variable" button, add a key named MONGODB_URI and paste
the value of the connection string.
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>@[Link]/<dbname>?
retryWrites=true&w=majority
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>@[Link]/?
retryWrites=true&w=majority
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@[Link]/firstdb?
retryWrites=true&w=majority
Note Make sure you're using the database user password, and not your MongoDB Atlas
account password.
Click the "Save Changes" button to apply the changes, as shown in the following image:
Finally, you can click the "Logs" link and use the provided link toward the top of the page to
view your live site, as shown in the following image:
14
Seeding Your Deployed Database
In order to seed your deployed Render application. We will need to run our seed script to our
Atlas database. Typically, our hosting solution would allow us to run a shell command to
complete this process, but the Render free tier does not allow for shell access, so we will need
a workaround.
Navigate to your Render environment variables and copy the Mongo Atlas connection string,
as shown in the following image:
15
In the root level of your application, create a .env file and add the key
of MONGODB_URI with the value of your Atlas database string, as shown in the following
image. (Note that placeholders are used in this screenshot for database user, password, and
name):
Change directory into the server folder of your application and install the dotenv package:
cd server
16
npm install dotenv
We need to enable environment variables to allow us to connect to our deployed database. As
the following line the top of the server/config/[Link] file:
require("dotenv").config();
Change directory back to the root level of your application:
cd ..
Update the [Link] file at the root of your repository so that the seed script directly runs
the seed file (this is to ensure the environment variables are processed correctly), as shown in
the following example:
"seed": "node server/config/[Link]",
Run the npm run seed command from the root level of your application, as shown in the
following image:
To confirm the data was successfully seeded, click on the "Browse Collections" button on
your Mongo Atlas Dashboard. You should see some seeded data in your database, like the
following image:
17
Finally, be sure to are only connecting to your Mongo Atlas database when necessary,
comment out the MONGODB_URI in your .env file:
This guide reviews the steps to deploy an application to Heroku using the Heroku CLI.
18
If you don't have a Heroku account, or if you have yet to install the Heroku CLI, see How to
Install the Heroku CLI before you proceed.
Project Setup
You've likely already deployed a front-end application to a platform like GitHub Pages. But
to deploy an application with a back end, you'll need a platform like Heroku that can handle
the additional configuration—so that your app can accept incoming connections from the
internet.
To start, make sure that your project is initialized as a Git repository. You can check this by
running the following command at the root of your project:
git status
If you encounter an error, that means that your project isn't yet a Git repository. You can
initialize the repository by running the following command:
git init
Applications that feature an [Link] back end can use Heroku's PORT environment
variable. To set this up, create a port variable with a value of [Link]. You can
also add a default value for local instances of your server by using the || syntax, as show in
the following example:
const port = [Link] || 3001
Now that we've created the repository and configured the server, we can create an app on
Heroku without even opening the browser.
Create a Heroku App
The Heroku CLI is a helpful utility for creating and managing your remotely hosted web
applications. You can use it to easily create a Heroku app once you've configured the
repository that you want to deploy.
Create a new Heroku app by running the following command in the root of your project:
heroku create
Note The Heroku CLI will randomly generate an app name, but you can specify a name using
the syntax heroku create <app name>.
Once you've created the app, you can run git remote -v to verify that the Heroku remote URL
was added by the Heroku CLI—as shown in the following example:
git remote -v
19
heroku [Link] (fetch)
heroku [Link] (push)
The remote URL gets added automatically to your Git repository without requiring any extra
commands—pretty neat! Now you can prepare for deployment.
Deploy to Heroku 🚀
Okay, it's time to actually deploy your application! Deployment allows other developers to
give you more detailed feedback, and it allows you to show off the latest features in your app.
First you'll want to add and commit all your project files, then push to Heroku, as follows:
git add -A
git commit -m "Pushing to Heroku"
git push heroku main
Confirm that the application was deployed successfully by visiting the application URL
provided in the terminal. Sometimes the output will say that the build was successful, but you
should still open your application in the browser to verify, as shown in the following
example:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 33.8M
remote: -----> Launching...
remote: Released v9
remote: [Link] deployed to Heroku
Note You can also run heroku open to automatically open the webpage.
Troubleshooting
Sometimes errors in your application won't be readily apparent from the terminal. In this
case, you can view the Heroku logs by running the following command:
heroku logs --tail
20
Note Exit the log output by pressing Ctrl+C.
You can use the following command to access the command line for the remote container
running your application:
heroku run bash
Congratulations on deploying your first app with a server to Heroku! The link will be
accessible as long as your app exists on Heroku. That said, Heroku spins up a new container
to run your app after an extended period of inactivity, so be patient if it takes longer than
usual to load.
If you encounter issues, remember that deployment rarely occurs without a hitch.
Deciphering errors and reading documentation are key parts of the deployment process.
Subscribing to Eco Dynos
Note: If you subscribed to the Eco Dynos subscription plan upon account setup, the following
steps are not required.
Via your application's Resources page, you can set your Dynos options per application. Begin
on your Heroku Dashboard, and select the desired application.
By default, you'll be taken to the deployed application's "Overview" tab. Click on the
"Resources" tab to be taken to the resources section of your application, as shown in the
following image:
21
From this view, you should be able to select the "Subscribe to Eco" option.
This plan will provide you with 1,000 dyno hours for $5 per month, which should keep you
well within your GitHub Student Developer Pack $13 credit amount. Additionally, these
dynos will automatically spin down when idle.
Spinning Down Applications Deployed on Heroku
Note: If you are using a Heroku Eco Dynos subscription plan, the following steps are
optional. With this subscription model, your applications will automatically spin down after
1,000 hours.
To spin down an application deployed on Heroku, it's as simple as navigating to the Heroku
dashboard and clicking the application you wish to spin down:
22
By default you'll be taken to the deployed application's "Overview" tab. Click on the
"Resources" tab to be taken to the resources section of your application, as shown in the
following image:
To spin down the deployed application, look under the "Hobby Dynos" section. Then, click
the button with the pencil icon, click the toggle so that it is set to the left, and click the
"Confirm" button, as shown in the following image:
23
Now your application is spun down and you won't incur any additional charges for this
application.
24