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
- Checks out the relevant commit.
- Locates the
csprojfile 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
- -s: path to the
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.
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
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
We are going to compile the SASS files after step 2. The first thing to make sure is all
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
- Runs the grunt task in
Now, our deployment script compiles SASS to CSS into the temporary folder before copying it to
I'm a believer in cleaning up after running scripts. Once the everything is compiled, we should delete all the
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
rimraf separately rather than adding to
package.json , as it is only a requirement of the deployment and not the project as such.
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!