Bootstrap is a mobile-first framework consisting of HTML5, CSS3, and JavaScript code providing a comprehensive set of world-class, responsive web design components. It was developed by engineers at Twitter and then released to the world in August 2011.
The framework includes code to retrofit modern features onto older browsers, a responsive 12-column grid system, and a long list of components (some using JavaScript) for building web applications and websites. It’s meant to provide a strong foundation on which to build your application.
With this introduction to Bootstrap, let’s proceed to set it up.
1. Setting up Bootstrap
The first step is to duplicate the code you created in the previous chapter. If, for example, you created a directory named chap05/notes, then create one named chap06/notes from the content of chap05/notes.
Now, we need to go about adding Bootstrap’s code in the Notes application. The Bootstrap website suggests loading the required CSS and JavaScript files out of the Bootstrap (and jQuery) public CDN. While that’s easy to do, we won’t do this for two reasons:
- It violates the principle of keeping all dependencies local to the application and not relying on global dependencies.
- It makes our application dependent on whether the CDN is functioning.
- It prevents us from generating a custom theme.
Instead, we’ll install a local copy of Bootstrap. There are several ways to install Bootstrap locally. For example, the Bootstrap website offers a downloadable TAR/GZIP archive (tarball). The better approach is an automated dependency management tool, and fortunately, the npm repository has all the packages we need.
The most straightforward choice is to use the Bootstrap (https://www.npmjs.com/package/bootstrap), Popper.js (https://www.npmjs.com/package/popper.js), and jQuery (https://www.npmjs.com/package/jquery) packages in the npm repository. These packages provide no Node.js modules and instead are frontend code distributed through npm. Many frontend libraries are distributed through the npm repository.
We install the packages using the following command:
$ npm install bootstrap@4.5.x –save
npm WARN bootstrap@4.5.0 requires a peer of jquery@1.9.1 – 3 but none
is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none
is installed. You must install peer dependencies yourself.
+ bootstrap@4.5.0
…
$ npm install jquery@3.5.x –save
+ jquery@3.5.1
$ npm install popper.js@1.16.x –save
+ popper.js@1.16.0
As we can see here, when we install Bootstrap, it helpfully tells us the corresponding versions of jQuery and Popper.js to use. But according to the Bootstrap website, we are to use a different version of jQuery than what’s shown here. Instead, we are to use jQuery 3.5.x instead of 1.9.1, because 3.5.x has many security issues fixed.
On the npm page for the Popper.js package (https://www.npmjs.com/package/popper.js), we are told this package is deprecated, and that Popper.js v2 is available from the @popperjs/core npm package. However, the Bootstrap project tells us to use this version of Popper.js, so that’s what we’ll stick with.
What’s most important is to see what got downloaded:
$ ls node_modules/bootstrap/dist/*
… directory contents
$ ls node_modules/jquery/dist
… directory contents
$ ls node_modules/popper.js/dist
… directory contents
Within each of these directories are the CSS and JavaScript files that are meant to be used in the browser. More importantly, these files are located in a given directory whose pathname is known—specifically, the directories we just inspected.
Let’s see how to configure our Notes app to use those three packages on the browser side, as well as set up Bootstrap support in the page layout templates.
2. Adding Bootstrap to the Notes application
In this section, we’ll first load Bootstrap CSS and JavaScript in the page layout templates, and then we’ll ensure that the Bootstrap, jQuery, and Popper packages are available to be used. We have made sure those libraries are installed in node_modules, so we need to make sure Notes knows to serve the files as static assets to web browsers.
On the Bootstrap website, they give a recommended HTML structure for pages. We’ll be interpolating from their recommendation to instead use the local copies of Bootstrap, jQuery, and Popper that we just installed.
What we’ll do is modify views/layout.hbs to match the template recommended by Bootstrap, by making the changes shown in bold text:
<!doctype html>
<html lang=”en”>
<head>
<title>{{title}}</title>
<meta charset=”utf-8″>
<meta name=”viewport”
content=”width=device-width, initial-scale=1, shrink-to- fit=no”>
<link rel=”stylesheet” href=”/assets/vendor/bootstrap/css/bootstrap.min.css”>
<link rel=’stylesheet’ href=’/assets/stylesheets/style.css’ />
</head>
<body>
{{> header }}
{{{body}}}
<!– jQuery first, then Popper.js, then Bootstrap JS –>
<script src=”/assets/vendor/jquery/jquery.min.js”></script>
<script src=”/assets/vendor/popper.js/popper.min.js”></script>
<script src= “/assets/vendor/bootstrap/js/bootstrap.min.js”></script>
</body>
</html>
This is largely the template shown on the Bootstrap site, incorporated into the previous content of views/layout.hbs. Our own stylesheet is loaded following the Bootstrap stylesheet, giving us the opportunity to override anything in Bootstrap we want to change. What’s different is that instead of loading Bootstrap, Popper.js, and jQuery packages from their respective CDNs, we use the path /assets/vendor/product-name instead.
This /assets/vendor URL is not currently recognized by the Notes application. To add this support, edit app.mjs to add these lines:
app.use(express.static(path.join( dirname, ‘public’)));
app.use(‘/assets/vendor/bootstrap’, express.static(
path.join( dirname, ‘node_modules’, ‘bootstrap’, ‘dist’)));
app.use(‘/assets/vendor/jquery’, express.static(
path.join( dirname, ‘node_modules’, ‘jquery’, ‘dist’)));
app.use(‘/assets/vendor/popper.js’, express.static(
path.join( dirname, ‘node_modules’, ‘popper.js’, ‘dist’, ‘umd’)));
We’re again using the express.static middleware to serve asset files to browsers visiting the Notes application. Each of these pathnames is where npm installed the Bootstrap, jQuery, and Popper libraries.
There is a special consideration for the Popper.js library. In the popper.js/dist directory, the team distributes a library in the ES6 module syntax. At this time, we cannot trust all browsers to support ES6 modules. In popper.js/dist/umd is a version of the Popper.js library that works in all browsers. We have therefore set the directory appropriately.
Within the public directory, we have a little house-keeping to do. When express- generator set up the initial project, it generated public/images, public/javascripts, and public/stylesheets directories. Hence the URLs for each start with /images, /javascripts, and /stylesheets. It’s cleaner to give such files a URL starting with the /assets directory. To implement that change, start by moving the files around as follows:
$ mkdir public/assets
$ mv public/images/ public/javascripts/ public/stylesheets/ public/assets/
We now have our asset files, including Bootstrap, Popper.js, and jQuery, all available to the Notes application under the /assets directory. Referring back to views/layout.hbs, notice that we said to change the URL for our stylesheet to /assets/stylesheets/style.css, which matches this change.
We can now try this out by running the application:
$ npm start
> notes@0.0.0 start /Users/David/chap06/notes
> cross-env DEBUG=notes:* node ./bin/www
notes:server Listening on port 3000 +0ms GET / 200 306.660 ms – 883
GET /stylesheets/style.css 404 321.057 ms – 2439
GET /assets/stylesheets/style.css 200 160.371 ms – 165
GET /assets/vendor/bootstrap/js/bootstrap.min.js 200 157.459 ms –
50564
GET /assets/vendor/popper.js/popper.min.js 200 769.508 ms – 18070
GET /assets/vendor/jquery/jquery.min.js 200 777.988 ms – 92629
GET /assets/vendor/bootstrap/css/bootstrap.min.css 200 788.028 ms –
127343
The onscreen differences are minor, but this is the necessary proof that the CSS and JavaScript files for Bootstrap are being loaded. We have accomplished the first major goal—using a modern, mobile-friendly framework to implement a mobile-first design.
Before going on to modify the look of the application, let’s talk about other available frameworks.
3. Alternative layout frameworks
Bootstrap isn’t the only JavaScript/CSS framework providing a responsive layout and useful components. Of course, all the other frameworks have their own claims to fame. As always, it is up to each project team to choose the technologies they use, and of course, the marketplace is always changing as new libraries become available.
We’re using Bootstrap in this project because of its popularity. These other frameworks are worthy of a look:
- Pure.css ( https://purecss.io/): A responsive CSS framework with an emphasis on a small code footprint.
- Picnic CSS (https://picnicss.com/): A responsive CSS framework emphasizing small size and beauty.
- Bulma (https://bulma.io/): A responsive CSS framework that’s self-billed as very easy to use.
- Shoelace (https://shoelace.style/): A CSS framework emphasizing using future CSS, meaning it uses CSS constructs at the bleeding edge of CSS standardization. Since most browsers don’t support those features, cssnext (http://cssnext.io/) is used to retrofit that support. Shoelace uses a grid layout system based on Bootstrap’s grid.
- PaperCSS (https://www.getpapercss.com/): An informal CSS framework that looks like it was hand-drawn.
- Foundation (https://foundation.zurb.com/): Self-described as the most advanced responsive frontend framework in the world.
- Base (http://getbase.org/): A lightweight modern CSS framework.
HTML5 Boilerplate (https://html5boilerplate.com/) is an extremely useful basis from which to code the HTML and other assets. It contains the current best practices for the HTML code in web pages, as well as tools to normalize CSS support and configuration files for several web servers.
Browser technologies are also improving rapidly, with layout techniques being one area. The Flexbox and CSS Grid layout systems are a significant advance in making HTML content layout much easier than older techniques.
Source: Herron David (2020), Node.js Web Development: Server-side web development made easy with Node 14 using practical examples, Packt Publishing.