Deploying a mutli-tier MEAN application on Microsoft Azure

In this post I am going to connect all the dots I have given in my previous 3 post.

1. Continuous deployment of Node, Express application on Azure using Github
2. Simple CRUD operation using MEAN stack
3. NodeJS connectivity to MongoDB on Cloud - Microsoft Azure and mongolab

In brief, I will restructure and reconfigure my previous application I had created in my post mentioned in #2 above (Simple CRUD operation using MEAN Stack), then deploy the application on Microsoft Azure with continuous deployment configured with Github and finally I am going to connect all the different layers using the concept I have covered in NodeJS connectivity to MongoDB on Cloud.
To start with this example I would recommend you to go through my previous posts mentioned above, this will give you a little background on what I am going to explain in this post.
Step 1: Restructure the application, in my previous example “Simple CRUD operation using MEAN stack” I have provided an application build on MEAN stack. I am going to take the sample application and split this into 2 parts one is for Client having Angular JS as client side technology and another into Server build on NodeJS + Express technology. And finally this is going to connect to MongoDB which I have used mongolab as DBaaS (Database as a Service). So the overall architecture of the application will be as follows

So my application structure will be as follows.

Client and Server apps	AddressBookClient	AddressBookServer

Alternately you can also signup free for cloud based MongoDB, provided by MongoDB Atlas using this URL: https://www.mongodb.com/cloud/atlas

Step 2: Configure the Client and Server applications on Github, I have provided more details on application configuration on Github @ Continuous deployment of Node, Express application on Azure using Github. I am following similar steps here except the fact that instead of one consolidated application I am deploying two application i.e one for server and another for client.
Step 3: Configure the Client application on Microsoft Azure having Github as source control with continuous deployment


Step 4: Configure the Server application on Microsoft Azure having source control on Github with continuous deployment


Step 5: Create a new app settings key in Microsoft Azure console, and follow the steps
WEB APPS—>Your Application—>Configure—>Go to App Settings—>Add a new Key and Value as mentioned below.

Step 6: Configure your nodejs application with this key. Using this key my nodejs server application will pull the DB connection string from the environment variable configured on Azure.

Step 7: Once your application is deployed on Azure, you can test your API by hitting the Url of NodeJS Express API, in my case it is : addressbookserver.azurewebsites.net/persons

This gave me the JSON Response from the mongolab  data store. In case if you don’t have any sample data on mongolab, you can login into your mongolab console and add few data with the schema similar to the one I have provided in the screen above. This is required only for testing purpose. From next time onwards my client application is going to GET/PUT/POST and DELETE these data.
Step 8: So up till here DB Server, Express API and Angular Client everything deployed on Azure, so ideally when I will hit the client URL it should call the Express API and using the mondodb driver the Express server should fetch the data from MongoDB hosted on mongolab server. Let’s go ahead and test my application end to end, well even though I have data in MongoDB but I am not getting any output on my client, instead if you open the console you can see I am getting error from my Express Server.

XMLHttpRequest cannot load http://addressbookserver.azurewebsites.net/persons. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://addressbookclient.azurewebsites.net' is therefore not allowed access.

This is due to the security feature which is provided by default by JavaScript, known as CORS (Cross-Origin Resource Sharing). This prevents JavaScript from making requests across domain boundaries, and has spawned various hacks for making cross-domain requests. CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests. The spec defines a set of headers that allow the browser and server to communicate about which requests are (and are not) allowed.
Since in this example I have broken down my application into client and server and hosted both of them on 2 different domains, which in turn triggered this extra layer of validation. CORS is a very vast topic in itself, so instead of diverting from actual topic I would recommend you to go to the dedicated site for CORS and read about it, I believe this might give you a very good understanding of the internals of CORS.
So coming back to the original article my next step will be to configure my application for CORS.
Step 9: CORS (Cross-Origin Resource Sharing)

