Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Compile SASS When Deploying to Azure From a Git Repo

DZone's Guide to

Compile SASS When Deploying to Azure From a Git Repo

Automatic deployments with Git, even where custom build commands are needed in the pipeline.

· Cloud Zone
Free Resource

Are you joining the containers revolution? Start leveraging container management using Platform9's ultimate guide to Kubernetes deployment.

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!

Using Containers? Read our Kubernetes Comparison eBook to learn the positives and negatives of Kubernetes, Mesos, Docker Swarm and EC2 Container Services.

Topics:
css ,azure

Published at DZone with permission of Colin Bacon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}