Saturday, October 21, 2017

Try Azure App Service

Introduction

I am very happy to present this service of Microsoft Azure that allows to test the App Services quickly without having to use the credit card information.
Normally, when you want to give a try to Azure Portal you can open a free account for one month but you have to provide Microsoft with a credit card information.
With the "Try Azure App Service" feature you can play with Web App, Api App, Function App and Logic App during one hour by just signing with a social account (Live (Microsoft), Google +, Facebook, Github)

Creating a Web App for an one hour trial

So let's deploy a Node.js REST API into this type of Azure App Service, totally free and without any commitment For enjoying this Azure feature, reach the welcome page of "Try Azure App Service"



You are then invited to choose the type of App Service you want to try. Let's start with a Web App. You will see that you can totally use a Web App for hosting a REST API, Node.js will appear at the next step. Select the Web App, then click Next.



Let's choose the Node.js + Express now. Click on "Create".
As wrritten previously you can use one of the 4 social networks account to sign in : Microsoft (live), Google +, Facebook, Github. For the demonstration I will use my Live account.





Then, Azure is provisionning your App Service in a few seconds.



And an ONE Hour countdown is starting lettting you play with the Azure App Service and the Azure Portal within this hour.



Discovering the Azure Portal


Let's take a ride on the Azure Portal first. Cick on "Manage in the portal link or icon". You land of the App Service Overview blade where you can find:
  • The Azure App Service Url
  • The Azure App Service resource group
  • The Azure App Service subscription
  • Insights regarding the Azure App Service usage, accesses, data in, data out, errors, etc.



If you click the url of your Azure App Service, it will open in a new tab.



If you click on the dashboard link of the left menu, you will notice that the "Try App Service" feature has created 4 ressources (The Web App Service, the associated App Service Plan, a storage account and a Function App Service)



If you click on the App Service link on the left menu, you will land on a blade that's diplaying the 2 App Services (our trial Web App Service and a Function App Service)



If you click on the Web App Service Title you will be redirected to the App Service Overview blade and I let you discover other blades by clicking on the App Service Menu Items.

Deploying a Node.js API into the Azure App Service

Setting up your local environment

We are going to deploy a REST API based on Node.js in our Azure Web App Service within a few minutes and test it.

Prerequisites:
  • Having Visual Studio Code installed on your local machine (windows, Linux or Mac)
  • Having Git installed on your local machine
Now you have Visual Studio Code and Git properly installed on your machine, download the Contact List REST API sample on my Github repositery.



Place the downloaded zip file in your local dev repositery and for Windows, right-click it and locate Extract All in the contextual menu.



On next screen delete the last segment of the path for not having this folder created twice as a main folder and a sub folder with exactly the same name.



You should obtain this view (for Windows) after having extracted the GitHub sample zip file.



Open a command prompt and navigate to your code repositery. Then type
code .
To open the folder in Visual Studio code



Then, open your Visual Studio Code IDE Integrated Terminal





First we have to create a git reference, so type
git init .
in the Integrated Terminal of Visual Studio Code.



You will notice that a .git file has been added to the to level of your project.



Now we have to add reference of all our project file to the git, so type
git add .



Because it is our first push to another remote repositery we have to commit all the items of our project, so type
git commit -m "initial version"



We are ready to push our project items into our Azure API App Service. First we have to add a reference to this App Service deployment with git, so go back to the "Try Azure App Service" page (you will notice your current running App Service will be retrieved even though you have closed your browser. In the page click on the "Clone or push with git" button to make the git url appear. Copy the Url.



Going back to Visual Studio Code Integrated Terminal, we are going to deploy into our Azure App Service. Type
git remote add azure
and paste the url you have previously copied from the "Try Azure App Service" UI.



Then execute the push command for deploying:
git remote push azure master

The Visual Studio Code Integrated Terminal will be extremely verbose giving you a lot of details regarding the deployment.





and the most expected: Deployment successful.



You can then go back to the Microsoft Azure "Try Azure App Service" this time to use the button "Edit your code online" and check online what the deployment has really done.





You will notice that all was not overwritten and that it remains the files present at the creation of the App Service. But main files as server.js was porperly overwritten allowing our project to work.
For testing just hit the "run" button flagged in the previous screenshot.
The App Service root wiil give this error.



But if we add the segment
/contacts
to this url, Chrome will display the response in the browser in a json format (Internet Explorer would have asked you to download the result as a file).



You can then test this super simple API(only GET verb), with swagger by adding to your App Service url the segment:
/docs/?url=%2Fswagger#/Contacts



Or if you have Postman installed you can use it either



Editing online a Node.js API deployed into the Azure App Service



One of the good point of Node.js compared to compiled language like .Net C# is that you can all edit online once deployed.
Assume we want to add a new contact to our API. We just have to write it on the proper file (Visual Studio Code online will save it automatically).



Then, we could test our change on Chrome or in Postman.



Personally I love this Azure Feature. I will post more using it:

  • We will test the functions
  • We will test the Azure Web App
  • I will publish a post for the Node.js newbie, on how to mount from scratch the API we have deployed in this post, and we will also take benefit of that to add more verbs to our API, POST, PUT, DELETE.


Enjoy folks!

1 comment:

emma piterson said...

Thanks For Your valuable posting, it was very informative...
node js developer london