In the code above I am adding my client URL to Access-Control-Allow-Origin fo the server.js file in Express API. With this all the response server by the Express API will validate the requestor before it sends any further response back to the client. In this way the default security feature provided by Javascript will make sure that no one else other than my client domain: http://addressbookclient.azurewebsites.net will be able to access my API. You can refer the expressjs implementation of CORS @ http://enable-cors.org/server_expressjs.html
Step 10: Now that we have everything in place let try refreshing the client URL: http://addressbookclient.azurewebsites.net
So now I am able to get the data from mongodb through Express API running on Nodejs.


And if I see the response, I can see the Access-Control-Allow-Origin is set for my client domain, which means if any other URL will try to access this they will get a similar error which I received in Step 8 above. But if you don’t want any constraints or restrictions then you can change this to Access-Control-Allow-Origin: ‘*’ here I have used wildcard asterisk to allow any domain to access my API.

And this is pretty much I had to share on this topic, but to get complete picture on all the associated topics, don’t forget to visit my previous posts:

1. Continuous deployment of Node, Express application on Azure using Github
2. Simple CRUD operation using MEAN stack
3. NodeJS connectivity to MongoDB on Cloud - Microsoft Azure and mongolab

You can fork or clone the code @

• Server: https://github.com/bmdayal/AddressBookAPIServer.git
• Client: https://github.com/bmdayal/AddressBookAPIClient.git

References:

• http://blog.mongolab.com/2013/02/node-js-and-mongolab-on-windows-azure/
• https://github.com/mafintosh/mongojs

Read More

NodeJS connectivity to MongoDB on Cloud - Microsoft Azure and mongolab

In this post I am going to cover different options where you can host your MongoDB database using different options such as  DBaaS (Database as a Service), Paas (Platform as a Service) and IaaS (Infrastructure as a Service) using Microsoft Azure.

Option 1 : Using Infrastructure as a Service (IaaS)

In the first option I am using Microsoft Azure dedicated VM to configure MongoDB. This means that you can have your database in your favorite cloud in the same location as your application tier.

Step 1: Configure you mongo DB database on Windows Server 2008 on the VM hosted on cloud (Microsoft Azure). I found an excellent article which demonstrate how to configure your mongodb on Windows Server 2008 hosted on Azure. Instead of reiterating the same thing here does not make any sense, so I am providing you the link to the article. You can use this article to configure your mongodb database server.

https://azure.microsoft.com/en-us/documentation/articles/virtual-machines-install-mongodb-windows-server/

Option 2: Using Platform as a Service (PaaS)

For this option I am using mongolab via Microsoft Azure console or alternately you can directly go to https://mongolab.com and create your free account or paid account.

I am starting from Step 0, just to match my Step 1 till steps 3 with the steps provided by Microsoft Azure wizard and to avoid any confusion.

Step 0: Once you are logged in into Microsoft Azure console, select Market place from the list of available options.

Step 1: Select MongoLab as a developer service and select Next arrow

Step 2: Select your plan and click next arrow

Step 3: Click on Purchase

Step 4: Go to your MongoLab dashboard to manage you MongoLab service, this link will take you to https://mongolab.com/

Step 5: Once you are in mongolab Dasbboard, you have full control of your mongodb database, collections, documents, users, profile, etc

Test connectivity using command prompt in Windows OS

Step 1: Before you connect to mongolab database, you need to create users for your database, you have options to create a user as readonly or users with full access.

Step 2: To test connectivity you can use command prompt and enter the following command

$ mongo ds048368.mongolab.com:48368/MongoLab-3 -u <dbuser> -p <dbpassword>

This will take you to the mongodb console, you can use mongodb commands/queries to access the documents and collections.

Same will be reflected in the web console, or you have option where you can directly edit your databases, collections, users and documents.

Connecting to mongolab using nodejs

Step 1: install mongodb drivers on node using the command

$ npm install mongodb

Step 2: Create a server.js file and add the following code.

Step 3: Run the application to test connectivity to mongolab.

