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

Question

Lately I created a ASP.NET MVC Core project from scratch using Visual Studio 2017 (15.6.3). I discovered the usual JavaScript frameworks:

bootstrap
jquery
jquery-validation
jquery-validation-unobtrusive

But unfortunately all Bower support is gone! There's no bower.json, no .bowerrc and no "Manage Bower Packages..." anymore:

What's wrong with Visual Studio's ASP.NET MVC Core template? Did Bower become obsolete?

Please don't duplicate this question to How to use bower packages in Visual Studio 2017 if Bower is deprecated! I don't like a fix pointing to deprecated technologies.

I'd like to narrow the question: What's the simplest (most intuitive) way to replace Bower by NPM? Like Bower did with its .bowerrc: { "directory": "wwwroot/lib" }?

I described my problem to the vendor: https://developercommunity.visualstudio.com/content/problem/225023/aspnet-core-web.html — Marcel, Apr 04 '18 at 11:00
For client-side frameworks I don't understand why you would want to replace Bower with NPM. Either just add the bower.json manually to get support in Visual Studio or follow my guide here https://stackoverflow.com/a/49713851/58524 (run "bower init" in the command prompt which will create it for you). — MartinF, Apr 08 '18 at 02:47
@MartinF [Shawn Wildermuth](https://wildermuth.com/2018/03/28/Using-UseStaticFiles-with-NPM-Client-Dependencies---Talk-Me-Out-of-It) said: **"Bower is deprecated so for new dev"**. [Bower](https://bower.io/) itself posts: **"...we recommend using Yarn and Webpack for front-end projects..."** I also ask Dr. Holger Schwichtenberg (a popular expert in Germany) last week and he confirmed that Bower is dead. — Marcel, Apr 17 '18 at 09:59
[Library Manager](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-2.2) (built into Visual Studio) makes this very easy. Right click your project > Add > Client-Side Library. Results are saved to libman.json in the project's root directory. — user875234, Jan 17 '19 at 15:17

niico · Accepted Answer · 2018-08-26T02:02:37.937

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

I've just tested "LibMan". It fits my needs best: A lightweight solution to get lightweight JavaScript packages in my .NET web application. It's like in the old days where we download them by NuGet :-) — Marcel, Sep 09 '18 at 18:49
So.. there is really NO way to install LibMan with VS 15.7.5, to be able to use it, on HAVE TO update to at least 15.8 (the initial question was to 15.6.3)? — FredyWenger, Nov 19 '18 at 16:47

Christian Gollhardt · Answer 2 · 2018-08-13T23:34:21.307

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

[Library Manager](https://blogs.msdn.microsoft.com/webdev/2018/04/17/library-manager-client-side-content-manager-for-web-apps/) seems like a better solution. — user875234, Jan 17 '19 at 14:48

score 1 · Answer 3 · answered Mar 23 '18 at 09:22

1

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

answered Mar 23 '18 at 09:22

Mark Redman

24,079
20
92
147

So, I'll kick Bower at all. Do you know when NPM finds the way into Visual Studio's project templates? – Marcel Mar 23 '18 at 09:52
2

I must respectfully but strongly disagree. Why would you use npm to manage client-side libraries in an ASP.NET application? It's not even well supported. `npm install bootstrap --save` doesn't even install bootstrap's dependencies. That's an unacceptable failure for a package manager. Library Manager seems like the correct solution to me. – user875234 Jan 17 '19 at 14:44
@user875234 I agree that Library Manager (libman) is probably the way to go since the Bundler & Minifier extension is not getting updated. We found the package installer works well and using npm means all files are neatly in the node_modules folder and we were managing the location of the all the JS using BundlerMinifier, this was a great solution for us for long while, despite you disagreeing or not. Sometimes its just about how tools are used not what you expect from them. – Mark Redman Jan 17 '19 at 15:35
1

Nothing wrong with this solution - after much research Libman lacks numerous libraries I use - installing with npm then using the bundleconfig.json worked well for me. – Jesse Jun 11 '19 at 19:35

score 1 · Answer 4 · answered Apr 20 '18 at 16:29

1

I would suggest just sticking with npm and forget bower for asp.net core projects,i posted a way of using npm in the link below,

How to use yarn in ASP.Net core MVC to install bootstrap in wwwroot folder

answered Apr 20 '18 at 16:29

Tony_Kara

31
8

score 1 · Answer 5 · edited Nov 22 '19 at 20:27

The solution is to do the following:

Launch VS 2017 and open Tools - Extensions and Updates from the main menu
In the window that opens, select Online on the left menu and type package in the Search box. Download the Package Installer
Close all VS instances and wait a while, the VS installer will start which will install that package
After installation, start VS and your project that should have a bower
Start Project - Quick Install Package from the menu
Select npm and type upgrade -g bower in the field
The previous command will update the locations of the bower packages. Now create the bower.json file manually as follows:
1. Right-click on the project and Add - New Item
2. Select the JSON file and name it bower.json
3. Open the file and type in the following file: {"name": "myproject"}
4. Create another JSON file that you will only call .bowerrc
5. Open the .bowerrc file and type the following:
```
{
    "directory": "wwwroot / lib /",
    "registry": "https://registry.bower.io"
}
```
Right-click the bower.json file and select the Manage Bower Package option.
In the Browse section, type mustache.js and install
When you click on Project in the window you will see Manage Bower Package

That is all!

score 0 · Answer 6 · answered Oct 23 '18 at 02:14

The following blog worked for me, although it claims the issue would be fixed in 15.8 which is the opposite of this issue:

https://blogs.msdn.microsoft.com/webdev/2018/07/05/workaround-for-bower-version-deprecation/

I have updated the .bowerrc file to include:

"registry": "https://registry.bower.io"

I then right clicked the bower.json and Restore packages. Then voila!

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

6 Answers6

Linked