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).
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
The first of these four steps has been covered in the first part of this guide, here, 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.
The code for this guide can be found in this repository, you can go ahead and clone the code repository here, 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 view (which includes a form where data is being captured)
The home.ejs code on Github
…and a welcome view - which would populate our layout with the data gathered from the home view. This could be modeled for an authentication page.😄
The welcome.ejs code on Github
Also included in the repository is an 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
The app.js code on Github
The last item in this repo is the 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.
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.
This should take you to the blade shown below
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
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, …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.
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
For a more detailed guide on changing origin URLs, you should check this guide out.
Finally, to deploy the NodeJS code on the created Azure App Service, use the command
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
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? 😁
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
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 :)