How to build NodeJS/Express Bootstrap views

In the tutorial, we will show how to create a NodeJS/Express application with Bootstrap views.

Related posts:
NodeJS/Express – Bootstrap Image
Integrate NodeJS/Express – JQuery Ajax POST/GET – Bootstrap view

NodeJs/Express Routes

We will create a NodeJs/Express with Bootstrap views as below structure:


/nodejs-express-bootstrap
	/node_modules
	/views
		404.html
		about.html
		index.html
	app.js
	package.json

We define 3 html bootstrap views ‘index.html’, ‘about.html’, and ‘404.html’.

To handle the routing, we use a built-in function Express Router(), see below code:


var express = require("express");
var app = express();
var router = express.Router();

var path = __dirname + '/views/';

router.use(function (req,res,next) {
  console.log("/" + req.method);
  next();
});

router.get("/",function(req,res){
  res.sendFile(path + "index.html");
});

router.get("/about",function(req,res){
  res.sendFile(path + "about.html");
});

app.use("/",router);

app.use("*",function(req,res){
  res.sendFile(path + "404.html");
});

__dirname variable is global that points to working directory (‘nodejs-express-bootstrap’ folder).

Next, we analyze below segment code:


router.use(function (req,res,next) {
  console.log("/" + req.method);
  next();
});

Above codes will be excuted before other routes. We must pass next() so that next router will get executed.
We use built-in Express function sendFile() to send file(.html) to browser.

app.use("/",router); is used to tell Express to use the defined Routes.

How about to handle non-defined url requests?

-> We define ‘404.html’ file and tell Express to send it to web browser as below code:


app.use("*",function(req,res){
  res.sendFile(path + "404.html");
});

Practice

Setting up Express project

Create folder: ‘nodejs-express-bootstrap’ and init nodejs application.


mkdir nodejs-express-bootstrap
cd nodejs-express-bootstrap

See prompts:


nodejs-express-bootstrap>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodejs-express-bootstrap)
version: (1.0.0)
description: nodejs express bootstrap view
entry point: (index.js) server.js
test command:
git repository:
keywords: nodejs, bootstrap, express
author: JSA
license: (ISC)
About to write to C:\Users\pc\Desktop\nodejs\nodejs-express-bootstrap\package.json:

{
  "name": "nodejs-express-bootstrap",
  "version": "1.0.0",
  "description": "nodejs express bootstrap view",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "author": "JSA",
  "license": "ISC"
}


Is this ok? (yes) yes

Now we have an ‘package.json’ file in folder ‘nodejs-express-bootstrap’ with content as below:


{
  "name": "nodejs-express-bootstrap",
  "version": "1.0.0",
  "description": "nodejs express bootstrap view",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "author": "JSA",
  "license": "ISC"
}

Installing Express


$npm install express --save

-> see ‘package.json’ file:


{
  "name": "nodejs-express-bootstrap",
  "version": "1.0.0",
  "description": "nodejs express bootstrap view",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "author": "JSA",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  }
}

NodeJs/Express Bootstrap Application

Bootstrap Views

– Create folder ‘views’ in ‘nodejs-express-bootstrap’ folder. Then create ‘index.html’ file in ‘views’ folder as below content:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/about">JSA</a></li>
    </ul>
  </div>
</nav>
  
<div class="jumbotron text-center">
  <h1>JSA NodeJS/Express Bootstrap Page</h1>
  <p>This is a responsive page! You can resize the page to see affect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h3>Express</h3>
      <p>JSA uses Express framework and Bootstrap to build a demo web application.</p>
      <p>Express.js is a web application framework for Node.js, it is free and open-source software under the MIT License.</p>
    </div>
    <div class="col-sm-6">
      <h3>Bootstrap</h3>        
      <p>Bootstrap is a free front-end framework for faster and easier web development</p>
      <p>Bootstrap includes HTML and CSS based responsive design templates</p>
    </div>
  </div>
</div>

</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li class="active"><a href="/about">JSA</a></li>
    </ul>
  </div>
</nav>
  
<div class="jumbotron text-center">
  <h1>Who We Are</h1>
  <p>
	We are passionate engineers in software development by Java Technology & Spring Framework.
  </p>
  <p>
	We focus on how to do things that can both respect users and make money. We exist because you come here to make us exist. We are into a cycle that continuously improves our site, and in the future, our community. We don’t treat our product processes like a short-term business.
  </p>
  <p>  
	We are always here waiting for the voice from you.
	If having any problem or idea, please do not hesitate to contact us via the page.
  </p>
</div>
</body>
</html>

404.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/about">JSA</a></li>
    </ul>
  </div>
</nav>
  
<div class="jumbotron text-center">
  <h1>404 Error!</h1>
  <p>PAGE NOT FOUND</p>
</div>
</body>
</html>

Implement NodeJS/Express App.js

In folder ‘nodejs-express-bootstrap’, create file ‘app.js’


var express = require("express");
var app = express();
var router = express.Router();

var path = __dirname + '/views/';

router.use(function (req,res,next) {
  console.log("/" + req.method);
  next();
});

router.get("/",function(req,res){
  res.sendFile(path + "index.html");
});

router.get("/about",function(req,res){
  res.sendFile(path + "about.html");
});

app.use("/",router);

app.use("*",function(req,res){
  res.sendFile(path + "404.html");
});

app.listen(8081, function () {
  console.log('Example app listening on port 8081!')
})

Run & Check results

Start NodeJs server:


nodejs-express-bootstrap>node app.js
Example app listening on port 8081!

Home Page:
-> http://localhost:8081

nodejs-express bootstrap - home page

About Page:
-> http://localhost:8081/about

nodejs-express bootstrap - about page

Error Page:

nodejs-express bootstrap - 404 error page

SourceCode

NodeJS-Express-Bootstrap



By grokonez | April 28, 2018.

Last updated on May 13, 2021.



Related Posts


1 thought on “How to build NodeJS/Express Bootstrap views”

Got Something To Say:

Your email address will not be published. Required fields are marked *

*