How to develop a responsive Node.js Express website using Bootstrap

step by step tutorial on how to develop a responsive website using Node.js, Express Framework and Twitter Bootstrap

Following my previous tutorial on setting up a Node.js project using Eclipse IDE which incredibly can fast track our web development; I’m gonna show you the steps to build a responsive website using the famous front-end framework Bootstrap.

Prerequisites

I assume that you have basic knowledge about Bootstrap. If not, read more here; and also you already have followed my previous tutorial and your project template is ready.

Node Project Structure

Quick fix for .ejs files syntax highlighting

Open the index.ejs file inside views folder in your project. You will see that the Eclipse shows HTML code inside our ejs file as a plain text and not coloured coded. To fix this open preferences window from Eclipse menu bar; Eclipse > Preferences

Then click on Content Types > HTML

Eclipse Preferences

Next click Add button and in the popup window add the .ejs extension and click ok.

This was one time requirement, from now on Eclipse will treat .ejs files as normal HTML files with proper coloured codings.

Setting up the Views

Under the Project Explorer open index.ejs file and copy & paste the following codes into your index.ejs file.

Adding header section

Create a new file under Views folder and name it header.ejs by right clicking on Views folder and New > file then copy following codes into it. This file will be used as typical html header. The reason we are separating these sections are to make our coding more clean and easier to debug in future.

Click on the Green Run button on Eclipse toolbar to run the Node server then go to http://localhost:3000 to see your changes which should look like this:

landing page

Creating a new route and adding a About page

In order to add a new page to our project like about page we need to first define a routing such as http://localhost:3000/about To do this open app.js file. As you should know this is where we configure the Node.js server. Add the following in app.js file before createServer method:

This is how we command Node server to render a page view. To learn more about this method read the Express documentations. Now that the routing is setup we just need to add the view for the about page. Create a new file under Views folder and name it about.ejs.We’re gonna use the same template as index.ejs to make our about page. Add the following into about.ejs file:

16 Comments

500 Error: ENOENT: no such file or directory, open ‘C:\Users\HP User\workspace\my_website\views\header.ejs’
at Error (native)

I’ve racked my brains trying to figure out this problem and I haven’t found any helpful solutions yet. I don’t have a file called header.ejs anywhere and I’m confused as to why it is searching for that. Also, the class names in my ejs files have yellow squiggly lines under them and have “undefined css class” warnings.

Unfortunately, eclipse is telling me that the jQuery variable is not defined.

If I write those lines directly in index.ejs, the script is successfully loaded. There must be a problem in getting jQuery working in a seperate file, but I can’t figure out which one. Maybe a specific eclipse issue?

Hi, make sure you have installed jQuery as dependencies like “npm install jQuery”
Then you need to load it on top of your client.js file like:
Var jQuery = require(‘jQuery’)
Documentation here:https://www.npmjs.org/package/jQuery

hmm…i am bit lost. after i followed yr direction. i cannot run the navigate to /about. it tells me, Cannot GET /about.
I wondering if i added var about = require(‘./routes/about’); under the var app = express(); and then
added app.get(‘/about’, about.about); under the app.get(‘/users’, user.list);

hmm…i am bit lost. after i followed yr direction. i cannot run the navigate to /about. it tells me, Cannot GET /about.
I wondering if i added var about = require(‘./routes/about’); under the var app = express(); and then
added app.get(‘/about’, about.about); under the app.get(‘/users’, user.list);