Getting Started with MongoDB Atlas, NodeJS, and Azure App Service

[denverbrittain]

How to easily deploy a MERN Stack application to Azure App Service

MongoDB Atlas and Azure are great friends! In fact, they became even better friends recently with the addition of the MongoDB Atlas Pas-as-You-Go Software as a Service (SaaS) subscription to the Azure Marketplace, allowing you to use your existing Azure credits to enjoy all the benefits of the MongoDB Atlas Developer Data Platform. So there is no better time to learn how you can take advantage of both of these.

In this article, we are going to see how you can deploy a MERN stack application to Azure Web Apps, part of Azure App Service, in a few simple steps. By the end of this, you will have your own version of the website that can be found here.

Table of Contents

• Prerequisites
• What’s the MERN Stack?
• Create the Azure App Service
• Configure our new Azure App Service
• Create database and collection
• Deploy to Azure App Service
• Summary

Prerequisites

There are a few things you will need in place in order to follow this article.

1. Atlas Account and database cluster.
1. You can follow the Getting Started with Atlas guide, to learn how to create a free Atlas account, create your first free-forever cluster and get your all-important Connection String to the database.
2. Azure Account
3. Have the mern-stack-azure-deployment-example forked to your own account.

Database Network Access

MongoDB Atlas comes with database level security out of the box. This includes not only the users who can connect but also where you can connect from. For this reason, you will need to configure network access rules for who or what can access your applications.

The most common connection technique is via IP address. If you wish to use this with Azure, you will need to allow access from anywhere inside Atlas as we cannot predict what your application IP addresses will be over time.

Atlas also supports the use of network peering and private connections using the major cloud providers. This includes Azure Private Link or Azure Virtual Private Connection (VPC) if you are using an M10 or above cluster.

What’s the MERN Stack?

Before we get started deploying our MERN Stack application to Azure, it’s good to cover what the MERN Stack is.

MERN stands for MongoDB, Express, React, Node, and is named after the technologies that make up the stack.

• MongoDB: a general-purpose document database
• Express: Node.js web framework
• React: a client-side JavaScript framework
• Node.js: the most widely used JavaScript web server

Create the Azure App Service

So we have the pieces in place we need, including a place to store data and an awesome MERN stack repo ready to go. Now we need to create our Azure App Service instance so we can take advantage of its deployment and hosting capabilities:

1. Inside the Azure Portal, in the search box at the top, search for App Services and select it.
2. Click Create to trigger the creation wizard.
3. Enter the following information:

• Subscription: Choose your preferred existing subscription.
  • Note: When you first create an account, you are given a free trial subscription with $150 free credits you can use
• Resource Group: Use an existing or click the Create new link underneath the box to create a new one.
• Name: Choose what you would like to call it. The name has to be unique as it is used to create a URL ending .azurewebsites.net but otherwise, the choice is yours.
• Publish: Code.
• Runtime stack: Node 18 LTS.
• OS: Linux.
• Region: Pick the one closest to you.
• Pricing Plans: F1 - this is the free version.

1. Once you are happy, select Review + create in the bottom left.
2. Click Create in the bottom left and await deployment.
3. Once created, it will allow you to navigate to your new app service so we can start configuring it.

Configuring our new App Service

Now that we have App Service set up, we need to add our connection string to our MongoDB Atlas cluster to app settings, so when deployed the application will be able to find the value and connect successfully.

1. From the left-side menu in the Azure Portal inside your newly created App Service, click Configuration under the Settings section.
2. We then need to add a new value in the Application Settings section. NOT the Connection String section, despite the name. Click the New application setting button under this section to add one.
3. Add the following values:

• Name: ATLAS_URI
• Value: Your Atlas connection string from the cluster you created earlier.

Deploy to Azure App Services

We have our application, we have our app service and we have our connection string stored. Now it is time to link to our GitHub repo to take advantage of CI/CD goodness in Azure App Services.

1. Inside your app service app, click Deployment Center on the left in the Deployment section.
2. In the Settings tab that opens by default, from Source, select GitHub.
3. Fill out the boxes under the GitHub section that appears to select the main branch of your fork of the MERN stack repo.
4. Under Workflow Option: Make sure Add a workflow is the selected option.
5. Click Save at the top.

This will trigger a GitHub Actions build. If you view this in GitHub, you will see it will fail because we need to make some changes to the YAML file it created to allow it to build and deploy successfully.

Configuring our GitHub Actions Workflow file

Now that we have connected GitHub Actions and App Services, there is a new folder in the GitHub repo called .github with a subfolder called workflows. This is where you will find the yaml files that App Services auto generated for us in the last section.

However, as mentioned, we need to adjust it slightly to work for us:

1. In the jobs section, there will be a sub section for the build job. Inside this we need to replace the whole steps section with the code found in this gist 
1. The reason it is in a Gist is because indentation is really crucial in YAML and this makes sure the layout stays as it should be to make your life easier.
2. As part of this, we have named our app mern-app so we need to make sure this matches in the deploy step. Further down in the jobs section of the yaml file, you will find the deploy section and its own steps subsection. In the first name step, you will see a bit where it says node-app. Change this to mern-app. This associates the build and deploy apps.

That’s it! All you need to do now is commit the changes to the file. This will trigger a run of the GitHub Action workflow.

Once it builds successfully, you can go ahead and visit your website.

To find the URL of your website, visit the project inside the Azure Portal and in the Overview section you will find the link.

You should now have a working NodeJS application that uses MongoDB Atlas that is deployed to Azure App Services.

Summary

You are now well on your way to success with Azure App Services, NodeJS and MongoDB Atlas!

In this article, we created an Azure App Service, added our connection string inside Azure and then linked it up to our existing MERN stack example repo in GitHub, before customizing the generated workflow file for our application. Super simple and shows what can be done with the power of the cloud and MongoDB’s Developer Data Platform!

Get started with Atlas on Azure today!