Purpose of installing Twitter Bootstrap through npm

Question

Question 1   What exactly is the purpose of installing Twitter Bootstrap through npm  I thought npm was meant for server side modules  Is it faster to serve the bootstrap files yourself than using a CDN    Question 2   If I were to npm install Bootstrap  how would I point to the bootstrap js and bootstrap css files

User · Answer

Answer 1    Downloading bootstrap through npm  or bower  permits you to gain some latency time  Instead of getting a remote resource  you get a local one  it s quicker  except if you use a cdn  check below answer   npm  was originally to get Node Module  but with the essort of the Javascript language  and the advent of browserify   it has a bit grown up  In fact  you can even download AngularJS on npm  that is not a server side framework  Browserify permits you to use AMD RequireJS CommonJS on client side so node modules can be used on client side    Answer 2   If you npm install bootstrap  if you dont use a particular grunt or gulp file to move to a dist folder   your bootstrap will be located in    node modules bootstrap bootstrap min css  if I m not wrong

User · Answer

Use npm bower to install bootstrap if you want to recompile it change less files test  With grunt it would be easier to do this  as shown on http   getbootstrap com getting-started  grunt  If you only want to add precompiled libraries feel free to manually include files to project  No  you have to do this by yourself or use separate grunt tool  For example  grunt-contrib-concat  How to concatenate and minify multiple CSS and JavaScript files with Grunt js  0 3 x

User · Answer

The point of using CDN is that it is faster  first of all  because it is a distributed network  but secondly  because the static files are being cached by the browsers and chances are high that  for example  the CDN s jquery library that your site uses had already been downloaded by the user s browser  and therefore the file had been cached  and therefore no unnecessary download is taking place  That being said  it is still a good idea to provide a fallback   Now  the point of bootstrap s npm package  is that it provides bootstrap s javascript file as a module  As has been mentioned above  this makes it possible to require it using browserify  which is the most likely use case and  as I understand it  the main reason for bootstrap being published on npm  How to use it  Imagine the following project structure     project  -- node modules  -- public      -- css      -- img      -- js      -- index html  -- package json     In your index html you can reference both css and js files like this    lt link rel  stylesheet  href     node modules bootstrap dist css bootstrap min css  gt   lt script src     node modules bootstrap dist js bootstrap min js  gt  lt  script gt    Which is the simplest way  and correct for the  css files  But it is much better to include the bootstrap js file like this somewhere in your public js   js files   var bootstrap   require  bootstrap      And you include this code only in those javascript files where you actually need bootstrap js  Browserify takes care of including this file for you   Now  the drawback is that you now have your front-end files as node modules dependencies  and the node modules folder is usually not checked in with git  I think this is the most controversial part  with many opinions and solutions     UPDATE March 2017  Almost two years have passed since I wrote this answer and an update is in place   Now the generally accepted way is to use a bundler like webpack  or another bundler of choice  to bundle all your assets in a build step   Firstly  it allows you to use commonjs syntax just like browserify  so to include bootstrap js code in your project you do the same   const bootstrap   require  bootstrap      As for the css files  webpack has so called  loaders   They allow you write this in your js code   require  bootstrap dist css bootstrap css      and the css files will be  magically  included in your build  They will be dynamically added as  lt style   gt  tags when your app runs  but you can configure webpack to export them as a separate css file  You can read more about that in webpack s documentation   In conclusion    You should  bundle  your app code with a bundler You shouldn t commit neither node modules nor the dynamically built files to git  You can add a build script to npm which should be used to deploy files on server  Anyway  this can be done in different ways depending on your preferred build process

User · Answer

If you NPM those modules you can serve them using static redirect   First install the packages   npm install jquery npm install bootstrap   Then on the server js   var express   require  express    var app   express        prepare server app use   api   api      redirect API calls app use      express static   dirname     www        redirect root 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   Then  finally  at the  html    lt link rel  stylesheet  href   css bootstrap min css  gt   lt script src   js jquery min js  gt  lt  script gt   lt script src   js bootstrap min js  gt  lt  script gt    I would not serve pages directly from the folder where your server js file is  which is usually the same as node modules  as proposed by timetowonder  that way people can access your server js file   Of course you can simply download and copy  amp  paste on your folder  but with NPM you can simply update when needed    easier  I think

[node.js] Purpose of installing Twitter Bootstrap through npm?

Examples related to node.js

Examples related to twitter-bootstrap

Examples related to express

Examples related to npm

Examples related to cdn