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" }?
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
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
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
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
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:
Right-click on the project and Add - New Item
Select the JSON file and name it bower.json
Open the file and type in the following file: {"name": "myproject"}
Create another JSON file that you will only call .bowerrc
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!
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!
I've created an open source javascript plugin. It is located on github public repository. When I want to release new version, I'm doing it with github features. My plugin is also indexed in bower repository. How to inform bower, that I have released new version of plugin?
You can update any bower dependency using the "update" command. See below:
bower update <name>
Where is the name of your bower package/dependency.
However, this is assuming that the semvar range provided in the bower.json configuration file allows the installation of the new (versioned) plugin.
As it is authored by you, I doubt very much it would be an issue.
If the above command doesn't work, you can always un-install it and reinstall it as follows:
bower uninstall <name>
bower install <name> --save-dev //or --save, this depends on how you installed it earlier.
Is there a way to install tweenmax using bower?
I've been looking into angular animations and I noticed the egghead tutorial uses tweenmax but it imports it directly into the html. I want to use bower to import so that I can have my imported packages all managed take advantage of the gulp build process to create the minified vendor script.
It seems that they name tweenmax as GSAP. Correct me if I'm mistaken but I believe this is the same thing esp looking at the main section of the bower file (git repo) which points to tweenmax. Thus, I installed using:
bower install gsap --save
Situation I have is described here: How to resolve Bower dependency version conflicts?
The problem is that proposed solution does not work. Adding a resolution section to bower.json does nothing and it still requires to choose package version manually on each installation.
But, surprisingly, when I install bower packages though Grunt (with grunt-bower-task), it just works, even without resolutions.
I have the latest bower version (1.4.1 for now).
Does anybody know what's going on and is it possible to make bower to install without manual resolution?
You can use "--save" or "--save-dev" when you install and resolve these conflicts - in this way, bower will update accordingly the json file. Next time when you run bower install, bower will read the written sections and will not ask you any more.
No need for manual edits - unless you know what you're doing.
I've created an issue/question about this on
Github but it didn't
receive any attention, except just more people wondering the same
thing, so I decided to try my luck on StackOverflow.
Q: How do you update your bower ?
My problem:
I had Packery 1.0.6 Installed and when I ran bower update it just scanned the directories and didn't update anything at all.
Then I edited the bower.json file and removed Packery 1.0.6 from dependencies and ran:
bower install packery
That confused bower a little, and it asked me which version I wanted - I selected 1.1.2 and now I have 1.1.2.
Why didn't it update to 1.1.2 in the first place ? How can I trust Bower that I have the latest version of everything installed ?
On top of that, running bower update packery doesn't work as well. I thought bower is supposed to be the magical package manager that takes out the hassle of keeping my packages up to date, but as it turns out - it doesn't do much besides installing new packages...
Bower will automatically install your packages with the notation ~x.x.x. It's based on Semantic Versioning and it's package notation.
It doesn't update everything, because it will respect your app's requirements. In your case:
~1.0.6 := >=1.0.6-0 <1.1.0-0
The change from the ~1.0 to ~1.1 could potentially be breaking, and Bower is not willing to update you package unless you are ok with it. Consider it more of a protection.
If you have your bower.json file set as
>= 1.0.6
It should get you nothing less than 1.0.6.
Check out the ranges section on this page.