Hello! I am trying to understand how it's possible to use npm packages like "bootstrap-table" in ASP.NET Core 2. So far, through the tutorials that I found I managed to initialize npm, install bootstrap-table, and that way create the package.json file that
contains the dependencies. The problem now, is that I want to use those packages. As far as I understand, I need WebPack (or something similar ?) in order to move them into the proper place in the wwwroot folder. Is that correct ? And if yes, is there any
good direction or tutorial that someone can give me on that, because whatever I found so far was either not working or so complicated that I could not understand what I was doing.
1) the package contains a /dist folder, which has the files as scripts you can include. you can just copy these files to your own script folder.
2) the package is a module, expected to be included via require or import. in this case you need to use a tool chain to build the source. webpack 4 is the simplest choice as it now supports no config for just bundling.
Pressing save will then add these to the Dependencies > npm folder:
Step 2 - Referencing the packages in your project
Now you need to open bundleconfig.json in the root of your project. If this does not exist right-click your stylesheet in wwwroot>css>site.css and select Bundler & Minifier > Minify File.
Now add this ensuring you add a trailing coma on the line above:
This does look a bit simpler and comes with the GUI to help pick the correct options.
I notice that the instructions are for 2.2 but would this still work on 2.1 as well?
If a new version of a library comes out would you just return to the Add... > Client Side Library and update the version number? Or would it update itself automatically?
I suppose an advantage to this method is that you can use a CDN which isn't possible with the method I posted and everything bundled together although they can be bundled to separate files.
I notice that the instructions are for 2.2 but would this still work on 2.1 as well?
Yes, it should work before LibMan tooling is independent from asp.net core tooling in Visual Studio. In my blog post, I used 2.2 to show the new template which
is different from 2.1. LibMan will copy from CDNJS into the target location wwwroot/lib/your-client-side-library.
robinwilson16
If a new version of a library comes out would you just return to the Add... > Client Side Library and update the version number? Or would it update itself automatically?
You can quickly update or uninstall a library using the light bulb inside your libman.json file. This will helps you to keep up to date easily.
I also updated the blog post for your questions.
Best Regards,
Maher
Twitter : @maherjend
Blog : https://maherjendoubi.io
It looks like LibMan is new as of VS 15.8 and wasn't in VS 15.7.
It does seem a better solution with it putting the files directly into the place they need to go without having to use another tool to move them around.
However I tried to install Bootstrap 4 using this method and couldn't find it (only components of it and addons). It found jQuery ok.
Do you know if it is possible to install Bootstrap using that method?
Sorry for the late response. I accepted your solution as well, which is the one that I am currently trying to use, but I have a question. When we install those packages from LibMan, what do we do with the folders under "wwwroot/lib", like "jquery" and "bootstrap"
? Do we keep them, or we remove them ?
With the information that you provided me, I just changed any references of the default bootstrap-jquery files from _Layout.cshtml to the bootstrap-jquery packages installed by LibMan, and now everything works great without any unnecessary files/folders.
I believe this thread would be a great help to newcomers on the technology, that they are seeking a way to successfully manage their client side libraries.
Member
4 Points
10 Posts
Best way of using npm packages in asp.net core
Aug 19, 2018 09:23 AM|Xamarin|LINK
Hello! I am trying to understand how it's possible to use npm packages like "bootstrap-table" in ASP.NET Core 2. So far, through the tutorials that I found I managed to initialize npm, install bootstrap-table, and that way create the package.json file that contains the dependencies. The problem now, is that I want to use those packages. As far as I understand, I need WebPack (or something similar ?) in order to move them into the proper place in the wwwroot folder. Is that correct ? And if yes, is there any good direction or tutorial that someone can give me on that, because whatever I found so far was either not working or so complicated that I could not understand what I was doing.
Thank you!
Participant
1968 Points
1026 Posts
MVP
Re: Best way of using npm packages in asp.net core
Aug 19, 2018 01:14 PM|maherjendoubi|LINK
Hello Xamarin,
I hope the following blog post could help you :
https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower
Best Regards,
Maher
Blog : https://maherjendoubi.io
Member
4 Points
10 Posts
Re: Best way of using npm packages in asp.net core
Aug 19, 2018 04:58 PM|Xamarin|LINK
Hello Maher,
In your opinion, is there a "cleaner" alternative than those long and complex gulp (or you name it) scripts to make this work ?
Thank you for your time!
All-Star
58464 Points
15788 Posts
Re: Best way of using npm packages in asp.net core
Aug 19, 2018 05:11 PM|bruce (sqlwork.com)|LINK
there are couple types of npm packages
1) the package contains a /dist folder, which has the files as scripts you can include. you can just copy these files to your own script folder.
2) the package is a module, expected to be included via require or import. in this case you need to use a tool chain to build the source. webpack 4 is the simplest choice as it now supports no config for just bundling.
https://webpack.js.org
3) the package does both of above
note: many of the libraries, like bootstrap-table have a CDN to the dist, so no npm required at all:
https://cdnjs.com/libraries/bootstrap-table
Member
19 Points
48 Posts
Re: Best way of using npm packages in asp.net core
Aug 19, 2018 05:55 PM|robinwilson16|LINK
Hello Xamarin
In case it helps this is what I do - in this example I will update the included Bootstrap version from 3 to 4.
First open your .NET Core project or start a new one.
Step 1 - Getting the packages
Right-click the project and select Add > New > Item...
Select Web, scroll to the bottom and select the npm Configuration File.
When clicked the name should change to package.json:
Inside DevDependencies add the following to install/update the packages:
Pressing save will then add these to the Dependencies > npm folder:
Step 2 - Referencing the packages in your project
Now you need to open bundleconfig.json in the root of your project. If this does not exist right-click your stylesheet in wwwroot>css>site.css and select Bundler & Minifier > Minify File.
Now add this ensuring you add a trailing coma on the line above:
{ "outputFileName": "wwwroot/css/vendor.min.css", "inputFiles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "minify": { "enabled": false } }, { "outputFileName": "wwwroot/js/vendor.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ], "minify": { "enabled": false } }This bundles the css files into vendor.min.css and the js into vendor.min.js in the correct folders in wwwroot.
When referencing them you need to reference the vendor js first otherwise any jQuery commands you issue won't be recognised.
I hope this helps.
Robin
Participant
1968 Points
1026 Posts
MVP
Re: Best way of using npm packages in asp.net core
Aug 26, 2018 10:07 PM|maherjendoubi|LINK
Hello Xamarin,
I wrote the following blog post: https://www.maherjendoubi.io/using-cdnjs-with-libman-for-aspnetcore/
It's about another new tool called Library Manager (aka LibMan) which is cleaner tool for installing Client-Side libraries.
Best Regards,
Maher
Blog : https://maherjendoubi.io
Member
19 Points
48 Posts
Re: Best way of using npm packages in asp.net core
Aug 27, 2018 11:16 PM|robinwilson16|LINK
Hello Maher
Thanks for the info on how to do this.
This does look a bit simpler and comes with the GUI to help pick the correct options.
I notice that the instructions are for 2.2 but would this still work on 2.1 as well?
If a new version of a library comes out would you just return to the Add... > Client Side Library and update the version number? Or would it update itself automatically?
I suppose an advantage to this method is that you can use a CDN which isn't possible with the method I posted and everything bundled together although they can be bundled to separate files.
Thanks
Robin
Participant
1968 Points
1026 Posts
MVP
Re: Best way of using npm packages in asp.net core
Aug 28, 2018 09:44 AM|maherjendoubi|LINK
Hello Robin,
Thank you for your feedback.
Yes, it should work before LibMan tooling is independent from asp.net core tooling in Visual Studio. In my blog post, I used 2.2 to show the new template which
is different from 2.1. LibMan will copy from CDNJS into the target location wwwroot/lib/your-client-side-library.
You can quickly update or uninstall a library using the light bulb inside your libman.json file. This will helps you to keep up to date easily.
I also updated the blog post for your questions.
Best Regards,
Maher
Blog : https://maherjendoubi.io
Member
19 Points
48 Posts
Re: Best way of using npm packages in asp.net core
Aug 28, 2018 07:02 PM|robinwilson16|LINK
Hello Maher
Thanks for the reply.
It looks like LibMan is new as of VS 15.8 and wasn't in VS 15.7.
It does seem a better solution with it putting the files directly into the place they need to go without having to use another tool to move them around.
However I tried to install Bootstrap 4 using this method and couldn't find it (only components of it and addons). It found jQuery ok.
Do you know if it is possible to install Bootstrap using that method?
Thanks
Robin
Member
19 Points
48 Posts
Re: Best way of using npm packages in asp.net core
Aug 28, 2018 09:40 PM|robinwilson16|LINK
It's ok I solved it, it is called twitter-bootstrap. I should have thought of that given its origins.
I'm updating my projects to use libman.
Thanks again for your blog.
Robin
Participant
1968 Points
1026 Posts
MVP
Re: Best way of using npm packages in asp.net core
Aug 28, 2018 09:52 PM|maherjendoubi|LINK
Hello Robin,
Here you go :
https://cdnjs.com/libraries/twitter-bootstrap
Best Regards,
Maher
Blog : https://maherjendoubi.io
Member
4 Points
10 Posts
Re: Best way of using npm packages in asp.net core
Sep 04, 2018 03:35 PM|Xamarin|LINK
Sorry for the late response. I accepted your solution as well, which is the one that I am currently trying to use, but I have a question. When we install those packages from LibMan, what do we do with the folders under "wwwroot/lib", like "jquery" and "bootstrap" ? Do we keep them, or we remove them ?
Thank you in advance!
Participant
1968 Points
1026 Posts
MVP
Re: Best way of using npm packages in asp.net core
Sep 04, 2018 06:25 PM|maherjendoubi|LINK
Hi Xamarin,
They come with the template by default and they are referenced in the _Layout.cshtml.
You can delete them if you don't use them but you will get a Web page without any style like the 90s.
Best Regards,
Maher
Blog : https://maherjendoubi.io
Member
4 Points
10 Posts
Re: Best way of using npm packages in asp.net core
Sep 04, 2018 10:28 PM|Xamarin|LINK
With the information that you provided me, I just changed any references of the default bootstrap-jquery files from _Layout.cshtml to the bootstrap-jquery packages installed by LibMan, and now everything works great without any unnecessary files/folders. I believe this thread would be a great help to newcomers on the technology, that they are seeking a way to successfully manage their client side libraries.
Again ... thank you very much all of you!
- Xamarin