11 Jul 2014

Deploying a Bower-dependent Node App on Windows Azure

I recently put together a simple blackjack app using Backbone.js on the front-end and vanilla Node.js on the back-end.

I used Bower for all my front-end package management needs, but found that it was somewhat difficult to get my bower-dependent app deployed on Windows Azure.

Here's a quick walk-through of how to get Azure to run bower install after you deploy your app.

The Setup

(feel free to skip if you already have an app ready to deploy)

1) Create your app.

2) Install the command-line azure tool:

npm install azure-cli -g

3) In the root of your app, initialize the azure deployment script:

azure site deploymentscript --node

This step will create two files in the current directory: .deployment and deploy.sh

.deployment is the file that gets run by Azure when you deploy your site. By default, it simply tells Azure to run the file deploy.sh.

deploy.sh, then, is the file we need to modify to make sure that Azure runs bower install when we deploy.

4) Open deploy.sh in your favorite text editor. Down at the bottom of the file (line 112 as of this writing), you should see something like the following:

# 3. Install npm packages
if [ -e "$DEPLOYMENT_TARGET/package.json" ]; then
  cd "$DEPLOYMENT_TARGET"
  eval $NPM_CMD install --production
  exitWithMessageOnError "npm failed"
  cd - > /dev/null
fi

This code automatically runs npm install on deployment. To run bower install on deployment, we need some very similar code.

5) Copy and paste the following code immediately after the code in Step 4.

# 4. Install bower packages
if [ -e "$DEPLOYMENT_TARGET/bower.json" ]; then
  cd "$DEPLOYMENT_TARGET"
  eval $NPM_CMD install bower
  exitWithMessageOnError "installing bower failed"
  ./node_modules/.bin/bower install
  exitWithMessageOnError "bower failed"
  cd - > /dev/null
fi

6) If you haven't already, make sure all your changes have been saved with git (remember, now that we've gotten Windows Azure to run bower install for us, we do NOT need to include the bower_components directory in our git repo).

7) Publish to Windows Azure with source control

8) Check out your sweet new site--complete with fully-installed bower packages!

That's it! Basically, all we've done is to leverage existing code that Azure already runs to install npm packages, and change it slightly to first run npm install bower, followed by bower install.

Tag

Back to all post