-
Notifications
You must be signed in to change notification settings - Fork 7
Quickstart
This article gives a minimal web-app in Brick.JS. It assumes Brick.JS installed. If you do not, head to Installation.
In the previous article Installation, you have created a directory myapp/ holding your project.
Now we'll create an application entry index.js in myapp/ directory:
// file: myapp/index.js
var express = require('express');
var brickJs = require('brick.js');
var Liquid = require('brick-liquid');
var brk = brickJs();
brk.engine('.html', Liquid());
var app = express();
app.use('/', brk.express);
app.listen(3000, () => console.log('listening to 3000'));.engine('.html', new Liquid()) specifies Liquid Template Engine rendering for all template files with '.html' extension.
See: brick-liquid
In Brick.JS, the entire web application is break down into inter-active bricks.
Create myapp/bricks/ directory (Brick Root) to hold all your bricks.
mkdir bricksBrick Root is configurable via
config.root, see https://github.com/brick-js/brick.js#root
It's time to create your first brick!
Make a directory named hello-world, which will hold your first brick:
cd bricks && mkdir hello-worldCreate a router file hello-world/router.js for your brick:
// file: myapp/bricks/hello-world/router.js
exports.url = '/';
exports.get = function(req, res, next){
res.render({
title: 'Hello World',
content: 'This is my first brick!'
});
};-
exports.urlindicates Brick.JS to runhello-worldwhen '/' is requested. -
exports.getdeclares a GET router to resolve template context viares.rendercallback.
Router filename is configurable via
config.router, see: https://github.com/brick-js/brick.js#routerFor more information about Brick.JS Routers, see: REST Routers
Create a template file hello-world/view.html:
<html>
<body>
<h1>{{title}}</h1>
<p>{{content}}</p>
</body>
</html>{{xx}} is one of the Liquid syntax,
xx will be populated with corresponding context variable when rendering.
Template filename is configurable via
config.view, see: https://github.com/brick-js/brick.js#view
Now your working directory should like this:
myapp
├── bricks
│ └── hello-world
│ ├── router.js
│ └── view.html
├── index.js
└── package.json
Change current directory to myapp/ and run node index.js:
$ cd myapp/ && node index.js
listening to 3000
Now visit http://localhost:3000 ! The HTML source for this URL should be:
<html class="brk-hello-world">
<body>
<h1>Hello World</h1>
<p>This is my first brick!</p>
</body>
</html>
class="brk-hello-world"is generated by Brick.JS, see: CSS Widgetization
https://github.com/brick-js/brick.js/tree/master/examples/quickstart
Copyright © 2016 Harttle