Bower replacement in Visual Studio 2017 ASP.NET MVC Core Template

Bower is actually dead.

Microsoft have a lightweight and currently under the radar solution to this called Library Manager (LibMan).

It's a stripped down json based solution, with a very simple UI - that gives you control over which files to download (no more downloading hundreds of files when you just need 1).

Mads Kristensen did a great little intro to the preview at Build 2017. (the video should start at the correct place around 43 mins).

At the time of writing this it's still in preview - but due to be released with Visual Studio 15.8.

If you'd like to try it before that you can grab it from the GitHub Repo or Visual Studio Marketplace - instructions in the solution to this question

You can still use npm etc - though here are Microsoft's reasons for using this instead (or as well as) - from the Visual Studio Marketplace:

Reasons for using this extension

  • For apps not currently using another package manager
  • For projects where you think Bower and npm are overkill
  • For developers that don't want to use Bower or npm
  • For developers that values simplicity in their tools
  • For using custom or private packages/files
  • For ASP.NET Core apps where NuGet can't install content packages

We found bower to be tricky to get setup, npm is well supported and packages can be installed using the Package Installer from Mads Kristensen, this also works well with the Bundler & Minifier extension, from the same developer for copying the relevant files from the node_modules folder to where you want them.

https://github.com/madskristensen/BundlerMinifier

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller


Bower is dead. The team of bower is refering to Yarn (an addition on NPM).

Since Visual Studio has some NPM support, I would go for it.

Create in the root of your project a package.json (Todo so, right click your project, add item and search for NPM. You will find a npm Configuration File):

{
  "name": "SomeName",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.7",
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "jquery-ajax-unobtrusive": "3.2.4",
  }
}

Everytime you make changes to the json file, simple press CTRL + S. Visual Studio automaticly calls NPM and restores the packages. Also note, you have intellisence for the package names and version numbers.

After migrating myself, I can not remember to not find a package on npm. But if it's the case for you, note you can reference a github repository directly.

The depenencies are saved to node_modules folder. That's for the new package manager.

Now you have the problem you need to bundle it for release (which you should have done with bower too). Bundeling is the process of combining your Javascript/CSS/Image assets to a single bundle.js, bundle.css, sprite.svg. These should be copied to the wwwroot folder.

For doing so, we have a few options (I will only link to a few, since this would explode the scope of the question):

  • Webpack
  • Gulp
  • Grunt