Octopack with Cassette
Getting your bundles packaged via Octopack
May 13, 2014Recently at work we started doing some research on Octopus Deploy to automate our deployment procedures so the process is defined and easily repeatable. One of our applications required a bit of a tweak since we utilize the asset bundling library Cassette and the msbuild target.
Sample Asp.net application
To get started I simply crated a default asp.net web application and added in a few js and css files to simulate assets required for our web application.
OctoPack
The first package we need to install is octopack which is a package used in octopus deploy that helps create nuget packages for our deployment process.
Install-Package OctoPack
Cassette
Since we are using cassette to bundle our application the next package we need to install is of course cassette.
Install-Package Cassette.Aspnet
Cassette MSBuild
In our example we are also going to use the msbuild package to cache our bundled assets in the cassette-cache
folder of our web application.
Install-Package Cassette.MSBuild
Setup bundles
Now that we have our nuget packages installed we need to setup our bundles for cassette. The first thing we need to do is create our bundle configuration.
using Cassette;
using Cassette.Scripts;
using Cassette.Stylesheets;
namespace Octopack.Cassette
{
public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
{
public void Configure(BundleCollection bundles)
{
bundles.Add<StylesheetBundle>("css");
bundles.Add<ScriptBundle>("js");
bundles.Add<ScriptBundle>("lib");
}
}
}
After the bundle configuration is taken care of we need to write those bundles to the page
<%
Bundles.Reference("css");
Bundles.Reference("lib");
Bundles.Reference("js");
%>
and in the body
<%:Bundles.RenderScripts() %>
Run OctoPack, get the nuspec
Now that we have everything setup it is time to get our nuget package setup via octopack. I found the easiest way to get started is to run octopack which will automatically generate a nuspec
file.
msbuild .\Octopack.Cassette.sln /t:Build /p:RunOctoPack=true
When the command finishes you can find the nuspec
file under the following path:
..\Octopack.Cassette\obj\octopacking\Octopack.Cassette.nuspec
Modify the nuspec
I moved the nuspec
file from that path to the root of the application and adjusted the <files/>
element to include the cassette-cache
folder that is generated by the cassette msbuild target.
<package>
<metadata>
<id>Octopack.Cassette</id>
<version>0.0.0.0</version>
<authors>markcoleman</authors>
<owners>markcoleman</owners>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<description>Octopack with Cassette.MsBuild</description>
<releaseNotes></releaseNotes>
</metadata>
<files>
<file src="cassette-cache\**\*.*" target="cassette-cache" />
<file src="Views\Web.config" target="Views\Web.config" />
<file src="js\**\*.*" target="js" />
<file src="lib\**\*.*" target="lib" />
<file src="css\app.css" target="css\app.css" />
<file src="index.aspx" target="index.aspx" />
<file src="Web.config" target="Web.config" />
<file src="bin\*.*" target="bin" />
</files>
</package>
Correcting the order
The final step is making sure the cassette target runs before the octopack target which can be done by adding a BeforeTargets attribute to the bundle target which will ensure that this will run and generate the cache folder before the octopack target runs.
<Target Name="Bundle" AfterTargets="Build" BeforeTargets="OctoPack">
<Exec Command=""$(msbuildtoolspath)\msbuild.exe" $(ProjectDirectory)cassette.targets /p:OutputPath=$(OutputPath) /t:Bundle /nr:false" />
</Target>
The result
After everything is bundled together we end up with a nuget package with everything that is required to deploy our application including the cassette cache bundle.
Conclusion
I will have to say I am loving what Octopus is doing for us in making our deployments easier. It also is to incorporate to existing build targets to get exactly what you need packaged into your nuget package.
Cover image credit: http://facebook.com/RodrigoMoraesPhotography