We're almost done setting up our environment. In this lesson, we'll add several front-end dependencies that we've been using in previous sections: jQuery and Bootstrap. Fortunately, we can use webpack to manage both.

jQuery

To add jQuery to our project we need to do two things:

1. Install jQuery as a dependency.
2. Import jQuery into the JS files you would like to use it in.

We don't need to make any updates to our webpack.config.js file. To install the npm package for jQuery, use this command:

$ npm install [email protected]

You'll see that a new section has been created in package.json called dependencies and jquery has been added to it. Now that we have a node module for jQuery installed, if we want to use jQuery in a file, we simply need to import it into that file:

import $ from 'jquery';

(Note that the name of the file may vary depending on which file needs jQuery.)

Don't forget to remove the scripts tag for jQuery from index.html - we will no longer need it.

And that's all we need to do to get jQuery into our projects using webpack.

Bootstrap

Adding Bootstrap is also fairly simple. Since the full version of Bootstrap requires both js and css files, there are a few extra steps. Note that Bootstrap has several dependencies, including jQuery and a library called Popper.js. Popper.js is a tool that calculates the position of an element on the page, including pop ups and notifications. Make sure you have jQuery and Popper.js installed properly first before installing Bootstrap. We'll assume that you followed along above and already have jQuery installed. Let's install Popper.js as a dependency using npm:

$ npm install [email protected]

Now we're ready to add Bootstrap. We're going to use the same steps as we did above to install the js files for Bootstrap:

1. Install Bootstrap as a dependency.
2. Import Bootstrap into the JS files you would like to use it in.

$ npm install [email protected]

If we open up package.json we can see that both Popper.js and Bootstrap have been added to our list of dependencies:

{
  ...
  "dependencies": {
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
  ...
}

Note that because we haven't pinned versions of these libraries, the versions showing for your project may be later versions. As of now, we don't anticipate later versions of these packages not being compatible with each other.

Now all we need to do is import Bootstrap into index.js so that it will be included in our bundle:

import 'bootstrap';

That takes care of adding the js files for Bootstrap. Now we need to import the css files. We are going to work with the minified css for Bootstrap. To do that we simply add another import statement to index.js:

...
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/styles.css';

Note: In order for both your Bootstrap styles and your custom styles to render properly, make sure to place the styles.css import after the bootstrap import statements. This is exactly what we needed to do with our scripts as well - remember that our custom styles need to override Bootstrap styles where necessary.

With these configurations in place, we can now use jQuery and Bootstrap in our projects.