Cleanly remove bower from an ASP.Net 5 project

Question

I'm using the ASP.Net 5 RC, but I don't want to use bower, I want to use NPM to manage all of my dependencies.

I have removed bower.json, removed the bower install command from project.json and specifically removed each package using bower uninstall.

However, it stil shows up in the solution explorer:

Is there any way to properly remove it, or is this just the way ASP.Net 5 is supposed to be used?

Thanks

Paralytic

In general bower is not bad. It can be for example, that you need to use some component, which are published on bower, but not published on npm. I find just not good the default content of .bowerrc file {"directory": "wwwroot/lib"} which informs Visual Studio place all the files from the package installed by bower directly in wwwroot/lib. One can change the content to {"directory": "bower_components"} and to have the same behavior as with npm. One can then use grunt for example for building the wwwroot content. – Vibrate

See the post for more details. – Vibrate

@Oleg, I have read that before, however why not just use npm to manage all dependencies? Surely one package manager is better than two? – Paralytic

I mention the reason shortly before. Bower repository and nmp repositories are two different repositories, where JavaScript packages could be found now. One have to publish separately in both repositories. I started with bower in my first ASP.NET project, but I could not found Angular2 in bower repository (only angular 1.4.x). there are exist event separate GitHub repository https://github.com/angular/bower-angular. I have to use npm. In the same way I found another examples where the package was published only in bower (I can give you examples if you want). – Vibrate

If one uses tools like grunt then one need just have the files locally and one makes the copy to wwwroot as the build task. Thus I decide just use .bowerrc file with {"directory": "bower_components"} for me and to get the packages from any source, where I could find there. I can copy the data from bower_components directory in the same way like I copy the data from node_modules. Npm is my personal favor and I read that bower development could be stopped soon. Nevertheless I prefer to hold both options opened. I publish my components in both repositories. – Vibrate

Cool, good info, thanks – Paralytic

Bower is dying tho and npm3 may be the way forward – Irritability

@Irritability Yeah that's the impression I have too. Any idea why it's a default tool in the new Asp.net? – Paralytic

@Paralytic No idea. Just found out today lol. I guess because the aspnet team is more of a backend than a frontend people. Based on the last aspnet community standup, it looks like they might move to npm3 for rc2 but not sure whether they'd ditch bower. – Irritability

Answer 1

Turns out, the key is to remove the DnxInvisibleContent tag inside ItemGroup in the xproj file.

My ItemGroup section now looks like this:

<ItemGroup>
    <DnxInvisibleContent Include=".bowerrc" />
    <DnxInvisibleContent Include="package.json" />
</ItemGroup>

Paralytic

Answer 2

Once you delete all the packages from bower and remove bower from project then you need to close and reopen vs so that the bower explorer can go away.

that's what worked for me...

Gloze

Answer 3

In my case, I am using Visual Studio 2017 Community Edition. There was an empty Bower folder under the Dependancis folder that appeared with the yellow exclamation symbol. There was no option to delete it by right-clicking and selecting the context menu. But there was a folder named bower_component inside the project folder. This was excluded from the project in solution explorer, so it will only show if the Show All files button is ticked. Deleting this folder automatically removed the Bower folder located under the theDependancies node.

Rensselaerite