Confused about Node, NPM, Bower, and using it for Bootstrap

Question

I'm trying to learn the latest technologies for web development. I already know HTML, JS, CSS, and server side programming. But I don't understand where Nodejs, npm, and Bower come in.

I want to create a new project. So I created a folder for it. Then I wanted to use bootstrap. So I ran bower install bootstrap. Now I have bootstrap installed in a folder called bower_components. Does this mean, if I want to import Bootstrap, I have to add it like this?:

<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

Or am I missing something. I honestly don't know where to start with these package managers.

Answer 1

bower - for installing client-side libraries/ modules( e.g: jquery, bootstrap, angular etc.), module details generally put in bower.json of project root folder

npm - for installing server-side modules (express, crypto, socket.io, etc.), module details generally put in package.json of project root folder.

In general, the things you install using npm get stored in the folder node_modules and bower puts it in bower_components,

I am assuming you are using express module on node.js server. When you add a line like:

app.use(express.static(__dirname+ '/bower_components'));

Now your HTML files, can use the bower components as

<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

Another option is to edit .bowerrc and specify where the downloaded bower modules must be put...