Create a Simple Responsive Website using Node, Express, Bootstrap and Jade - Part 2

Before reading this post, please read my previous article Part 1. You can download the code here.

Assuming you are done reading the above article, we proceed with the website creation. Time to set up the express. First create a folder called, SityRoute which is our website directory, anywhere you like, open a command prompt, go to the folder.

Create a file named package.json inside the SityRoute folder, open the file, copy the below content. I am giving you my package.json file so that things will be easy for you, if you are new to npm packages.

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~3.4.8",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "jade": "~1.3.0"
  }

After saving the above file under SityRoute directory, run the following command to set up the dependencies, if you are coming from the .NET site, it is a nuget package kind of stuff. If you don’t know about package.json file, then you got to do a little bit of reading node npm packages and package.json file structure. Above dependencies json object lists out all the required dependencies in order for creation of our project.

npm install 

It will give the following output at the end of the installation, shows the folder structure.

static-favicon@1.0.1 node_modules\static-favicon

debug@0.7.4 node_modules\debug

morgan@1.0.0 node_modules\morgan
+-- bytes@0.2.1

cookie-parser@1.0.1 node_modules\cookie-parser
+-- cookie-signature@1.0.3
+-- cookie@0.1.0

body-parser@1.0.0 node_modules\body-parser
+-- qs@0.6.6
+-- raw-body@1.1.3 (bytes@0.2.1)

jade@1.3.0 node_modules\jade
+-- character-parser@1.2.0
+-- commander@2.1.0
+-- mkdirp@0.3.5
+-- transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
+-- constantinople@2.0.0 (uglify-js@2.4.13)
+-- monocle@1.1.51 (readdirp@0.2.5)
+-- with@3.0.0 (uglify-js@2.4.13)

express@3.4.8 node_modules\express
+-- methods@0.1.0
+-- merge-descriptors@0.0.1
+-- range-parser@0.0.4
+-- cookie-signature@1.0.1
+-- fresh@0.2.0
+-- buffer-crc32@0.2.1
+-- cookie@0.1.0
+-- mkdirp@0.3.5
+-- commander@1.3.2 (keypress@0.1.0)
+-- send@0.1.4 (mime@1.2.11)
+-- connect@2.12.0 (uid2@0.0.3, qs@0.6.6, pause@0.0.1, bytes@0.2.1, raw-body@1.1
.2, batch@0.5.0, negotiator@0.3.0, multiparty@2.2.0)

Since we have mentioned express as our dependency in the above json file, it will install express version 3.4.8 along with other dependencies.

Now let us speed up the stuff. You can use express-generator to generate the scaffolding for our website, like it will create most of the ground work stuff for us like folder structures with some default hello world pages, etc. Here is how to create it.

Run the following command to first install the express-generator.

$ npm install -g express-generator

It will install express-generator globally. We are good with express generator installation. Now we need to create a sample project in which we write our code, because we are going to re-use the same folder structure.

Create a Sample Application

Once you have installed express generator, run the following command from SityRoute directory.

express -c myapp

It will ask for confirmation that destination directory is not empty, do you want to continue, say yes, the following output will be generated.

destination is not empty, continue?
destination is not empty, continue? (yes or no) y

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/user.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=my-application ./bin/www

This creates a folder SityRoute with all the necessary default code in it, by default, express generator sets the templating engine to jade engine. By now, you should have folder structure similar to the below under SiteRoute folder.

.

Read the next post here - Part 3 [^].