/node-js/

Node.js, Express, Jade and static resource.

2014-08-10 13:27:59

I use in this example:

Before start you have to install

nodejs and npm

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

node_modules:

npm install express
npm install jade

bower:

bower install bootstrap

Project structure

server.js


var express = require('express');
var path = require('path');

var app = express();

app.set('view engine', 'jade');
app.set('views', __dirname + '/views');
app.use(express.static(path.join(__dirname + '/public')));

app.get('/', function (req, res) {
    res.render('dashboard');
});

app.get('/form', function (req, res) {
    res.render('form');
});

app.listen(3000);

To expose static resource such as *.css or *.js we have to use app.use(express.static(path.join(__dirname + '/public')));

layout.jade

doctype
html
    head
        title My Title
        link(href='/bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
    body
        block content

dashboard.jade

extends layout

block content
    div.container
        h1 Main title
        h2 Sub title
        h3 Small title

        p This is first paragraph
        p
            | Lorem 1
            | Lorem 2

        div without id
        div#box with id
        #box2 next with id

        div
            span.item-red RED
            span.item-yellow YELLOW

        div
            p
                a(href='http://btbw.pl', target='_blank') btbw.pl
            p
                a(href='http://blog.btbw.pl', target='_blank') blog.btbw.pl

        ul
            li item 1
            li item 2
            li item 3

        section#content
            p ipsum 1
            p ipsum 2
            p ipsum 3

form.jade

extends layout

block content
    div.container
        form(method='POST', action='/')
        div
            label(for='name') Name
            input(name='name', id='name')
        div
            label(for='surname') Surname
            input(name='surname', id='surname')
        div
            label(for='type') Type
            select(name='type')
                option(value='1') Dog
                option(value='2') Cat
        div
            label(for='yes') Yes ?
            input(
            type='checkbox'
            id='yes'
            checked
            )
        div
            input(type='submit',value='Send')