Using Spectrum with Micro

Spectrum can easily be added to a Micro webapp.

For example, we want to use Spectrum in a simple helloworld project. Here is the contents of helloworld/lib/webapp.js.

var micro = require('micro'),
    WebApp = exports.WebApp = micro.webapp(),
    get    = WebApp.get;
    
get('/hello/:name', function (request, response, args) {
    response.ok('text/html');
    return 'hello, ' args.name;
});

Add the code above to the webapp.js and run the website from the project root, with Proton. The -r argument will reload your application, so you can test the changes you make without having to restart node.

proton -r

You can now visit /hello/world in your browser and see the message "hello, world". Let's start adding Spectrum.

Spectrum provides a Renderer which you can render your templates with. We can use Micro's init hook to create a new Spectrum Renderer.

var micro   = require('micro'),
    spectrum = require('spectrum');
    WebApp   = exports.WebApp = micro.webapp(),
    get      = WebApp.get;

WebApp.prototype.init = function () {
    this.view = new spectrum.Renderer(__dirname + '/../views');
}

get('/hello/:name', function (request, response, args) {
    response.ok('text/html');
    return 'hello, ' args.name;
});

After require()ing Spectrum we assign a new instance of Renderer to this.view. This means any request handlers we create have access to the Renderer.

The Renderer takes one argument, a path to the directory that will contain our project's templates. By convention, this is the views directory in the root of the project.

Let's define the template for the /hello/:name route. Create helloworld/views/index.spv and add the following:

Hello, <%= this.args.name %>

Spectrum also requires a project to have a base.spv template. This is usually for your project's common output, such as the surrounding <html /> code.

We don't have any yet, so we will use next() to pass rendering on to the index.spv template we have just created. We will come back to this in a bit.

Add the following to helloworld/views/base.spv:

<% next(this) %>

We can now render the template back in the get handler.

var micro   = require('micro'),
    spectrum = require('spectrum');
    WebApp   = exports.WebApp = micro.webapp(),
    get      = WebApp.get;

WebApp.prototype.init = function () {
    this.view = new spectrum.Renderer(__dirname + '/../views');
}

get('/hello/:name', function (request, response, args) {
    response.ok('text/html');
    return this.view.render('/index.spv', {name: args.name});
});

Pass the template path from the views directory to the render() method. The second argument is the view data we want to expose to our templates.

You should now be able to visit /hello/world in your browser and see the "hello, world" message still. This page is being rendered with Spectrum.

Rather than just sending text, let's add some markup to the page.

In helloworld/views/index.spv, wrap our message in <p /> tags.

<p>Hello, <%= this.args.name %></p>

Open helloworld/views/base.spv and add some basic markup to create a valid page.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type"
              content="text/html;charset=utf-8" >
        <title>Hello, <%= this.args.name %></title>
    </head>
    <body>
        <% next(this) %>
    </body>
</html>

Now if you reload /hello/world in your browser and view source you will the fully rendered markup, from both your index.spv and base.spv.

Fork me on GitHub