Using NPM

Let's now import some libraries that we already know of and import them into our project!

Starting Fresh

Create a new folder anywhere and open PowerShell.

In order to import something via npm, you have to use the install or i command, like so:

npm i bootstrap

All the stuff that you can download like this, has their own page on npm. You can find Bootstrap there too, along with a lot of information regarding the project.

After it's done downloading and the console looks something like this:

PS C:\Test> npm i bootstrap

added 2 packages, and audited 3 packages in 8s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Test>

Then it has finished succesfully.

You might wonder - why did it install 2 packages if I only asked for Bootstrap?

It essentially looked at what other packages Bootstrap needs and got those automatically!

In addition, if npm detects that 2 packages use the same 3rd package, it will just reference the same package, instead of downloading the 3rd one twice.

That's the magic of npm. It makes getting and managing plugins/libraries/packages a breeze.

What is the "node_modules" Folder?

Looking at the folder after you succesfully installed bootstrap, you will notice a new folder and two JSON files.

node_modules

Is the folder containing all of your packages for the current folder. Feel free to open it and look around.

For me, the folder structure looks like this:

node_modules
    ├───@popperjs
    │   └───core
    │       ├───dist
    │       │   ├───cjs
    │       │   ├───esm
    │       │   │   ├───dom-utils
    │       │   │   ├───modifiers
    │       │   │   └───utils
    │       │   └───umd
    │       └───lib
    │           ├───dom-utils
    │           ├───modifiers
    │           └───utils
    └───bootstrap
        ├───dist
        │   ├───css
        │   └───js
        ├───js
        │   ├───dist
        │   │   └───dom
        │   └───src
        │       ├───dom
        │       └───util
        └───scss
            ├───forms
            ├───helpers
            ├───mixins
            ├───utilities
            └───vendor

As you see, bootstrap was imported and popperjs too. Notice, that if you just provide npm i bootstrap it will fetch the latest version and the latest version doesn't have jQuery.

package.json

This file only contains the required packages and their versions. Opening this file with a code editor will show you that:

{
  "dependencies": {
    "bootstrap": "^5.0.1"
  }
}

Yup, it took the currently latest version of Bootstrap. But what about the ^? That symbol along with all of the other details are explained in the official npm docs. In short - it says that "don't upgrade to the next major version, but don't downgrade lower either". Here's how a person from StackOverflow explains it.

package-lock.json

This file has more info, but seemingly about the same stuff? As you see the dependendant resources have a flexible versioning system. This file locks in the specific version to actually use and actually resolves the duplicate problem mentioned earlier.

Now What?

Now create a new index.html file if you haven't already and you can import the resources as usual! You just have to specify that the resources are in a "node_modules" folder and then find which version you want.

Let's have a look:

├───dist
│   ├───css
│   └───js
├───js
│   ├───dist
│   │   └───dom
│   └───src
│       ├───dom
│       └───util
└───scss
    ├───forms
    ├───helpers
    ├───mixins
    ├───utilities
    └───vendor

My Bootstrap folder inside the "node_modules" folder looks like the above.

To import Bootstrap properly (or any library/plugin for that matter) you have to look into the "dist" folder, which stands for "distributable". Which means "final" as in the version basically - ready for use in development.

The other files allow you to customize the Bootstrap framework itself. Here's a guide written by the Bootstrap team!

We will get into Bootstrap customization in future posts.

Important!

I hope you haven't picked up the nasty habit of overriding stuff that comes with a framework, like for example - going into the bootstrap.css file to modify something across the entire framework. The next time you update the framework via npm, it will overwrite any changes made to those files.

If not, you're good. Always use your own separate files for changes that you wan't to maintain or go the advanced way and build the custom version of the framework itself.

Closing Thoughts

You should be able now to get a library/plugin from npm onto your computer and import it into your project.

I've skipped some stuff for brevity and not to overwhelm, but be sure that I will go through them. I have to be accurate with the context and how much in detail I go, because learning is a sensitive process.

Always remember, you can always search for a solution to a problem online and odds are that the problem you're dealing with is not exclusive to you. Others have dealt with it and even more people will in the future.