Installing Bower packages when deploying web applications to Azure Web Apps

The Local Git Repository continuous deployment option selected in the Azure Management Portal
Bower allows you to manage client-side dependencies for your web applications. A common practice is not to include them in source control. So how do you deploy them together with your web application to Azure Web Apps?

In my recent article I showed you how you can call your Gulp tasks when deploying your web application to Azure Web Apps. Shortly after I published the article I got a question from Simon J.K. Pedersen:

@waldekm great starting point are you going to extend it with bower and typescript? please :)

— Simon J.K. Pedersen (@simped) December 11, 2015

Even though it's easier than you might think to install Bower packages when deploying your web application to Azure Web Apps, if you make a wrong choice, you will spend hours debugging the deployment process. All for nothing.

What not to do

You might be tempted to include Bower as a dev dependency in your package.json file:

{
  "name": "sample-azure-deployment",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Waldek Mastykarz",
  "license": "ISC",
  "devDependencies": {
    "bower": "^1.7.2",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-webserver": "^0.9.1",
    "run-sequence": "^1.1.5"
  }
}

If you do that and try to deploy your web application to Azure Web Apps using Kudu, it will very likely fail on the npm install step with an error similar to following:

19483 error enoent ENOENT: no such file or directory, rename 'D:\home\site\repository\node_modules\.staging\wrappy-53ef4d36e3c471fa7493e88ab634c5f0' -> 'D:\home\site\repository\node_modules\bower\node_modules\update-notifier\node_modules\latest-version\node_modules\package-json\node_modules\got\node_modules\duplexify\node_modules\end-of-stream\node_modules\once\node_modules\wrappy'  

Although it's not super obvious from the error message it seems like the error has to do with the 260 characters path length limit in Windows which is used to host Azure Web Apps. In order to fix this error you would spend hours trying to flatten Bower's dependency hierarchy. There is however no need to.

Installing Bower packages when deploying web applications to Azure Web Apps

Updated sample project including deploying Bower packages is available on GitHub at https://github.com/waldekmastykarz/sample-azure-deployment

It turns out that Bower is already available on Azure Web Apps. In order to install your Bower packages as a part of your deployment process, the only thing that you need to do is to call Bower as a postinstall step in your package.json file:

{
  "name": "sample-azure-deployment",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "bower install"
  },
  "author": "Waldek Mastykarz",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-webserver": "^0.9.1",
    "run-sequence": "^1.1.5"
  }
}

https://github.com/waldekmastykarz/sample-azure-deployment/blob/d9ce5ac551865628ec8a35a92eafda7b79d4774b/package.json#L8

Next time you deploy your web application to Azure Web Apps using Kudu, it will execute npm install including installing Bower packages as registered in your bower.json file.

Summary

Bower allows you to manage client-side dependencies for your web applications. A common practice is not to include them in source control. When deploying web applications to Azure Web Apps you can leverage Bower, which is already available for you to use, to install your Bower packages as a part of your web application deployment process.

Comments

comments powered by Disqus