The Painless Way to Deploying Your NodeJS App on Azure (Part 1)
Tags: azure, node, javascript
Published: 2019-12-09 19:02:20

*Preface*: This is the first of a two-part series on Deploying Your NodeJS App on Azure. In this guide, you will learn about the painless way to make use of the [Azure App Service](https://azure.microsoft.com/en-in/services/app-service/) (formerly, *Microsoft Azure Web Sites*) which provides support for popular frameworks like .NET, .NET Core, Java, Node.js, Python, PHP and Ruby. 

Azure App Service offers auto-scaling and load balancing, supports both Windows and Linux, and enables automated deployments from GitHub, Azure DevOps, or any Git repo (locally and online). You'll learn how to use the App Service in this guide.

Going forward, it is worthy to note that this guide would be covered in four key steps;

* Create a Web App Service
* Code a NodeJS app
* Deploy the NodeJS app on the created App Service
* Testing!

The first of these four steps is covered in this part, while the other three steps are covered in the second part.


### ***First off*: Create a Web App Service**

Quick note, we would be making use of the Azure [Portal](portal.azure.com) to deploy our NodeJS web app.

As a very first step, be sure to create an Azure account [here](azure.microsoft.com) - if you do not have an Azure account already - and sign in to your Azure [Portal](portal.azure.com).

Then, create a resource — this is in the top corner on the left pane of your dashboard.

![Click on "Create a resource" to create a new resource to hold the Web App Service](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.31.02%20PM.png) <figcaption>Click on "Create a resource" to create a new resource to hold the Web App Service</figcaption>

![Click on "Web App" to get the Web App Service from the Azure Marketplace to your new resource](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.34.01%20PM.png) <figcaption>Click on "Web App" to get the Web App Service from the Azure Marketplace to your new resource</figcaption>

The [Azure marketplace](https://azuremarketplace.microsoft.com/en-us) is the destination for all softwares required to work with Microsoft Azure. On the next page, there would be some details to provide so that Azure knows exactly how to describe and provision your web app. These details are explained below:

*Subscription*: You need to tell azure which of your subscriptions to attach to your billing(s) for this web app. I'm on Visual Studio Enterprise, the reason I'm not selecting “Pay-As-You-Go Dev/Test” for this guide - you should, if you're not on an enterprise plan.

*Resource group*: This is like a container, it is needed in putting together - identical items/resources gotten from the Azure Marketplace in the same container or location, for easier location of these resources. These items or resources could be web apps, database add-ons, API endpoints and Azure cognitive services. Create a new resource group here to hold the Web App resource to be created - as shown below, I named the one used for this guide: **NodeAppService**.

![Click on "Create new" to create a new resource group](https://raw.githubusercontent.com/bashirk/azure_webapp_node/assets/Screenshot%202019-12-09%20at%204.35.44%20PM.png) <figcaption>Click on "Create new" to create a new resource group</figcaption>

*OS*: The Operating System the runtime stack would be installed on. I used Linux for this guide.

*Name*: This is the URL for the app, as well as the unique name of the app you are creating. The name for the app in this guide is: **node101**.

*Runtime stack*: This is the runtime engine that would power your code. We are using the Node runtime engine (version 10.10) for this guide. 

![Change the Runtime stack to Node version 10.10](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.36.24%20PM.png) <figcaption>Change the Runtime stack to Node version 10.10</figcaption>

*Publishing option*: This is the kind of item you want to deploy/publish on your runtime stack (the NodeJS engine). Select the code option, since we would be publishing a written code.

*Region*: This is the Azure server farm or region where your web app server would be provisioned. Choose the nearest location to your region, if you're not like me (living in Nigeria) - else, select the "Central US" option.

*App service plan*: This is where you select the storage size, Memory and Azure Computer Unit (ACU) needed for the performance of your web app.

![Click on "Change size" to select the proper App Service Plan for your app](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.41.16%20PM.png) <figcaption>Click on "Change size" to select the proper App Service Plan for your app</figcaption>

![Select "Dev / Test" and click on B1 as shown below](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.41.35%20PM.png) <figcaption>Select "Dev / Test" and click on B1 as shown below</figcaption>

![Select "B1" pricing tier and hit "Apply"](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.41.53%20PM.png) <figcaption>Select "B1" pricing tier and hit "Apply"</figcaption>

![Click "Review + Create" to review your resource creation](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.42.10%20PM.png) <figcaption>Click "Review + Create" to review your resource creation</figcaption>

![Review the deets you have provided for your Web App Service before hitting "Create"](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.42.42%20PM.png) <figcaption>Review the deets you have provided for your Web App Service before hitting "Create"</figcaption>

Almost immediately, your Web App Service resource will be in the process of deployment. Expect this process to take a long time (based on the strength of your internet connection). You should be presented with the page below, once the App Service deployment is ready.

![Hit "Go to resource"](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.50.54%20PM.png) <figcaption>Hit "Go to resource"</figcaption>

Hit "Go to resource" as shown above, to reveal your deployed resource. Note: you've only just deployed your production environment online, and NOT your source code nor project!

![Dashboard of the deployed Web App Service](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.51.28%20PM.png) <figcaption>Dashboard of the deployed Web App Service</figcaption>

The "Go to resource" button should take you to the page shown above. This page has an "Overview" section which displays the information about the App Service that has just been provisioned. By default, the App Service *Deployment Center* sets the FTP option as the deployment mode. We would be changing this to the required option in the next part of this series, stay tuned.

#We. Are. Here!

We’ve come to the end of this part of our guide on deploying NodeJS applications on Azure App Service.

In this part, I did scratch the surface of the Azure App Service offering, as a part of the goals for this crash course is to make this guide comprehensive enough to be easily understood. The second/last part of this guide can be found [here](https://dev.to/bashirk/the-painless-way-to-deploying-your-nodejs-app-on-azure-part-2-5151). Cheers :blush: