Summary

Adding a javascript library to an ASP.NET Core MVC web development project.*

Background

In a recent ASP.NET Core MVC intranet project, I found myself needing a client library for a datetime picker. I don't need package management in my app as most things are handled server-side. I also don't do a lot of JavaScript development, so I haven't spent much time in tools like Grunt or Gulp or {insert hipster package manager here}.

NOTE: The process I used in production targeted .NET Core 2.2, but the demonstration here is targeting .NET Core 3.0 (SDK: 3.0.100-preview6-012264)

I'll be using a few tools to aquire and embed the JS tools needed to add a bootstrap-style datepicker to my application:

• LibMan: "a lightweight client-side library acquisition tool."
• CDNJS: "one of the most famous free and public web front-end CDN services"
• bootstrap-datepicker: "a datepicker for twitter bootstrap"

Step 1: Add the library

There is an extremely in-depth walkthrough from Microsoft on how to manage the packages in Visual Studio, so I won't rehash that here. I highly recommend giving the article a read (should take less than ten minutes) to get a handle on what LibMan is actually doing as well as how to add/restore/delete/uninstall/update the client libraries.

Having said that, let's add bootstrap-datepicker to our project.

Including CSS in your development environment

First, find the css includes for the Development environment in the header.

Next, get the path to your new CSS file

Next, Add the link for your local dev file:

Including the CDN content in your non-development environment

This is where (cdnjs.com) earns it's pay. Search for bootstrap-datepicker on the site:

You'll want to double check here that you are referencing the same version you added with LibMan. If you aren't sure, the LibMan config file is created in the root project folder under libman.json by default.

When you hover over a listed file, a dropdown will appear allowing you to copy text to the clipboard. I've selected "Copy Link Tag" because it includes the Subresource Integrity property.

Now paste that link tag into your header section:

Optionally, you can also add the fallback logic in case CDN ever went down for some reason. If you do this, be sure to reference the minified version of the local CSS file, found as an expansion on the regular CSS file in the webroot folder:

Including the JavaScript Content

Now we'll want to do the same with any JavaScript content we might have. Go through the same process:

1. Add the local development file to development
2. Add the CDN content to non-development environments
3. Optionally add the fallback and tests

Final Steps: Wiring up the DatePicker

Now it's a simple matter of adding the input tag where we want it and instantiating the datepicker and voila!

Wrap Up

For developers who just want to drop in the occasional JavaScript Functionality, LibMan seems like a good choice to get started. As an aside, there are other options for the datepicker. Looking back, I'd probably have chosen the standalone flavor, but this seems to work nonetheless.

Resources

• Use LibMan with ASP.NET Core in Visual Studio from Microsoft
• Subresource Integrity from Mozilla