Getting MEAN: Adding Bootstrap

In order to make our application run well on all devices with a minimum of effort, we will be using Twitter’s Bootstrap framework.

Creating new git branch

As usual we will begin by creating a new branch of our development – based on the previous one:

lth@ncpws04:~/src/notes$ git branch bootstrap
lth@ncpws04:~/src/notes$ git checkout bootstrap
Switched to branch 'bootstrap'

We can now install bootstrap using npm:

lth@ncpws04:~/src/notes$ npm install bootstrap@4.0.0-beta --save
npm WARN bootstrap@4.0.0-beta requires a peer of jquery@>=3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.0.0-beta requires a peer of popper.js@^1.11.0 but none is installed. You must install peer dependencies yourself.

+ bootstrap@4.0.0-beta
added 1 package in 1.892s

Notice the warning here. We will be using Bootstrap v4.0 and that one require two additional modules. Let’s install those as well:

lth@ncpws04:~/src/notes$ npm install jquery popper.js --save
+ jquery@3.2.1
+ popper.js@1.12.5
added 2 packages in 2.349s

We now got our dependencies sorted, so let us tweak our index.html to include bootstrap. First in the header load the stylesheet:

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>

Also required is a bit of Javascript, which should be loaded at the end of the body:

<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Our complete index.html now looks like:

<!DOCTYPE html>                                                                                                                                                                                                      
<html>                                                                                                                                                                                                               
    <head>                                                                                                                                                                                                           
        <title>Notes App</title>                                                                                                                                                                                     
                                                                                                                                                                                                                     
        <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>                                                                                                            
    </head>                                                                                                                                                                                                          
    <body>                                                                                                                                                                                                           
        <p>                                                                                                                                                                                                          
            Hello World!                                                                                                                                                                                             
        </p>                                                                                                                                                                                                         
                                                                                                                                                                                                                     
        <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>                                                                                                                        
        <script type="text/javascript" src="node_modules/popper.js/dist/umd/popper.min.js"></script>                                                                                                                 
        <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>                                                                                                               
                                                                                                                                                                                                                     
    </body>                                                                                                                                                                                                          
</html>                                                                                                                                                                                                              
<!--+                                                                                                                                                                                                                
    | vim: ts=4 et nowrap autoindent                                                                                                                                                                                 
    +-->

You may remember from the previous section that we only serve static files located in the src directory. In order to make our server serve the static files from node_modules, the following line should be added to server.js:

app.use("/node_modules", express.static("./node_modules"));

The complete server.js now looks like:

/* 
 * Notes Server
 */

var express = require("express");
var app = express();

app.use("/node_modules", express.static("./node_modules"));
app.use(express.static("./src"));

app.listen(8080)

/*
 * vim: ts=4 et nowrap autoindent
 */

As previuos, we run our server with:

lth@ncpws04:~/src/notes$ node server

And the site will now look like:

That is not a lot of difference, but you may notice that Bootstrap have changed the margins and the font.

Let us add a navbar to make it more obvious. The markup for a navbar is described at Bootstrap Component Navbar and it will look something like:

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Notes</a>
</nav>

We should also wrap our main section in a container. The final index.html will look like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Notes App</title>

        <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
    </head>
    <body>
        <header class="mb-3">
            <nav class="navbar navbar-dark bg-primary">
                <a class="navbar-brand" href="#">Notes</a>
            </nav>
        </header>

        <div class="container-fluid">
            <p>
                Hello World!
            </p>
        </div>

        <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="node_modules/popper.js/dist/umd/popper.min.js"></script>
        <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    </body>
</html>
<!--+
    | vim: ts=4 et nowrap autoindent
    +-->

And our site now looks like:

Final Commit

Time to commit and move on:

lth@ncpws04:~/src/notes$ git push --set-upstream origin bootstrap
Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (6/6), 979 bytes | 0 bytes/s, done.
Total 6 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To github.com:lbthomsen/notes.git
 * [new branch]      bootstrap -> bootstrap
Branch bootstrap set up to track remote branch bootstrap from origin.

 

1 thought on “Getting MEAN: Adding Bootstrap

Leave a Comment