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!

Tuesday, October 10, 2017

Build a Node.js RESTful API and deploy it to an App Service in Azure

Introduction

This post is a rework of the Microsoft documentation Build a Node.js RESTful API and deploy it to an API app in Azure linked with this git hub sample Azure-Samples/app-service-api-node-contact-list
In comparison with the Microsoft documentation, I focused more on the detailed steps with a lot of screen shots and didn't change nothing to the git hub sample so that the reader (even a newbie) can obtain a node.js api running in Azure within a few minutes. This quickstart shows how to :
  • create an Azure App Service to host your API
  • create locally a REST API, written with Node.js Express, using a Swagger definition
  • deploying it on Azure.

Configuring your environment

  • Create your Azure free account. Microsoft will ask for a credit card information for that...
    But, better, if you don't have an Azure Free account and don't want to use a credit card, I recently post an article to test Node.js deployment into an Azure App Service using the super cool "Try Azure App Service" Feature. It's here...
    This feature doesn't offer all the possibilities of an Azure Free Account, but it could be a good start for discovering Azure and Node.js deployment in it.
    If you already have an Azure account or want a more professionnal environment for testing, just continue this post.



  • Download and install Visual Studio Code
  • Download and install Git The most official build is available for download on the Git website. Just go to http://git-scm.com/download/win and the download will start automatically. Once git is installed open a command prompt or powershell and type:
    git -- version
    you should get a similar result:

  • Download node.js and install it
    On this step again you can test installation by asking for the node.js and npm version



Creating an Azure App Service to host the REST API

Connect to Azure portal We are going to host our Node.js REST API into an Azure Mobile APP. From 2015, all the repositories for Web App, mobile App backend, Web API have been gathered in an Azure offering called App Service in order all enjoy the same capabilities (behavior, insights, features,etc.). That means also there are quite the same and you can use a Web API App Service for a mobile backend and vice versa or a Web App App Service for hosting a Web API. So let's create a Mobile App App Service.



Click on App Service in the left menu (1)
Then on Add on the top menu (2)
Finally on the create button for the Mobile App (3) (You notice that Microsoft makes a special advertisment for this type of App Service)

You are then invited to enter the first settings of your App Service before launching its creation within the Azure portal.
Note carefully the App Service name and the Resource Group Name because we need them later for the deployment.
In my case: App Service Name : Contact-list Resource Group: tutorials



Once the App Service is created, locate the deployment credentials blade and fill the required fields then click on save on the top menu.



For having the complete information to deploy we need the Url for Git deployment.
We are first going to initialize the Git capability using the Azure CLI
Open the Azure CLI by clicking the top icon (1)
Accept the creation of the storage for the persistance
Choose Bash mode
When connected to CLI type the following line :

az webapp deployment source config-local-git --name <your app service name> --resource-group <the associated resource group name> --query url --output tsv

in my case

az webapp deployment source config-local-git --name Contact-list --resource-group tutorials --query url --output tsv



The Azure CLI provides you with the Git Url and this Url now appears in the UI in the properties blade:



Testing the Node.js API Locally



We are now going to dowload the Git Hub sample and make it work on our local machine.

Go to the Git Hub sample and download it.



open the sample with Visual Studio Code



Notice that the key files of the project, package.json and server.js are located int the following path: project/end/ContactList

Open a command prompt and navigate to this location, then type the following instruction:

npm install



You should have more lines because it would be your first installation of the npm packages linked to the project.
Once it's done you can test locally by typing this instruction in your command prompt:

npm start



Node is starting a virtual web server and excuting the project on the 8000 port as specified in the server.js file.
So for testing, open Chrome (IE will download the json result as a file) ans type the following Url in the browser:

http://localhost:8000

The browser will display the contact list in a json format:



Deploying to the Azure App Service and testing



Within Visual Studio code, open the integrated terminal



Navigate to the contactlist folder and to initialize your git,type:

git init .



You will notice that a .git folder was created on the contactlist repositery:



Create then a gitignore txt file in the contactlist repositery and type the folowing instruction in it:

node_module/

Save it and we are going to use a workaround to create a .gitignore file (because windows requires a file to have a name and not just an extension). While holding the right shift key of your keyboard, right click the file and click on "open a windows powershell (or command depending on your windows version) from here:



Then, type:

ren gitignore.txt .gitignore



Then you can notice in VS Code that the gitignore file has the proper icon and that the files under the node_module directory won't be deployed by typing:

git status

on the Visual Studio Code Terminal.



then type

git add .



and

git commit -m "initial version"



then connect to the Azure App Service by typing:

git remote add azure <git url that you can copy from the porperty blade of your app service>

in my case:

git remote add azure https://deploy-account-02@contact-list.scm.azurewebsites.net:443/Contact-list.git

The terminal just jumps to another line (my screen shot is wrong)
Then push your project files to your App Service by typing:

git push azure master

You are asked for your deployment account credentials,



then your files are deployed:



You can then test by calling your api. Your Azure App Service Url is at the top of the properties blade:



So, in my case one of my API url is:

http://contact-list.azurewebsites.net/contacts



If you want to have a more complete testing experience using swagger, type this Url:

http://<your app service url>/docs/?url=%2Fswagger#/Contacts

in my case:

http://contact-list.azurewebsites.net/docs/?url=%2Fswagger#/Contacts



Keep developping online within Azure


Last, you can enjoy the preview of Visual Studio Code online for keeping developping your API without having to deploy anymore from local environment.





By the way, it is an excellent way to check what was exactly deployed into the Azure App Service. The deployment has drammatically simplified the solution.

Hope that helps :-)

Videos on the topic:
Deploy a Web App with Node.js from Github on a Mac into an Azure App Service