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.
To add jQuery to our project we need to do two things:
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.
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:
$ 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.
Lesson 18 of 46
Last updated more than 3 months ago.