How do I load bootstrap using npm?

Question

I have a npm project that uses jquery.

var $ = require('jquery');

I also have an index html file that references bootstrap.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>  <script type="text/javascript" src="my-script.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 

Now do I need to a separate load for jquery for bootstrap as it depends on it? I was recently using jqueryify instead of jquery and I did not need the separate load.

Can anyone recommend a loading pattern for bootstrap with use with require?

Answer 1

Bootstrap is now a supported node package by the bootstrap guys.

https://www.npmjs.org/package/bootstrap

What this means is you can now require bootstrap in code. So.

npm install bootstrap --save

npm install jquery --save

foo.js

var $ = require('jquery'); window.$ = $; require('bootstrap'); 

Answer 2

If you have some trouble to use require('jquery'), there is a more simple way to do it. Just redirect node modules folders (without using any require()).

app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap 

And on your views, just use simply :

<link href="/css/bootstrap.min.css" rel="stylesheet"> <script src="/js/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>