The Painless Way to Deploying Your NodeJS App on Azure (Part 2)
Tags: azure, node, javascript
Published: 2019-12-22 07:02:39

*Preface*: This is the second/last of a two-part series on Deploying Your NodeJS App on Azure. In this part, you will clone a code repository on Github - which is where the code for this guide is hosted, I have done the hard job of writing the code - you'd just need to follow through and pretend like you understand the code I've written 😁 (it's a very simple code to understand though).

In the [first part](https://dev.to/bashirk/the-painless-way-to-deploying-your-nodejs-app-on-azure-part-1-14fi) of this guide (or series), you learnt about the painless way to setup and deploy the [Azure App Service](https://azure.microsoft.com/en-in/services/app-service/) (formerly, *Microsoft Azure Web Sites*).

Going forward, it is worthy to note that this guide is 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 has been covered in the first part of this guide, [here](https://dev.to/bashirk/the-painless-way-to-deploying-your-nodejs-app-on-azure-part-1-14fi), while the other three steps are covered in this part.

> Now, before we do a deploy on top of our Web App Service, we'd need to write/get the NodeJS code we would be deploying on top of our Azure resource. 

## Diving in...
The code for this guide can be found in this repository, you can go ahead and clone the code repository [here](https://github.com/bashirk/azure_webapp_node), such so you could follow right along. The Github repo for this guide contains a very simple NodeJS app - which has no APIs nor contains database for storing data (I'd come up with a more robust tutorial which covers database integration, in the future). The NodeJS app which has two views; an [home](https://github.com/bashirk/azure_webapp_node/blob/master/views/home.ejs) view (which includes a form where data is being captured)

{% gist https://gist.github.com/bashirk/ad2d89facf84b704520a5a32647dad80 %} The home.ejs code on Github

...and a [welcome](https://github.com/bashirk/azure_webapp_node/blob/master/views/welcome.ejs) view - which would populate our layout with the data gathered from the home view. This could be modeled for an authentication page.😄

{% gist https://gist.github.com/bashirk/c1c8ba0229715b9ff112282958a418d6 %} The welcome.ejs code on Github

Also included in the repository is an [app.js](https://github.com/bashirk/azure_webapp_node/blob/master/app.js) file, which is the index of our project, the Node runtime stack we setup in the first part of this guide (using Azure App Service) would compile and run this file - i.e, this is the file the Node runtime engine would use in serving up our entire project, this is an express code. You can get a closer look into how express apps work [here](https://www.sohamkamani.com/blog/2018/05/30/understanding-how-expressjs-works/)

{% gist https://gist.github.com/bashirk/d83b6766b8e064d463318f3cf020b435 %} The app.js code on Github

The last item in this repo is the [package.json](https://github.com/bashirk/azure_webapp_node/blob/master/package.json) file, which is where the information for the app we have built is added, the package.json file works as a key-value pair type of object notation.

{% gist https://gist.github.com/bashirk/8f2f8b175206751b3dcf4fb6246d170a %} The package.js code on Github

As stated earlier, the app is a very simple and primitive one. There would be a tutorial on deploying NodeJS apps with database on Azure later on. But before that time...

## Let's Deploy our NodeJS App

In order to deploy our NodeJS app, we'd need to visit the App Service resource we created in the first part of this guide. I named the one used for this guide *node101*, and the first step here would be to select a deployment option.

### Selecting a Deployment Option

Head over to the web app resource that you have created, the one created for this guide is *node101*. Click on *Deployment Center* as indicated below.

![node101 resource](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.51.28%20PM.png)

This should take you to the blade shown below
![Local Git Repo](https://github.com/bashirk/azure_webapp_node/raw/assets/Local%20Git%20Repo.png)

The very next step here would be to choose a deployment option, we would be using the Local Git option as our deployment option. Before we go forward, we'd need to get the NodeJS code we would be deploying on top of our Azure resource - if you don't have a NodeJS project, you could clone the one talked about at the beginning of this guide. For more insight on cloning Git repos, head over [here](https://stackoverflow.com/questions/651038/how-do-you-clone-a-git-repository-into-a-specific-folder/651079)

### Publishing our Code to the Azure App Service

After selecting the *Local Git* from the list of options. The next step would be to select a service provider for the deployment pipeline, select the *Kudu App Service* for this, !['Kudu App Service'](https://github.com/bashirk/azure_webapp_node/raw/assets/Screenshot%202019-12-09%20at%204.55.02%20PM.png) ...hit *Continue*, and on the next blade, click *Finish*.

Still on the *Deployment Center* section, you should notice a *Git Clone Uri* - this is the URL we would be pushing our Node project to. But before doing that push, click on *Deployment Credentials* to reveal the essential credentials needed to authorize the deployment of your code on the Git Clone Uri provided. !['Deployment Credentials'](https://github.com/bashirk/azure_webapp_node/raw/assets/Deployment%20Credentials.png)


The very next step here would be to navigate to the cloned project folder on your local machine - be sure to remove the old origin inside the cloned repo and create a new one. You can change the existing origin url by using the git command below:
```
git remote set-url origin NEW_URL
```
> Note: The NEW_URL identity would be the 'Git Clone Uri' on the 'Deployment Center', copy this Uri and replace the NEW_URL with the copied Uri. Mine would look like;

```
git remote set-url origin https://node101.scm.azurewebsites.net:443/node101.git
```
Verify if the newly set URL has been effected by doing,
```
git remote -v
```

!['git remote -v'](https://github.com/bashirk/azure_webapp_node/raw/assets/git%20remote%20-v.png)

> For a more detailed guide on changing origin URLs, you should check this [guide](https://dev.to/dance2die/push-git-cloned-repository-to-your-own-on-github-1ili) out.

Finally, to deploy the NodeJS code on the created Azure App Service, use the command 

```
git push
```

!['Git Push'](https://github.com/bashirk/azure_webapp_node/raw/assets/Git%20Push.png)

Quick note, you might be required to provide application credentials (username and password) before the *git push* command is effected to the URL. If this is the case for you, supply the credentials provided by Azure on the *Deployment Center*

!['App Credentials'](https://github.com/bashirk/azure_webapp_node/raw/assets/App%20Credentials.png)

### Finally, Test the App!
The URL for the NodeJS app can be found on the right corner of the App Service Overview section, click on the URL to visit your deployed NodeJS app, cool ain't it? 😁

!['App URL'](https://github.com/bashirk/azure_webapp_node/raw/assets/App%20URL.png)

If you ever run into issues, be sure to make comments on this post. I'd respond to any issues as soon as possible.

You can as well reach out to me on Twitter, [@_bashirk](https://twitter.com/_bashirk)

### Bonus Point
Be sure to Stop/Delete any resource once you're done with using them. To delete/stop the App Service you've created for this guide, head over Overview section of your App Service resource and click the Stop button for stopping the billing on this resource or the Delete button to delete the entire resource. Cheers :)

!['Stop App'](https://github.com/bashirk/azure_webapp_node/raw/assets/Stop%20App.png)
!['App Test1'](https://github.com/bashirk/azure_webapp_node/raw/assets/App%20Test1.png)
!['App Test2'](https://github.com/bashirk/azure_webapp_node/raw/assets/App%20Test2.png)