Asp.Net MVC Bootstrap Update Broke Bundle

Upgrading Nuget package is always not an easy process. While the packages are downloaded for you, the migration side effects are often obscure. Some packages are not upgraded often and have some recurring issues. Bootstrap is one that doesn’t work well with Asp.Net MVC that it’s easy to forget.
badpath

Using BootStrap is not a problem until you use Asp.Net MVC bundle. The problem you may have is that it will try to get the font from \bundles\fonts\glyphicons-halflings-regular.woff2 instead of \fonts\glyphicons-halflings-regular.woff2. Why does it adds the \bundles\ in front is still not clear but it’s the problem is that the Nuget package comes with -min.css version. The bundle engines try to use these files which cause the issue. The work around is to delete all the .min file. This way, Asp.Net MVC bundle system uses the non minimized version and will do a proper minimized version.

A second solution that I do not like would have been to copy the fonts into a new bundles folder at the root of the website. But, it’s easier to delete and avoid repetition of files than doing so.

Tutorial about how to create your first Nuget package

This is a tutorial about how to create your first Nuget package.
NugetLogo

Part 1 : Setupping basic information of Nuget

The first step is to get Nuget.exe. This is required to create the Nuget package but also to create the first draft of the meta data of the package. It’s open source and can be found at CodePlex.

The second step is to create the meta data package. This is where you specify the name of the application, the version of the Nuget and others information. Another very important section of the meta data is the dependencies list. It allows you the specify other package name and version that needs to be installed before installing your package. To get a brand new meta data file, open a Windows console and type .

nuget spec

This will create a new file like the following one.

<?xml version="1.0"?>
<package >
  <metadata>
    <id>Package</id>
    <version>1.0.0</version>
    <authors>Patrick</authors>
    <owners>Patrick</owners>
    <licenseUrl>http://LICENSE_URL_HERE_OR_DELETE_THIS_LINE</licenseUrl>
    <projectUrl>http://PROJECT_URL_HERE_OR_DELETE_THIS_LINE</projectUrl>
    <iconUrl>http://ICON_URL_HERE_OR_DELETE_THIS_LINE</iconUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Package description</description>
    <releaseNotes>Summary of changes made in this release of the package.</releaseNotes>
    <copyright>Copyright 2013</copyright>
    <tags>Tag1 Tag2</tags>
    <dependencies>
      <dependency id="SampleDependency" version="1.0" />
    </dependencies>
  </metadata>
</package>

For my example, it was to transform the open source project that I have published few weeks ago. What I want to transform is the part that is a MVC template. Here is my transformed file.

<?xml version="1.0"?>
<package >
  <metadata>
    <id>DragAndDropMultiSelectorList</id>
    <version>1.0.0</version>
    <authors>Patrick</authors>
    <owners>Patrick</owners>
    <projectUrl>https://github.com/MrDesjardins/DragAndDropMultiSelectorList</projectUrl>
    <iconUrl>https://raw.github.com/MrDesjardins/DragAndDropMultiSelectorList/master/iconNuget.png</iconUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>This nuget package installs the Javascript, the CSS and the Templates to allow to have UIHint to have special control to drag and drop items from an available list of item to a selected list.</description>
    <releaseNotes>First version</releaseNotes>
    <copyright>Copyright 2013</copyright>
    <tags>drag-and-drop </tags>
    <dependencies>
      <dependency id="jQuery" version="2.0.3" />
      <dependency id="jQuery.UI.Combined" version="1.10.3" />
    </dependencies>
  </metadata>
</package>

You can also use this open source project, the Nuget Explorer, that allow you to edit every meta data properties. It also allow you to publish directly to Nuget once you have an account and a API key.

Part 2 : The content of the Nuget package

The next part is the content of the Nuget package. Create a folder with the name “content”. Everything in this folder will be moved to the solution. This mean if you have inside the folder “content” a folder “Content” and inside this one you have “Images” and you set a file “forward.png” that when the Nuget package is installer, the image will be set at this position. For my example, here is the file structure.

treeNugetPackage

