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

Free Microsoft Learning Events by Microsoft Learning Partners

Click on the link below to find some of the third-party events where you can learn about Microsoft technologies.

http://www.microsoft.com/learning/en/us/community/events.aspx

You can search events based on your technology, country, City/Province, Online/In Person events, From Date, To Date and name of the partners. These events will help you to boost your careers, learn new technologies, etc all free of cost.

Read More

Hosting ASP.NET Web Api on Windows Azure Platform

In this post I am going to show you how to Host your ASP.NET Web Api Services on Windows Azure, to demonstrate this I am going to use my application which I have created in my previous couple of Post :

CRUD operation using ASP.NET Web Api and MVC 4 – Part 1

CRUD operation using ASP.NET Web Api and MVC 4 – Part 2

Before hosting my application I have to perform the following steps.

1. Add an Cloud Application from Add New project

2. Select ASP.NET MVC 4 Web Role, since I have used ASP.NET MVC 4 to create my Web Api project.

3. From the following Screen I have to select cancel, since I am adding this to my existing Web Api Project, and don’t want to create a new Applications.

4. Once the project creation is successful, right click on the Roles folder from the WebRole.Azure project and Select Add, from the add menu select Web Role Project in solution  and Select the WebApi Project listed in the Popup windows. This will add my Web Api project in the Roles folder of Azure project as given in the screen below.

5. Now our Azure project is configured to publish my WebApi service on Web, but before we publish we need to configure the Database connection which is currently pointing to my local system, we need to change this to the SQL Azure database. Since SQL Azure setup and configuration is out of scope of this Post, so I am not going to cover that here, but don’t worry I have given that instruction in my another post, which will help you to configure the Entity Framework EDMX with SQL Azure.

6. Now once your application is ready with the SQL Azure connection, we will publish our Application on Windows Azure. But before we continue, we may have to configure publish settings in my system, sometime back I have written couple of articles where you can find how to publish your website on Windows Azure. But simplest way to do the same I have given below. Right click on your Windows Azure project and Select Publish, You will be prompted with the screen below. Now Select the option “Sign in to download credential”

7. This link will take you to the windows azure site, where you will have to provide your credentials and then you can download the publishsettings files, using the Save as option. Save this file to your system.

8. Now select the import button and locate the downloaded publishsettings file, this will auto populate the Subscription dropdown as given below, I have used my 3 months free subscription to demonstrate this. You too can subscribe to 3 months free trial from here.

9. Provide your Name and Location details.

10. Select Ok then Next, you will land up in the below screen, where you can Say next.

11. Finally you will provided with the Publish Summary settings, where you can review your settings and it everything looks good then you can click on publish.

12. You can see the progress here, or if you want you can see the same in your Windows Azure console also.

Windows Azure console.

13. Once ready you will be come to the following screen, where you can see the status as Ready.

And that’s it we are ready to test our application. You can get the DNS name (URI) of your Web Api Service from the console once your applications are ready. Lets try out Api Services, in the browser using Developer ToolBar. Following are the list of Methods and URI are exposed to web.

Lets try with the Get (/api/values) and check in Dev Toolbar, So I am getting the Responsed code 200 and in the detailed view –> Response Body I can see my result returned from my Api Service.

Now lets try from from the Client screen where I have written few lines of jQuery to demonstrate the CRUD operation, details of which you can refer in my previous post.

CRUD operation using ASP.NET Web Api and MVC 4 – Part 1

CRUD operation using ASP.NET Web Api and MVC 4 – Part 2

GetById (/api/values/1) and GetAll (/api/values)

The codes for these sample can be downloaded from here https://docs.google.com/open?id=0BzIjFd_Ps-MSUm4zMklvYkxUMXlFZzdOWVBsaHJvQQ

This is the same code which I have already provided in my previous post : CRUD operation using ASP.NET Web Api and MVC 4 – Part 2, You will just have to do the configurations which I have mentioned in this post. Hope this helps.

Read More

Microsoft Cloud Infrastructure

And now this video is for those who are concerned about reliability, security, scalability of Microsoft Cloud infrastructure. This video will provide a deeper look at how Microsoft uses secure, reliable, scalable and efficient best practices to deliver over 200 cloud services to more than a billion customers and 20 million businesses in over 70 countries.It provides an understanding at how we view our end-to-end cloud strategy from an infrastructure perspective.

Read More

Free eBook on Windows Azure

