18

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.

1 Answer 1

19

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 enter image description here

Normal Html File enter image description here

Sign up to request clarification or add additional context in comments.

16 Comments

So, when I install bower, do I then need to create a bower.json file to indicate the packages I want? What's after that?
you can install bower when you external libraries like bootstrap, angluar etc .Yes you create the bower.json which can help to update the libraries whenever you want. It is the front end solution and very easier to use . add the packages name into you bower.json or simply install with the package name.
I am still trying to clarify how to include things into my HTML file. In particular, how would bower management be different from that of npm? After all, npm also creates directories and downloads packages.
downvoted, please answer the op question. He wants to use npm and not bower. update: if you think he should use bower instead of npm , state your reasons
@eenagy i provide the right method how use the thing even i gave all the details. And this is the right method of using the front end library in node js.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.