The second step of this part is to have some pre-processing. Nuget allows to change part of every file dynamically. This can be done if you rename your file by adding .pp at the end. For example, I want to use the user namespace for 3 files. I change these three files extension and open them to add the namespace tag.

ppFile

namespace $rootnamespace$.ViewModel.Templates.DragAndDropMultiSelector
{
    public interface ISelectorAvailableItemViewModel<TUniqueIdentifierType, TExtendedValueType>
    {
      TUniqueIdentifierType ID { get; set; }
      string Description { get; set; }
      TExtendedValueType ExtendedProperty { get; set; }
    }
}

As you can see the first line contain $rootnamespace$ which will dynamically change the namespace to the user namespace.

The last step of this part is to add a web.config.transform file to add configuration in the web.config if required. In my scenario, nothing was required so I haven’t added it.

Part 3 : Publish the Nuget package

When everything is setup, it’s time to create the Nuget package. This can be done by using the nuget.exe previously downloaded. You need to execute the .nuspec created by the first step.

nuget pack C:\Users\Patrick\Documents\GitHub\DragAndDropMutltiSelectorList\DragAndDropMutltiSelectorList.nuspec

This will create a file called DragAndDropMutltiSelectorList.1.0.0.nupkg (of course it will be your Nuget name and version).
This can be published to Nuget’s website or your own Nuget repository. To do a fast test, open Visual Studio and add a local folder that has your new Nuget package. This way, you will be able to install any local Nuget package inside this folder. To do, go to Manage Nuget Packages For Solution that is located under Tools>Library Package Manager. Then, click Setting at the bottom of the screen. This will popup the option window for Nuget. Here, you can add your folder.

NugetRepositoryLocal

If you double click your package, it will be installed. This allow you to test your package before publishing it on the web. But, once it’s tested, you can publish it on Nuget.org. This step is very fast. You need to create an account, then you upload the .nukg and that’s it. You can find the package that I just created at this url now : https://www.nuget.org/packages/DragAndDropMultiSelectorList/

Nuget package, how to not commit all libraries to your source control

I am publishing more and more code to GitHub when I am posting blog post to have something to the reader to test. The problem is that if I want to have something that works, I need to have all references published into the source control. This can start to be huge if I have several packages. Nuget gives three advantage to not have these libraries into the source control.

  • Source control include every version of every file within the repository, and binary files that are updated frequently can lead to significant repository bloat and more time required to clone the repository.
  • With the packages included in the repository, team members may add references directly to package contents on disk rather than referencing packages through NuGet.
  • It becomes harder to “clean” your solution of any unused package folders, as you need to ensure you don’t delete any package folders still in use.

But, how can we send a project into a repository and have NuGet knows that it needs to download every references on the first build? This can be done by changing the solution to use NuGet Package Restore. To enable this feature, right click the solution in the Solution Explorer and select Enable Restore NuGet Package Restore.
EnableNuGetPackageRestore
This will create a folder named .nuget with 3 files.nugetfiles

This will install all referenced packages before a project is built, thereby ensuring that all dependencies are available to a project without requiring them to be stored in source control!

Two NuGet Restore Approach

When NuGet Restore is enabled, you have two different option. The first one allow Visual Studio to download automatically the reference. This is the default approach and the recommended one. The second approach is the console one that is more manual.

Automatic Approach

The automatic approach is the default one since NuGet 2.7. When the code is compiled, Visual Studio raises an event that NuGet is hooked to. This allow NuGet in a pre-event to execute itself. NuGet reads the packages.config file and download every package not present. This mean that the first time you get the code that the build is slower. The speed is not reduced because of the compilation but because NuGet downloads every package. The second time you will compile, the speed will be back at only having the source code to compile. Of course, Visual Studio needs to have the option to download NuGet package. This can be found in the Tools>Option menu of Visual Studio.
PackageManagerPackageRestoreOptions

Manual Approach

As we have mentioned, NuGet added 3 files. One is an executable called NuGet.exe that can be called manually to download package from the packages.config. Here is an example of the command you can write to get every files.

nuget.exe restore YourSolutionFile.sln

I recommend you to read the NuGet console command.