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 jquery --save
Notice that we are using the
--save flag and not the
--save-dev. This lets npm know that we want to use this package for production and development. 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 popper.js --save
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 bootstrap
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
main.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
main.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 48
Last updated more than 3 months ago.