Trying to install Jquery and Underscore using Bower - bower

Question

I am currently going through a tutorial on Pluralsite on how to build a web app. The instructor wants me to install 'underscore' and 'jquery' using 'Bower'. I added bower and edited the bower.json file to add underscore and jquery however both have failed to install and I am not sure why.
I also added them via nuget and that works however I am not sure how to reference the nuget packages in my index.html file. Everything I have read seems to indicate that bower is the better option but at this point getting it to work either way would make me happy.

Answer 1

Without any real detail in your post you can check the following but this may differ a bit. But it's not clear if you actually see an error or whether you just can't see the files?
In Visual Studio 2015 if you open the .xproj file using a text editor you should see the following entries:
<ItemGroup>
<DnxInvisibleContent Include="bower.json" />
<DnxInvisibleContent Include=".bowerrc" />
</ItemGroup>
If you're using VS 2017 then Right Click your Project and click "Edit .csproj" and if you see anything similar to below your bower file is in the wrong location for the default setup:
<ItemGroup>
<Content Include="wwwroot\.bowerrc" />
<Content Include="wwwroot\bower.json" />
</ItemGroup>
Your bower.json should look like this:
{
"name": "asp.net",
"private": true,
"dependencies": {
"underscore": "~1.8.3"
,"jQuery": "~3.2.1"
}
}
When you save the bower.json file it will automatically get the packages.
It sounds to me like you already know this though and the actual getting of the package is failing. Do you know this because there is an error message or because you can't see the files? If you can't see the files check the wwwroot folder for a lib folder or another wwwroot folder and a lib folder within that.
If you have added the bower configuration file to a different location to the base of the project you may end up with the files in a wwwroot folder and the lib folder inside that from where your config file resides.
To use this file in your HTML you add a script tag or find the file in your Solution Explorer window and drag it into your HTML file when it is open and Visual Studio will automatically create the correct script tag and location for the file:
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js></script>
If you look at jQuery in "Manage NuGet Packages" you should see it says "Incompatible: Use Bower instead". But that doesn't stop you from getting it using NuGet and you can locate the files in "$(UserProfile).nuget\packages\" which should mean "C:\Users\.nuget\packages\jquery\3.1.1\Content\Scripts\jquery-3.1.1.min.js" is what you would need to include on your HTML page but browsers tend to block links to the file system now so you would probably be better off using:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
That doesn't resolve your issue because that file could be removed from the host and then your link would fail and therefore it's best to fix the root of the problem but you may need to add a bit more detail to your post to get a clear answer I think but the above may help a bit.

Answer 2

Do you have Git installed for windows?
Try installing Git and then restart visual studio.
I ran into this problem when updating from VS2015 to VS2017.
You should see a folder called 'lib' after you've installed underscore.js.
Hope this helps!

Answer 3

Not sure if you are still having issues with this but it looks like this was a bug in Visual Studio 2017. I was having this same issue on the same tutorial.
Microsoft has since fixed it with their latest release of Visual Studio 2017 (15.3).
Update to the current version and then re-add the packages using bower and it should work correctly.

Answer 4

The bug has returned in VS 2019. Trying to install via NuGet the Jquery packages and I get the Incompatible. Use Bower instead.