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:

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:

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

Next, we analyze below segment code:

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:

Practice

Setting up Express project

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

See prompts:

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

Installing Express

-> see ‘package.json’ file:

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

about.html

404.html

Implement NodeJS/Express App.js

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

Run & Check results

Start NodeJs server:

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.



Related Posts


Got Something To Say:

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

*