3

Generally I am using CDN (or nuget) for including Bootstrap or other client side libraries to my website

Recently I read about NPM/Bower and other modern package-management tools, and decided to try

After some time of surfing and investigating I am now completely puzzled, how to just download and include bootstrap distrib css/js files to my page like it was....

1 st Try, I install bootstrap with NPM, it downloads whole Bootstrap with all sources/modules and etc to the node_module directory... well, I found distributions in node_modules/Bootstrap/dist folder

now questions:

  • Should I link node_modules/Bootstrap/dist/ css and js files to my site?
  • If yes, should I then deploy whole node_modules folder with website?

  • if No, and I know that npm package is modular and bla bla bla and should be included by require("bootstrap") than lots of other questions

    • is require("bootstrap") node js or some oter js function?
    • should I include some other node packages or js files in order require("bootstrap") to work
    • where should I write require("bootstrap") in html in script tag? create some js and include it or what?

2 nd try, Ok than I understand that npm might be package management for NodeJs server side, and got bower... but again it downloads the same files to another folder bower_components and again same questions...

Arsen Mkrtchyan
  • 49,896
  • 32
  • 148
  • 184

1 Answers1

1

As you mentioned, bower works well for this use case. Change the destination of the bower_components directory as described here How to change bower's default components folder?

then include as you normally would. Do not use the require function since that is for nodejs server side only.

Community
  • 1
  • 1
cs01
  • 5,287
  • 1
  • 29
  • 28
  • yes but it still downloads all bootstrap sources, I want only dist... otherwise should I somehow copy dist to some other public directory? – Arsen Mkrtchyan Jun 12 '16 at 15:54
  • Just reference the path to the dist folder when including the css and js in your html. These paths vary from package to package. There are ways to filter the bower install types as described here http://stackoverflow.com/questions/28619210/configure-bower-to-install-only-dist-folder but they are apparently hacky. – cs01 Jun 12 '16 at 15:57
  • Thanks, what about require(...) if I want to use modular? should I include some other js? – Arsen Mkrtchyan Jun 12 '16 at 16:05
  • You need to use webpack to do that. http://stackoverflow.com/questions/31940533/how-do-you-use-an-npm-library-on-the-front-end-with-webpack. I personally don't do this because I have had transpile errors with a bunch of libraries I was using, but apparently it works for some people. – cs01 Jun 12 '16 at 16:08
  • I finally come to the idea, that for client side better to continue to use CDN than... I wonder if angular 2 will be available in CDN? because mostly I started to use NPM for using Angular 2 – Arsen Mkrtchyan Jun 14 '16 at 20:07