How to set up Continuous Deployment for your MEAN stack application using Github Actions and Azure? — Part 1

This is part 1 of two part series on setting up Continuous deployment for your MEAN stack application using Github Actions and Microsoft Azure.

Prerequisites:
To follow along this series you need a better understanding of concepts like Angular 2+, NodeJS, Express framework.
You also need a Github account and Azure Portal access (don’t have one? you can always create a free account — here).

Note: I’m linking the github repositories of the projects used in this series. You can refer/fork and make use of it.
1. Angular application — Front end
2. Express application with mongo configuration

In this part we focus on the backend application. It is a RESTful web service written using express. It uses MongoDB for the database.

We are going to use the Azure App Service offering from Microsoft Azure for both front end and backend applications. Along with that we are using Azure Cosmos DB’s MongoDB API for data persistence.
Just to make things simple, Azure introduced a new service which has both App Service and Cosmos DB. You can find it in the Azure Portal. We are going to use that here.

In the Create Web App + Database page, fill out the form as follows.

1. Resource Group → Select Create new and use a name of abc-cars.
   (Creating new resource group allows you to easily refer all resources you created for this series. You can also delete the resource group as a clean up activity at the end of this series to save some cost)
2. Region → Any Azure region near you.
3. Name → abc-cars-backend-XYZ where XYZ is any three random characters. This name must be unique across Azure.
4. Runtime stack → Node 16 LTS.
5. Hosting plan → Basic. When you’re ready, you can scale up to a production pricing tier later.
6. Cosmos DB API for MongoDB is selected by default as the database engine. Azure Cosmos DB is a cloud native database offering a 100% MongoDB compatible API. Note the database name that’s generated for you (<app-name>-database). You’ll need it later.
7. Select Review + create.
8. After validation completes, select Create.

Next step is to expose DATABASE_NAME and DATABASE_URL as environment variables so that our express app can consume those values in run time (refer below snippet).

To achieve this, we have to create a new Application Setting in AppService. Here are the steps.

Step 1. In the App Service page, in the left menu, select Configuration.

Step 2. In the Application settings tab of the Configuration page, create a DATABASE_NAME setting:

1. Select New application setting.
2. In the Name field, enter DATABASE_NAME.
3. In the Value field, enter the automatically generated database name from the creation wizard.
4. Select OK.

Step 3.

1. Scroll to the bottom of the page and select the connection string MONGODB_URI. It was generated by the creation wizard.
2. In the Value field, select the Copy button and paste the value in a text file for the next step. It’s in the MongoDB connection string URI format.
3. Select Cancel.

Step 4.

1. Using the same steps in Step 2, create an app setting named DATABASE_URL and set the value to the one you copied from the MONGODB_URI connection string (i.e. mongodb://...).
2. In the menu bar at the top, select Save.
3. When prompted, select Continue.

Now we have to do some housekeeping in the Azure CosmosDB API resource for the smooth learning experience.
Go to the new resource-group you created in the beginning. There you have to open the CosmosDB API.

Within that navigate to Networking tab in the left pane.

Within that you have to modify two setting under Firewall section.
1. Click Add my current IP button
2. And enable checkbox having Allow access from Azure Portal.

Then hit the save button. This will take a while to complete.

As a next step, we have to fork the express-js app to our Github account.
Then in the App Service page, in the left menu, select Deployment Center.

Select the source as GitHub, authorize Github account (if needed) and select the repository you just forked using the options shown and hit save.

Performing this will create a workflow file in your git repo.

This will also trigger the application build. You can access the details under Github Actions tab in your forked github repository page.

After completion of the build and deploy steps in Github Actions. You can access your express-js application by clicking browse button in AppService page.

By updating the URL, you can access the swagger page of your application.

Congratualations!!!
You just deployed your express-js application in Azure. And not just that, it will be re-deployed automatically on every commit push.

In the next part of the series, we will deploy the Angular app to another AppService resource, enable continous deployment. And consume the endpoint we just created as the backend.

Happy coding!