v0.0.2 Add Node, Stylus to the project - zhentian-wan/MEANAppsFiles GitHub Wiki

Server

In the server, require sytlus, nib, mergan & body-paraser libs:

var express = require('express');
var stylus = require('stylus');
var nib = require('nib');
var logger = require('morgan');
var bodyParser = require('body-parser');

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';
var app = new express();

Add compile function, view path for stylus:

//compile stylus
function compile(str, path) {
    return stylus(str)
        .set('filename', path)
        .set('compress', true)
        .use(nib())
        .import('nib');
}

// Set view page path
app.set('views', __dirname + '/server/views');
// Set jade
app.set('view engine', 'jade');

//logging
app.use(logger('dev'));

//bodyparser
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

//Use stylus
app.use('/css',stylus.middleware(
    {   src: __dirname + '/public'
        , compile: compile
    }
));

Any request comes in, we want to give public/ dir to handle:

//Any request comes in, will find the same filename file in public dir
app.use(express.static(__dirname + '/public'));

Set index.jade for the default view when visit root/

// All routes handled by this route, give client side to handle
app.get('/', function(req,res) {
    res.render('index');
});

Client

Set up the layout.jade other view to extends, in layout.jade, add css and javascript files. We also define a block called 'main-content', this will be defined in detail in index.jade. Layout.jade just for a structure, detail are defined in other files.

includes/layout.jade:

doctype
html
    head
        link(href="/favicon.ico", rel="shortcut icon", type="image/x-icon")
        link(rel="stylesheet", href="/css/bootstrap.css")
        link(rel="stylesheet", href="/css/site.css")
        link(rel='stylesheet', href="/vendor/toastr/toastr.min.css" )
    body
        block main-content
        //include all the javascript files
        include scripts

views/index.jade:

extends ../includes/layout

block main-content
   section.content  //<section class="content">
      h1 Hello World2