Bootstrap: Can NOT install bower package from Visual Studio / Core 2

[sipi41]

Hello, I'm a newbie... I was trying to install Bootstrap bower package on Visual Studio 2017 but I get an ugly error as follow:

bower bootstrap#v4.0.0-beta.2 EMALFORMED Failed to read C:\Users\ADMINI~1\AppData\Local\Temp\1\WIN-DPN1LB7550E-Administrator\bower\ca4c50b905dc21ea17a10549a6f5944f-5952-MJCiLU\bower.json Additional error details: Unexpected token @

This is what I did to test:

1. I tried to install other packages than bootstrap, for example JQuery and it did complete with no problems.

2. I did start a complete full empty app, just in case something was generating the error and tried to install the package, same result.

I tried to check what was inside bower.json file but it seems something the package create temporarily in the route above and before I can do anything, it display a msg with the error on VS and delete all the files, including bower.json

I have VS community edition and inside I have a file called bower.json also which contains:
{ "name": "asp.net", "private": true, "dependencies": { } } and other file called .bowerrc which contains: { "directory": "wwwroot/lib" }
I can just point to the external CSS and JS but I would like to understand why I cant install this bower package into my project in VS

PLEASE and THANK YOU for your help. :-)

[fchiumeo]

from https://github.com/twbs/bootstrap/releases/tag/v4.0.0-beta.2

Dropped support for Bower as they've deprecated the package manager. See #23568.

[mdo]

Yup, Bower is dead, so we've removed it from v4.

[sipi41]

BUT how can you do that this way? it creates great problems for people like me... I can't install the package using Nugget because it says is incompatible, leaving the only option to Bower... and we can't install it because you decided not to support it... is not that I want to use Bower, but that is what we have in Visual Studio... at least you should notify MS about this...

From what I did read in your forums, a person (which I think is the admin) says: "we are going to remove Bower, how many says yes?" and other people responded "it is not needed anyway", etc etc etc... and then remove Bower and damage the integration with VS... I dont think this is the proper way to do this, I have 2 hours trying to discover what the hell is happening and found your answer just saying "is dead, so we removed it"... whaaaaaat?

[bardiharborow]

@sipi41 As I understand it, the correct migration path away from Bower is to switch to npm. If there is a major environment where this is not possible for a compelling technical reason, then please let us know. Prior notice of this was provided, but if it's severely impacting people we might be able to back it out, however I've yet to be convinced. If you're having Nuget issues, please report that in a separate issue. I'm not sure what you mean by forums, but if you mean twitterbootstrap.net, that's not even slightly official.

[fchiumeo]

visual studio 2017 support npm packages

[sipi41]

Dear @bardiharborow thanks for your attention to this situation. According to what you said in your last message, this is what I think:

1. I don't know the reasons for you to move away from Bower, and I will not question that, the problem I see is that, everybody is teaching to install this package using Bower as suggested on Visual Studio, not NPM, in fact a person like me does not understand exactly what you mean by NPM. If you are moving, probably is the best way to go BUT, please provide a tutorial or any resource that shows how to install or use NPM in Visual Studio 2017, because at this point is frustrating to get a generic error saying "Token expected" and a weird message saying "Bower not supported, use a better way"...
2. The reason to mention Nugget is because from Visual Studio you can install packages using Nugget or Bower, in Core 2, Nugget is used mainly for core features and C# libraries. When you try to install Bootstrap from Nugget a msg appear saying "not supported, please USE Bower instead", as Bower in intended for front-end packages... the problem is Bower is not working with Bootstrap.

Thank you for your Help and please let me know, thank you.

[browner12]

i'm confused, why does it matter what IDE people are using?

use the command line?

[sipi41]

@browner12 The problem is, on VS you can do it IDE or command but it call the same action, it calls the same thing... the result is the same error.... what I did is to include the external CSS and JS files but this is not the way it should work... what I think is... in order for you to remove this from Bower (which is what VS have) you should notify them because they still think you support that and that's what they offer.

In the other hand, I know you are very comfortable with command line BUT, not all people feels comfortable that way, newbies like me don't know how to do that... yes... yes... we would like to learn BUT, there is no tutorial on how to deal with this... everybody just says "use npm" but what is that anyway? how this will integrate with my VS project? is this a program? This is why I'm complaining here, they removed the support and then just a plain error saying "you should move to something else"... is this a pro way to move away?

[fchiumeo]

npm with visual studio
what is npm
use npm

[Johann-S]

As Bower is deprecated and we want to use Lerna to ship multi package in one repository (and bower cannot handle that case) we chose to remove Bower when our v4 is still in a beta state.

..psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects!
(see: https://github.com/bower/bower)

[sipi41]

@fchiumeo Hey Felipe! thanks for your answer. This is what I found (https://webtooling.visualstudio.com/package-managers/npm/) which basically take us to the same thing, same error... Even if I type inside my bower.json (or NPM as you call it) "devDependencies": { "bootstrap": "4.0.0-beta.2" } the result is the same... because VS uses bower.

Now and interesting thing: I was able to install version "3.3.7" with no problems but not the 4 beta.

[mdo]

@sipi41 Bower and npm are two different package managers. They’re a way for us to publish our code for easy re-use across multiple environments. However, they cannot be mixed—bower.json is for Bower while npm requires a package.json.

[sipi41]

exactly @mdo! according to Visual Studio this is it: https://webtooling.visualstudio.com/package-managers/npm/ BUT see what I'm talking about? if that is something different then... how to?

What I'm trying to say is: VS tell people to use Bower... ok, is not working! now according to them, you can do it by using the commands as explained in the URL above... but that does exactly the same process with Bower which leads to the same error... you say "bower is different" then... have any of you tried to install this on VS? I mean, using regular way and using your npm method? what the steps are?

[browner12]

I don't think it's the responsibility of the Bootstrap project to teach people how to use NPM. There's plenty of documentation online if you look for it.

If you're having trouble with the Visual Studio NPM integration, I would submit a ticket to them.

Or maybe now is a good time to start learning the command line, so you are not bound to an IDE and the way they do things.

[sipi41]

@browner12 That was rude! So you think to display a generic msg like "use a better method instead" explains much of what's going on? I don't want to work with a developer like you... it's true is not responsibility of bootstrap to explain what NPM is but, I do consider a better explanation or a link to a discussion board would be fine... sorry we are not smart as you are

[sipi41]

@mdo Thank you... it gave me some light... I found I can install the file package.json on my VS project by adding new file to it... now I did input my packages or the packages I want and I see is doing something but nothing else happens...how to say "execute" in this thing? this is what I get from the bower/npm screen:

PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\npm.CMD" install npm WARN engine [email protected]: wanted: {"node":">=6"} (current: {"node":"5.4.1","npm":"3.3.4"}) [email protected] C:\Users\Guillermo Perez\documents\visual studio 2017\Projects\Chapter3\Chapter3 ├── [email protected] ├── UNMET PEER DEPENDENCY [email protected] - 3 └── UNMET PEER DEPENDENCY popper.js@^1.12.3 npm WARN EPEERINVALID [email protected] requires a peer of [email protected] - 3 but none was installed. npm WARN EPEERINVALID [email protected] requires a peer of popper.js@^1.12.3 but none was installed. PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\npm.CMD" install [email protected] C:\Users\Guillermo Perez\documents\visual studio 2017\Projects\Chapter3\Chapter3 ├── [email protected] └── [email protected] PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\npm.CMD" install

What could be the next step?

[browner12]

calm down. we've explained to you that Bower is basically deprecated. We've explained that NPM is one of the current best practices for package management. We also told you there's plenty of documentation available, more info than your going to get from a Github issue comment. Also, Github issues are for bug reports and feature suggestions, not for general help on how to use things. We have forums and Slack and more for that. I'm trying to direct you to the proper channel.

By your own admission, you are a relatively green programmer, so it's very common to use the IDE tools. I'm assuming you want to grow as a developer, so myself (as an experienced programmer) am suggesting to you that you learn more about the command line, which will help you be a better programmer.

Part of becoming a better programmer is also learning how to search for things (documentation, examples, etc). Asking for someone to just link you the answer is not going to help you get better. Give Google a shot, and read some of the excellent NPM tutorials that are available.

[sipi41]

@browner12 Thanks for the suggestion... I'm new at c# but I have done programs for more than 15 years using vbscript, and one thing I have learned is that we must create programs that an experienced and smart user (like you) can use and a dumb user like me can use too... it has to be intuitive... and I agree, as technology intention is to make things easy not hard... Now talking about easy, is not easy just to put the reference to the CDN files (css and js) than learn console commands? I mean, if you use them everyday and everytime well, you can remember that but otherwise...

I think is Bootstrap fault in part and also VS... Visual Studio should be aware that people are moving out of Bower and NOT to promote this in its shiny new version of Core 2.0... BUT I also think is Bootstrap fault as they do not provide a clear way on "what to do next?"... to fill the Json file with a message saying

@$% Not a Bower package. Use a better package management tool instead. ^&*

does not give a clear idea on what to do, right? for you, as experimented user, immediately think "I will install my package.json on VS, then configure the file, then run the CMD code provided by VS"... (and I know this because I'm reading a little about this npm thing and how it works) but for a person like me (not just me, but anybody staring on this c# business), what should you do with that message?

I think the msg should be changed to "Bower has been deprecated and is not supported anymore. Please use NTP on Visual Studio to install the package, go to [LINK] for instructions"

[myorangeca]

While we are still on the topic, can anyone shine some light here?
https://stackoverflow.com/questions/46854634/moving-from-bower-to-npm-and-using-main-bower-files

[riuson]

@myorangeca

• Package Installer by Mads Kristensen
• Using NPM in VS to get bootstrap and jquery (russian)

[phantom2017-Nov]

OK, I just published an article on Medium - with step-by-step instructions on how to add React to your ASP.Net core projects. Check out the article here (includes support for Bootstrap 4.0 Beta 2):

https://medium.com/@csharpsolutionsuk/how-to-use-webpack-in-asp-net-core-projects-a-basic-react-template-sample-25a3681a5fc2

Github repo: https://github.com/phantom2017-Nov/AspNetCore-ReactTemplate

[ppumkin]

Yea -- they should have never agreed to move to bower.. because now every 5 years they gonna decide to move to another, better package repo manager thing and drop support again. So they should have just stuck with NuGet. It works just fine..

[browner12]

better yet, let's get rid of the package managers, and just copy-paste the code into our projects.

[SteveCostello]

tbh, that isn't far from the truth, @browner12 . Instead of the hell of managing the libraries/versions themselves, now we have package manager configuration hell. It's just a different pain point... but it's still pain.

[browner12]

i hope my sarcasm came across on that last post. should have used <sarcasm> tags.

we are far better off now with package managers than we were before.

[delpher]

How about that? Installing via NuGet is also not supported. So the NPM remains the only option.

The problem is that NPM is not supporting anything other then putting all package contents to node_modules folder.

Sad. I'm using ASP.NET Core 2.0. This requires me to put js/css files in wwwroot folder.
An option would be to use npm with Grunt or Gulp.

BUT. What if, for the development I need unminified files? Should find the way to configure grunt/gulp to put not minified files to wwwroot in development, and minified in release.

This is in deed a configuration hell.

The frustration comes from the fact, that latest version of bootstrap is less accessible and harder to use, than it used to be.

Yes, you can tell, that this is a problem for Visual Studio team to solve, but don't you think that you drop support of bower too early? Wouldn't it be better to wait untill bower will get fully retired and replaced by other means in Visual Studio?

[guidevnet]

@delpher I second this. Me too with the same pain. In my opinion, way too early to drop the support for bower. A configuration hell indeed.

[smiller781]

I have a problem where a coworker opens my project where I used a bower.json to get bootstrap and font-awesome. But when trying to restore the client side dependancies, it says something to the affect of, "bower.json" does not exist in the output window. Has anyone else had this problem? Does anyone know how to fix?

[mdo]

@smiller781 Use a more specific version range. Bower is deprecated and we removed the package with Beta 2 months ago.

@delpher Is the NuGet package still not working? We just released Beta 3 last week.

[smiller781]

@delpher - we upgraded VS 2017 to 15.5.2 and it fixed.

[delpher]

@mdo, @smiller781
It works now, thanks.

[smiller781]

@mdo - great!:)

[XelaNimed]

@delpher call app.UseFileServer() in the Configure method will allow to match all requests from /node_modules to the directory node_modules like this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {

    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseFileServer(new Microsoft.AspNetCore.Builder.FileServerOptions() {
        FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(
            System.IO.Path.Path.Combine(env.ContentRootPath, "node_modules")
        ),
        RequestPath = "/node_modules",
        EnableDirectoryBrowsing = false
    });
}

Now you can use links to scripts and styles that are in the folder "node_modules" like this:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
</head>
...

Unfortunately, when typing the path, autocomplete will not work.

[arunranjan1988]

hi
I am faced same problems core 2.1.1 but some systems add bower pack from window power shell

[bsimser]

I find you're basically between a rock and hard place with client library managed like NuGet. Bower is dead yet NuGet packages will tell you to use it, LibMan was pushed out to VS 15.8 yet if you create a Core 2.1 project on VS 15.7 you end up getting Bootstrap 3.7 with a bower configuration and no way to upgrade it. You can't run LibMan on VS 15.7 easily (I think you can run the command line) so what to do? Right now, until 15.8 becomes a reality and fixes this mess with LibMan, manually copy the files into your wwwroot/lib/bootstrap from the distribution files. This is the place I see if you're living between VS 15.5 (when bower was dropped) and VS 15.8 (when LibMan kicks in).

[jwill9999]

I appreciate Bower is being depreciated however here is a solution for using Bower in Visual Studio 2017 if you feel you need to.

Adding Bower Packages to ASP.Net 2.1

Add Bower Packages

• In Toolbar Project => Quick Install Packages (shortcut => shift Alt 0)
• Choose Bower
• Type in Package Name e.g Bootstrap
• Choose the Version and click Install
• Create in root of solution two files
• Bower.json
• .bowerrc
  

  Create a Bower.json file

{
  "name": "RazorPagesMovie",
  "dependencies": {
    "bootstrap": "4.1.3",
    "jquery": "3.3.1"
  }
}

Add the package names and versions

Create a .bowerrc file

This is the file that is critical as its here we name the path our files are to be made available ( our static files )

{
"directory": "wwwroot/lib"
}

Add the directory to .bowerrc where you wish the files to be made available for development / production.

• You may need to restore packages with dotnet restore in the cli or right click on bower.json and click bower restore packages.
• Look in wwwroot. You should see a lib folder with your packages inside.
• Add the files paths to your script tags within your _Layout.cshtml file
  
  

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy">
</script>

• NB check if you also need to update any css link files or change version references.

asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

[pietskrein]

I want to install Font Awesome to my project. Allready installed Bower (using NuGet packages), but cant't do anything more. Know how to solve this?