javascript - Confused about Node, NPM, Bower, and using it for Bootstrap - Stack Overflow

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 e 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_ponents. Does this mean, if I want to import Bootstrap, I have to add it like this?:

<link href="bower_ponents/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.

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 e 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_ponents. Does this mean, if I want to import Bootstrap, I have to add it like this?:

<link href="bower_ponents/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.

• javascript
• node.js
• twitter-bootstrap
• npm
• bower

Share Improve this question Follow edited Jun 29, 2015 at 16:07 Siguza 23.9k66 gold badges5555 silver badges9898 bronze badges asked Mar 14, 2015 at 5:16 AskYousAskYous 4,74099 gold badges5353 silver badges9191 bronze badges 2

• Now your next step is to learn to use gulp.js and to make gulp do all your build steps. That would include copying over bootstrap/dist/css/bootstrap.min.css and all the other css into, say, public/css, and do all the JS and CSS minification and concatenation and make your public/ folder contain something like 6 files (out of 150 that you work with in the project) which you would use for production deployment :) – Zlatko Commented Mar 15, 2015 at 8:56
• @Zlatko Interesting... Thanks! – AskYous Commented Mar 15, 2015 at 8:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 19

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_ponents,

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

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

Now your HTML files, can use the bower ponents 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...