Installing Bootstrap with NPM

Question

I know how to use npm to install and maintain build tools, but I realize I'm not sure how to leverage it to install frameworks (css or js I'd normally just slap the script/css links in my index.html).

But, let's say I want to use npm. I'd run an npm install bootstrap and npm install jquery, but then I'm not sure what the next step is.

I could then just say <link rel="stylesheet" type="text/css" href="nodemodules/boostrap/dist/css/bootstrap.css"> but that seems clunky and dumb.

I see a lot of people importing stuff like this with require('bootstrap'); but honestly I'm not even sure where to put that.

Could somebody help me fill in these blanks?

Answer 1

A common way to handle this is via grunt tasks, which copy the relevant files out of node_modules, into a more appropriate folder.

This is an excerpt from a copy task which I used for a recent project...

    copy: {
        types: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/@types',
                    src: ['**/*.ts'],
                    dest: 'scripts/typings'
                }
            ]
        },
        jquery: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/jquery/dist',
                    src: ['*.js'],
                    dest: 'Content/libraries/jquery'
                }
            ]
        },
        handlebars: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/handlebars/dist',
                    src: ['*.js'],
                    dest: 'Content/libraries/handlebars'
                }
            ]
        },
        bootstrap: {
            files: [
                {
                    expand: true,
                    cwd: 'node_modules/bootstrap',
                    src: ['dist/js/*.js', 'dist/fonts/*.*', 'dist/css/*.css'],
                    dest: 'Content/libraries/bootstrap'
                }
            ]
        }
    }

There may be more succinct ways to write this, but it works for me.

This allows me to update my website packages by doing the following...

$ npm install
$ grunt copy

The folders /Content/libraries, and /scripts/typings are committed to my application git repo, node_modules isn't. This helps prevent issues if a module become unavailable at some stage in the future. My git repo contains everything required for the site to function.

If for some reason one of these modules was removed from npm, it would just mean I couldn't do upgrades, but my site will still work with the files that my git repo includes.

In my case, I don't actually need node_modules at all in my runtime environment, as I'm not using nodejs. I'm just using npm to manage my application's client-side module dependencies.

Answer 2

This depends on your build configuration but for the sake of this answer let's say you have an app.js file where you import the rest of your styles and scripts and you have a webpack configuration that processes this file. Then you only need to install the following dependencies:

npm i popper.js jquery bootstrap

(popper.js is a bootstrap dependency)

Then you just have to import them in your app.js file like so:

app.js

  window.Popper = require("popper.js").default;
  window.$ = window.jQuery = require("jquery");

  require("bootstrap");

You also need to import the styles of bootstrap of course. You could do that in several ways. Let's say you have an app.scss file for your styles. Then you can do it like so:

app.scss

@import "~bootstrap/scss/bootstrap";