I just found a free 96 pages eBook available from Eric Nelson about the windows azure platform. Looked through it very quickly and I thought it would be a very good book to learn the overall of Windows Azure, SQL Azure and the software architecture which will be deployed on Azure. You can download it here.

You can also read the book Cloud Computing with Windows Azure Platform by Roger Jennings online from here. Remember this is just the online version, so you cannot download or print this.

Cloud Computing with the Windows Azure Platform

To Get the feel of this book, you can buy from the Amazon link below.

Update : Tuesday, 31st May 2011, While going through the online articles to fetch more and more knowledge on Cloud and What other Cloud Services offers as Compared to Windows Azure, also some very fundamental concepts which I have not discussed till now. i.e. SaaS, Paas, IaaS, etc. I cam across an excellent free eBook (Demystifying the Cloud An introduction to Cloud Computing) provided by Janakiram MSV on one of his post.

I must say the way he has the way he presented everything is something very unique in itself. Once you start reading this book, you will get totally engaged into it. You can download it from his blog link:

Demystifying the Cloud An introduction to Cloud Computing

Read More

Deploying Windows Azure Application – VS2010 IDE

This is with reference to my previous post where I showed how to deploy ASP.NET Windows Azure application manually on the Windows Azure Server.

In this post I am going to show you how to deploy Windows Azure application using Visual Studio 2010 IDE, this I guess is quite simpler as compared to the previous approach i.e. doing it manually.

Once you ready with your Windows Azure Application, Select Deploy option from the Windows Azure Application. To see how to create a basic application you can refer to my previous post.

Now from the Deploy Select

1. Create your Windows Azure project to Windows Azure Option

2. From the Credential Select Add option if you don’t have Server certificate already present. This will open a Popup for you to enter the details of the Certificate.

3. Here again I am selecting Create Option from the Dropdown. This will open another popup for entering the name of your certificate. Once you done Click Ok.

4. From the Second option Select the Copy full path and now its time for you to open you Windows Azure Site to upload your Certificate. By Selecting the Copy Full Path option basically this is copying the certificate path for you to clipboard, which you can paste later in Windows Azure Site.

5. Once you logged into your Windows Azure Website (https://windows.azure.com), Select ‘Hosted Service, Storage Accounts & CDN then Management Certificates and at the End Select Add Certificated as given in the Screen shot below as 1,2,3.

6. This will open a Popup screen for you to upload your certificate, I hope during these time you have not copied anything else in your Clipboard and you still have the path copied which I have mentioned in Step 4.

7. Select your Subscription and then Select Browse and paste the Path which you have copied earlier in the File Name of Select file dialogue. Select Open. and then Select Ok from the Popup menu given below.

8. So this will create a certificate on Windows Azure Server, and Create a Subscription Id for you Copy the Subscription Id using Ctrl+C, remember right click will not work since this is Silverlight Interface.

9. Now come back to your Visual Studio IDE with once you copied the Subscription Id from Windows Azure Site. and paste in the Step 3 of the popup screen as given below. Enter any desired name for your credentials and Click on Ok button.

If you get the Error: No Subscription found. As given in the screen below, this means either you have not created the Storage Account or Hosted Service or may be both.

To get this things working you have to go to Windows Azure Site and Create a Hosted Service with Do not deploy option selected, as we want to deploy using our Visual Studio IDE.

Similarly you have to create a Storage Account too. Hope after doing this you may not face any other issues. So once you have done with these things then

Again you have to Start from Step 1 above, but instead of Adding a new Certificate you can select the one which you have already created. Skip the Steps for uploading the certificate on Windows Azure Server and try again Deploying your application.

10. Now you are almost done, this will take you back to the screen which you got in Step 1, now click on Ok button.

If you get a prompt like the one below, there is nothing to worry, this simply tells you that your Hosted Service is already occupied with another deployment which you may have already done before, this this wizard will just replace you existing application with this one. You have to select Delete and Continue.

11. Once you select delete and continue your deployment process starts here, and you can see the progress in Windows Azure activity log.

You can also see the progress of your deployment using your Server Explorer or Directly in your Windows Azure Site.

 

Once finished your application is ready to browse from Windows Azure Staging Environment. The deployment wizard will provide you with a URL which you can use to browse you latest deployed application. Your URL may look like something like this http://f0f8a62a71fe43158bf43af14b11f5b5.cloudapp.net/, you can find in the Windows Azure Activity Log or you can also find this information in the Windows Azure Site.

Hope this helps.

Read More