Compile SASS When Deploying to Azure From a Git Repo
Automatic deployments with Git, even where custom build commands are needed in the pipeline.
Join the DZone community and get the full member experience.
Join For FreeMy 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!
Published at DZone with permission of $$anonymous$$, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments