Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part2

, 16 Mar 2014
Rate this:
Please Sign up or sign in to vote.
Before reading this post please read my previous article part1 . CodeProject 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 our website directory, any wher

Before reading this post please read my previous article part1 .

here in CodeProject

part1

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 our website directory, any where you like, open a command prompt, go to the folder.

create a file named package.json insde 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 .net site it is a nuget package kind of stuff. If you don’t know about package.json file then you got to do 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, 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 something similar to below under SiteRoute folder.

FolderStructure.

Read next post here part3

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

RamuSangabathula
Architect
India India
I have around 9 years of experience in Microsoft technologies, .Net 2.0,3.5, Asp.net MVC developed small to medium scale products using Silverlight 2.0, Asp.net Ajax technologie and Javascript frameworks.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 16 Mar 2014
Article Copyright 2014 by RamuSangabathula
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid