How Does One Include Bootstrap in Node Project
I have a MEAN stack project that was scaffolded using the basic npm command. At the moment, the Bootstrap is included using CDN:
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
My question is how can I add bootstrap using npm so the project works same as with CDN inclusion. In particular, when I run
npm install bootstrap
a boostrap directory is created within node_modules. However, if I try to include the bootstrap.css from that directory, it breaks the glyphicon fonts. Could anyone advise on how to do it?
P.S. I would also pose the same question regarding the AngularJS itself.
Answer
You can use the browser package manager i.e bower
Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
If you want more Knowledge about which is better and reliable you read this link also.
The main difference between npm and Bower is the approach for installing package dependencies. npm installs dependencies for each package separately, and as a result makes a big package dependency tree (node_modules/grunt/node_modules/glob/node_modules/...), where there could be several version of the same package. For client-side JavaScript this is unacceptable: you can't add two different version for jQuery or any other library to a page. With Bower each package is installed once (jQuery will always be in the bower_components/jquery folder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won't install the package incompatible with one that's already installed.
Bower installation
You just simple install the packages
Syntax
npm install -g bower
You can refer the Doc for complete information.
For Example:
Directory structure
project Folder
+ bower_components
+ bootstrap
+ dist
+ css
+ bootstrap.css
+ jquery
+ jquery.js
+ public
+ index.html
+ app.js
Now you can set the static path in app.js
app.use(express.static(path.join(__dirname, 'bower_components')));
Now you can use simply in your index.html file
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
{{{ yield }}}
</body>
<script src="/bootstrap/dist/jquery/jquery.js"></script>
</html>
Screenshots
Directory structure with app.js file
Normal Html File
