Menu
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.
869
Under the folder, copy the extracted files downloaded from bootstrap. Under the head tag of the HTML file, the CSS needs to be linked. The jQuery downloaded should also be copied under the JS file. Make sure that under the project file, the downloaded files and HTML page must be present in that folder.
In this article, we learned how to integrate Bootstrap into our Nodejs project in two different ways. The first way is to use official CDN , the second way is to use npm . This last solution is suitable if you're working locally (and offline).
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web; Node. js: A platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.
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.
Why Not npm
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
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
