Colin Bacon, web developer.

Customising Azure deployment: Compile Sass when deploying to Azure from a Git repo

  • Published:
  • Category: Azure
Customising Azure deployment: Compile Sass when deploying to Azure from a Git repo

This article demonstrates how to set up a deployment script to compile Sass when deploying a .NET Web Application Project from a git repo to Azure.

My source control product of choice is Git and I have previously written about my workflow. I also use Azure. One of the great features with Azure Web Apps is the ability to deploy websites using Git. All I need to type is git push azure master and my website is deployed to Azure. It's great. This article will not cover how to set up your web app to deploy to Azure, there are some great posts out there already.

Deploying from local git repository to Azure websites (w. video)

This article will show you how to customise this process to compile Sass to CSS when you do a git push to Azure.

How it works

Your Azure web app is deployed from a git repository using an engine called Kudu. The deployment is triggered by a post-receive hook. Kudu then:

  • Checks out the relevant commit
  • Locates the csproj file to be built
  • Runs msbuild and outputs to a temp folder
  • Copies the output in the temp folder to wwwroot

For more details see Deployment

Adding the deployment script

To add a deployment script to your web app you need to have node.js installed. Run the following command to install the kuduscript tool:

npm install kuduscript -g

This tool will generate a deployment script for Azure Websites. The command to generate an ASP.NET web app (.NET Framework) is:

kuduscript -y --aspWAP pathToYourWebProjectFile.csproj -s pathToYourSolutionFile.sln

The options in this example are:

  • --aspWAP: ASP.NET web application (path to the .csproj file)
  • -s: path to the .sln file

E.g.

kuduscript -y --aspWAP src\IAmBacon\IAmBacon.Web.csproj -s src\IAmBacon.sln

The command will generate two files in the root of your repository.

.deployment
deploy.cmd

Kudu looks in the .deployment file for a command and runs it if it can find it. If you look in the file it will look like this.

[config]
command = deploy.cmd

deploy.cmd is the deployment script and can be run locally to test changes before committing and running in production.

Running deployment locally

When the script is run locally, the site is output to an artifacts folder created in the root of the repository. Command line NuGet is required by the script to restore packages.

You can install it with chocolatey.

choco install nuget.commandline

Compiling Sass

Before we edit the script it is important to understand the three deployment steps.

Step 1 Nuget packages for the web site are restored

Step 2 The web site is deployed to a temporary folder

Step 3 Kudu copies the site to the wwwroot folder

We are going to compile the Sass files after step 2. The first thing to make sure is all .scss files, package.json and gruntfile.js have the Build Action set to content. If they do not they will not get copied to the temporary folder.

Our new deployment step looks like this.

:: 3. Restore Grunt packages and run Grunt tasks
pushd %DEPLOYMENT_TEMP%
echo Installing Grunt packages
call npm install
IF !ERRORLEVEL! NEQ 0 goto error
echo Running Grunt tasks
call grunt prod
IF !ERRORLEVEL! NEQ 0 goto error

This does the following:

  • changes the directory to the temporary folder
  • installs the node packages in package.json
  • runs the grunt task in gruntfile.js

Now, our deployment script compiles Sass to CSS into the temporary folder before copying it to wwwroot, Yay!

Cleaning up

I'm a believer in cleaning up after running scripts. Once the everything is compiled we should delete all the .scss files, package.json and gruntfile.js. They are no longer needed. To do this I am using rimraf.

The script with added clean up.

:: 3. Restore Grunt packages and run Grunt tasks
pushd %DEPLOYMENT_TEMP%
echo Installing Grunt packages
call npm install rimraf -g
call npm install
IF !ERRORLEVEL! NEQ 0 goto error
echo Running Grunt tasks
call grunt prod
echo cleaning up...
call rimraf node_modules Content\sass package.json gruntfile.js
IF !ERRORLEVEL! NEQ 0 goto error

I install rimraf separately rather than adding to package.json as it is only a requirement of the deployment and not the project as such.

Summary

And there we have it. One Azure deployment script compiling Sass and tidying up afterwards. Git deployments make it super easy to automate your deployment process so you can concentrate on shipping!