Nodejs on Azure Websites- in minutes – deploying with GitHub

For reasons that will not yet be unveiled I decided to have a look at Node.js yesterday for the first time in almost a year (I did a school project in Node.js as my final project with another student). And I got curious, how easy would it be to set it up on Azure? We used Heroku last time, and it was fairly straight forward. I have however taken quite a liking to Azure Websites, so I decided to give it a go.

Node on Azure websites

I did like I did on my last Azure Websites post, Deploying from local git repository to Azure websites (w. video), with a few changes.

This time I didn’t use a local repository but a remote one. And this was a Node.js application.

Let’s do this!

First, if you don’t have Node.js, go ahead and install it. You can grab it from here http://nodejs.org/ .

After install you might want to grab express.js (web application framework) as well, so do a npm install express –g(globally), create a directory mkdir NodeFun, and install express there as well. Honestly the locally/globally thing with express confuses me- but I was told to do both. Then do a npm install in root folder and watch the magic happen.

node appshould run the app, so if you go to the browser localhost/portnumber you should see the site spinning and purring like a kitten.

All good? Great! Go to GitHub and create a remote repo. Open your favorite gitbash shell and do a git initin the root folder. You now have a local and a remote repository. Set the remote repository with git remote add nameForRemote https://github.com/UserNAme/Repo

Do an add and a commit but wait with the push

git add .

git commit –m “First commit”

Go to Azure Websites, create a trial account if you don’t have one.

Select New, Compute, Web Site, Custom Create

clip_image002[8]

Give the site a name, select region and database (if you have one)

clip_image004

After you click ‘next’ you get to select source control for continuous deployment.

clip_image006

Choose GitHub and authorize Azure Website to access your account. Then select the repository it should be watching for changes, and the branch.

clip_image008

In the background Azure Websites provides a service for us that listens to changes in that repository on that branch, and whenever you, or anybody else, pushes to that branch the service picks it up and kicks of a new deployment with the code on that branch. Here is a diagram I made with love in Illustrator for you.

clip_image010

If you go to the web site url at this point you should get this:

clip_image012

This is because we haven’t done our first push. SO let’s say we were lazy and decided to use the master branch as the deploy branch, we have added and commited, so the only thing left is:

git push nameForRemote master

You should now get:

clip_image013

Do some more changes and some more pushing, say- add bootstrapper for responsive design and add a fantastic button after battling Jade and get this:

clip_image014

Awesome. I know. But this is also just a quick try for Node.js and Azure Websites, and later this week I’ll tell you more about this mission- and there will be code :)

This took me 5 minutes on the slowest WiFi I’ve had in the US, so you should be up and running faster than that.

Comments

Nice!

To avoid npm install -g (global) you can add ./node_modules/.bin to the path

http://stackoverflow.com/questions/9679932/how-to-use-package-installed-locally-in-node-modules

If you're always in the project root in terminal you don't need the npm-exec thingy 

Thank you James :D And so happy to hear from you here :) Hope all is good dear ex-colleague! You know node.js that is for sure :) 

I'm new to Node.js so I got stuck in the Node commands section.  I got things sorted out with the help of this Stack Overflow question:  http://stackoverflow.com/questions/9484829/npm-cant-find-package-json

Thanks for this walkthrough!  It works now. 

I'm having a big issue with continuous deployment with node application that I created in Visual Studio. The changes seem to push fine and my azure console shows the new updated deployments, but the actual website just won't update with the changes. It's kind of driving me crazy cause I can't find a solution anywhere. Have you heard anything about that issue? And I'm using github by the way. 

Nice article. Thanks.
 I just deployed a nodejs web app from my github repo to azure. But..the site shows up as blank in azure. Not sure ..why so..
Checked the log and it appears that there are no errs in deployment. Not sure if I have to tweak any in the default web.config file which is shown at the root of the web app in azure.

The website shows up as blank in azure.. not sure what else to check…
Did u tweak any in the default web.config file which azure adds to the root of the web app? 

Last modified on 2014-03-04