Brick.JS

A HMVC style web app development framework for Node.js, The entire Web App is break down into independent bricks.

• CSS in each brick will be modularized and applied to corresponding HTML
• Client-side JS in each brick will be parsed as a CommonJS module.
• HTML templates in each brick can include/extend another brick.
• Server-side JS in each brick will be executed (and context will be injected into HTML tempaltes) when included or extended.

Tutorial

• What's a brick?
• How does Brick.JS modularize your CSS?
• How to write client-side JS?
• How to customize the error page?

For usage details and contribution guide, see: brick.js wiki

The Demo

brick-js/brick-demo is a minimal demo project for brick.js.

To get started:

git clone [email protected]:brick-js/brick-demo.git --depth=1
cd brick-demo && npm install
node app.js

Open http://localhost:3000 !

Minimal Usage

Install brick.js and brick-liquid(Liquid Template Engine, see below):

npm install --save brick.js brick-liquid

var express = require('express');
var path = require('path');
var brickJs = require('brick.js');
var Liquid = require('brick-liquid');
var less = require('brick-less');

var brk = brickJs({
    root: path.join(__dirname, 'bricks')
});

// register engines and processors for brick.js
brk.engine('liquid', new Liquid());
brk.processor('less', less());      // see https://github.com/brick-js/brick-less

var app = express();
app.use('/', brk.express);

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Options

Full Usage

var express = require('express');
var path = require('path');
var brickJs = require('brick.js');
var Liquid = require('brick-liquid');
var less = require('brick-less');

var brk = brickJs({
    root: path.join(__dirname, 'bricks'),
    html: {
        entry: 'index.html',
        engine: 'liquid'        // default template engine,
                                // bricks may specify its own engine in package.json
                                // see: https://github.com/brick-js/brick.js/wiki/a-simple-brick
    },
    server: {
        entry: 'server.js'
    },
    css: {
        entry: 'index.less',
        processor: 'less'       // default CSS pre-processor
    }
    client:{
        entry: 'client.js'
    },
    static: {
        css: {
            url: 'my-custom-url.css',
            file: path.resolve(__dirname, '.build/site.css'),
            comment: '/* brick: %s */',
        },
        js: {
            url: 'my-custom-url.js',
            file: path.resolve(__dirname, '.build/site.js'),
            comment: '// brick: %s'
        }
    }
});

brk.engine('liquid', new Liquid());
brk.processor('less', less({root: path.join(__dirname, 'bricks')}));

root

Type: String

Default: path.join(__dirname, 'bricks')

root is where the bricks are located. Each brick should be a folder consists of files specified by path.

html.entry, css.entry, client.entry, server.entry

Type: String

Default: 'index.html', 'index.css', 'client.js', 'server.js'

Default file name for HTML/CSS/Client-Side-JavaScript/Server-Side-Javascript in the brick folder, see root.

html.engine

Type: Object

Template engine for brick.js. Available Template Engines:

• brick-hbs: Handlebars template engine for brick.js
• brick-liquid: Liquid template engine for brick.js

Template Engine Development Guide: Template Engine Interface

css.processor

CSS Pre-Processor for style files. Available pre-processors:

• brick-js/brick-less: LESS pre-processor for brick.js.

static.css.url, static.js.url

Type: String

Default: '/104097114116116108101.css', '/104097114116116108101.js'

Set this for deployment purpose. Ex: 'http://cdn.anyway.com/xxxxx.css'

static.css.file, static.js.file

Type: String

Default: false

Set this for building purpose. Ex: '/Users/harttle/hello-world/.build/xxxxx.css' When set to false, the css/js file won't be saved.