Now you are all set to start your development using MongoDB hosted on cloud platform. Since I am using these technologies for my learning purpose so personally I felt using the mongolab as most convenient option, as this will not have lots of configuration before you actually start your development and you don’t have to run those extra commands to make sure your server is running on the console.

Even though mongolab and Windows Azure VM is hosting mongodb in both the option, but the option have entirely different infrastructure and concepts. For learning purpose you may choose any of this option, but if you are seriously thinking to host your mongodb for your enterprise applications then you might have to do a detailed study on which one suits you better in terms of IaaS or PaaS.

Mongolab also has a partnerships with the cloud provider to offer both Infrastructure as a Service and Platform as a Service. You can learn more @ https://mongolab.com/company/partners/

References and other helpful links

1. https://docs.mongodb.org/manual/
2. https://mongodb.github.io/node-mongodb-native/api-articles/nodekoarticle1.html

Read More

Continuous deployment of Node, Express application on Azure using Github

Normally we deploy the projects on Azure using Visual Studio IDE, but Azure is not just limited to all Microsoft technologies specially when the majority of developers are on open source or moving to open source.

In this post I am going to provide you a very step by step process to deploy your Nodejs project having a source control on Github to Microsoft Azure cloud.

The basic things which you need to setup before you can start your deployment are as follows:

1. Nodejs : You can download Nojejs from here  https://nodejs.org/en/
2. Github repository account: First you need to setup a new account (if you don’t already have) in https://github.com/
3. Github for Desktop: I am using Github for windows to Commit and Push my changes to Github repository, but you can use other tools as well to push your files to Github. You can download from here: https://desktop.github.com/.
4. Microsoft Azure: If you don’t have Azure subscription you can signup for 1 month free trial. This will give you $200 credit to spend on all the Azure Services: You can visit this link to Signup for a month free service: https://azure.microsoft.com/en-us/pricing/free-trial/

You don’t need to have very advanced knowledge of Node, Github or Microsoft Azure to follow the steps I have covered here but I am assuming that you have at least basic knowledge of Nodejs, Github and Azure. Now Once you have all the required setup installed on your machine, lets get started with the basic steps which is required to deploy your Nodejs sample application on Azure using Github.

Step 1 Setup your environment: Create a working folder which you want to use for your application, and start Git Bash on your working directory. Alternately you can use windows command prompt. For this example I have created a folder in my local C drive as C:/Source/NodeOnAzureSample

If you already have your application which you want to deploy on Azure you can use that. For this example I am using express-generator to quickly create a sample application using Node, Express and Jade, I am using this just to save time and keep our focus on the actual topic.

Step 2 (Optional) Setup my demo project: This is a optional step if you already have your application ready. Here I am using the command “npm install express-generator -g” to generate my sample application template with a basic welcome page. You can find more detail of express-generator @ http://expressjs.com/starter/generator.html

This will create the sample files inside node modules globally in your C:/Users/YourUserName/AppData/Roaming/npm/express folder, or you can create the files in your local application folder by removing the –g from the command.

Now run “express NodeOnAzureSample” command, this is going to create all the required folders and files which you are going to start your development.

Step 3 (Optional) Restore the dependencies: Run “npm install”, this will restore all the dependencies like jade, express, etc which your application has dependencies.

Step 4 Test the application on localhost: After executing Step 1 to 3, we have our application ready to run on local machine, lets go ahead and test our sample application by switching to the application directory and run the command “npm start” in Git Bash (you can use powershell or windows command prompt) and enter “localhost:3000” in your browser. This should give you the following screen and your sample application is ready for hosting. Now in Next Steps I am going to configure my application with Github repository.

For simplicity sake and stick to the topic, I am not going to explain the folder structure, code, and other granular details of this sample application.

Step 5: Setup Github Repository @ Guthub.com Go to https://github.com/new and create a new repository, once you select all your desired options as shown in the image below. Click on the button “Create Repository”

You will be provided step by step information on the new repository which you have created,

Copy the URL, in your clipboard or notepad, you are going to need this URL during commit and push of your local application files to github repository at github.com online.

