Compile SASS When Deploying to Azure From a Git Repo

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.

This article will show you how to customize 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 Azure Command-Line Interface (Azure CLI).

npm install azure-cli -g

The CLI contains a script generator tool that will create a deployment script. The command to generate a deployment script is:

azure site deploymentscript [options]

The options needed for this example are:

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

E.g.

azure site deploymentscript --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 the 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 website are restored.

Step 2: The website 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 afterward. Git deployments make it super easy to automate your deployment process so you can concentrate on shipping!