Custom Deployment to Azure Websites

Question

I recently started using Gulp.js to package all my CSS and JavaScript into single files, which I then include in my web app. My web app is written in Python (using Flask).

I obviously don't want to track the Gulp output CSS and JS files using git (since they're build output files).

I deploy my website to Azure Websites using push to deploy. That is, I simply run git push azure master and Azure automatically figures out that I'm using Python, sets up virtualenv, installs pip dependencies and so on. This article describes how to set this up.

This process works great, but now that I've started using Gulp, I want to ensure that the concatenated JavaScript and CSS files are also produced on the server side whenever I deploy the website.

Moreover, in the future, I would like to have Azure run all the tests upon deployment, and only successfully deploy if they all pass.

Sadly, I have yet to find a satisfying solution for this workflow, since I cannot add custom steps to Azure's automatic deployment process.

I have tried writing a custom deployment script using Kudu (as suggested by this blog post), but doing so disables all the automatic steps Azure normally does; running azure site deploymentscript --python only generates a very basic Kudu deployment file which doesn't handle reading in the web.config file, setting up virtualenv or installing the dependencies. I found no documentation regarding how to do this myself; I have use the default, automatic Azure deployment script (which gets generated server-side when I push the code, so I cannot access it myself) because otherwise stuff like virtualenv and pip dependencies aren't handled.

Is there any workaround available so that I may customize my deployment script (e.g. to run Gulp) while still correctly deploying Flask?

Answer 1

Since Kudu is open source and available on GitHub, I have brought up this problem in its issue tracker (link, for anyone interested). The code owner vas very helpful and pointed me towards a solution.

1. Access the site's Kudu Services at: yourwebsite.scm.azurewebsites.net.
2. Click Tools > Download Deployment Script and get the deployment script Azure generated for your code (this isn't limited to Flask apps).
3. (Optional) The script is a Windows batch script. I ported it to Bash, because I'm more familiar with it and Azure Websites supports it as well.
4. Add custom stuff to your liking: build stuff using Gulp/Grunt, run tests and fail the deployment (exiting with nonzero error code) if any fail, etc. You should also remember to first check whether stuff like Gulp/Grunt is installed using npm and the appropriate package.json file.
   • note that you should only mark the deployment as failed before KuduSync has a chance to copy your new files from the repository, since otherwise they'll end up in your web root folder even though e.g. your tests have failed.

Here's the fragment of my code handling Gulp.js, for anyone who's interested. Look at the script generated by azure site deploymentscript --node for examples on how to select the correct Node and npm versions:

selectNodeVersion
echo "Invoking \"$NPM_CMD install\"..."
eval $NPM_CMD install
exitWithMessageOnError "Could not run 'npm install'.  Do you have the necessary privileges?"
echo "Finished npm install."

# The path doesn't seem to get set OK.  Use this hack to run gulp.
GULP="node_modules/gulp/bin/gulp.js"

echo "Running gulp..."
"$GULP" production
exitWithMessageOnError "Could not run 'gulp'.  Did 'npm install' run OK?"
echo "Finished gulp."

Don't forget to actually add a package.json file containing all the necessary Gulp dependencies to your project. Azure provides Node.js (and npm) but not Gulp.js. Hope this helps!

P.S.: Do note that this whole process is a bit hacky and that the completely correct way to do this is by using a continuous integration agent.