Add Bootstrap to your Nodejs Project
The Initial Project
Create a simple Node project like the one below.
Create a folder for your project and initialize it as Node
project,npm init -y.
Create the server file, app.js (touch server.js), and other directories
(mkdir views).
Let's install express to configure a lightweight Node server.
npm i express // Already done
We can now create our basic server.
const express = require("express")
const express = require("express")
const path = require('path')
const app = express();
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, 'views/index.html'))
});
app.listen(5000, () => {
console.log('Listening on port ' + 5000);
});
Adding Bootstrap CSS
Using a CDN
Now is the time to modify our index.html so that we can add
Bootstrap CSS.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<title>Hello, the world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container"><h1>Hello, the world!</h1></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/
kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
added two Bootstrap classes: container and jumbotron.
Restart your server and go check if Bootstrap is on the page (just
see if a fluid jumbotron is there).
Using npm
The first thing you have to do here is to install packages, which
are bootstrap and optionally jquery.
npm i bootstrap jquery --save
To make use of these files we have to modify our app.js so that it
will serve them to us.
// app.js
const express = require("express")
const path = require('path')
const app = express();
app.use('/css', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/css')))
app.use('/js', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/js')))
app.use('/js', express.static(path.join(__dirname, 'node_modules/jquery/dist')))
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, 'views/index.html'))
});
app.listen(5000, () => {
console.log('Listening on port ' + 5000);
});
Thanks to express.static() we are able to serve up Bootstrap without
any difficulty.
Now we can make use of Bootstrap in our HTML Pages by just
linking to it as <link rel="stylesheet" href="./css/bootstrap.min.css">.