For this example my repository URL is : https://github.com/bmdayal/NodeOnAzureSample.git

Step 6: Setup Github Repository on you Desktop: Open Git Gui and Select Create new Repository from the menu which will ask you to locate your application directory, select the folder which you want to deploy to Azure. In my case I have mapped my “NodeOnAzureSample” application to Git repository.

Once you select create, Git GUI will list all the files which are either new or modified. Next step is you need to Stage Changed files, Commit and Sign Off, to perform these first you need to setup a new repository in https://github.com which I have already explained in Step 5 above.

Select “Stage changed” –> Sign Off –> Provide initial commit message –>Commit—>and Push.

Selecting Push is going to final commit your files to online github repository, to do this you will need the URL of your GitHub repository at github.com, and this will also prompt you to authenticate yourself.

Once your files successfully pushed to online repository, you will get a confirmation message as below.

Now that your files are ready for deployment, lets switch to Azure to configure continuous deployment.

Step  7 Configure Azure website: to do this you need to go to https://manage.windowsazure.com dashboard. Select Web Apps—>And select New from the footer menu.

This is going to provide you a wizard to create a new WEB APPS. For this example I am going to use Quick Create option to create my web application and named this as NodeOnAzureSample. If the name is available you will get a green check mark next to the name. This will provide you with a URL as https://nodeonazuresample.azurewebsites.net. Once you are happy with the name click on “Create Web App” button.

You can see the site is now listed in the WEB APP list and showing as Running, now click on the URL to test your web site @ http://nodeonazuresample.azurewebsites.net/.

This is going to provide you a welcome page of Azure Web site. In my nest steps I am going to replace the welcome page with actual application which we have created and pushed in Github.

Step 8 Configure deployment using Github: Select the Web App listed in the image above and Select Dashboard from the top menu.

From the dashboard, select Set up deployment from source control from right navigation menu.

You will be provided with a list of options, where you need to select GitHub, and select Next

You will need to authenticate yourself to GitHub where you have created your repository that needs to be deployed on Azure.

On successful authorization, you will be provided with the list of your applications which you have deployed on Github, for this example I have selected my “NodeOnAzureSample” application.

Select Done when you have made your selection, and this is pretty much what we need to do to link my Github repository to Azure website.

Deployment Stage 1

Deployment Stage 2: Notice you got a new menu called “Deployments” after Dashboard. Be patience, this might take few seconds to minutes depending upon the size of your application.

Deployment Stage 3: Deployment completed, you can see the initial comments which I had provided during my Commit to Github

Step 9 Testing your deployment on Azure website: Now that your application is deployed on Azure the next step is to test my application, yes no further configuration is required. Azure configures everything for you. Lets go to the WEB APP Dashboard and hit on the URL : nodeonazuresample.azurewebsites.net

Yes our application is ready and running on Azure

Step 10 Continuous deployment: To verify Continuous deployment. Go to your index.js, in NodeOnAzureSample/routes folder and change the text from “Express” to “Node, Express, Azure and Github”

Save the file, go to your Github Desktop—> Rescan—>Commit and Push the file with comment “Changed the welcome text from Express to Node, Express, Azure and Github”

Once you complete these steps, go back to your Azure dashboard. And probably by the time you switch back to your Azure your changes might have already been deployed to your website. Lets go ahead and verify.

And here we go, on my azure dashboard above I can see the latest changes are already deployed with the comment I have provided in my github commit.

Lets test this change in my browser by refreshing the page, and yes my changes are reflected below.

This is just a simple example of how the things are simplified in Microsoft Azure. This post will give a head start to integrate Node, Express, Github and Azure.

You can use any of your favorite open source like Angular, Knockout, Backbone, Jade, etc with your favorite source control like Visual Studio, GitHuib, Dropbox, Codeplex, etc and integrate with Microsoft Azure and above all you don’t need to be a Ninja on this technologies.

Happy Coding and Keep exploring

Read More