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