app-index.html

<!--
  Derby templates are similar to Handlebars, except that they are first
  parsed as HTML, and there are a few extensions to make them work directly
  with models. A single HTML template defines the HTML output, the event
  handlers that update the model after user interaction, and the event handlers
  that update the DOM when the model changes.

  As in Handlebars, double curly braces output a value literally. Derby
  templates add single curly braces, which output a value and set up
  model <- -> view bindings for that object.

  Elements that end in colon define template names. Pre-defined templates
  are capitalized by convention, but template names are case-insensitive.
  Pre-defined templates are automatically included when the page is rendered.
-->

<Title:>
  dashboard

<Header:>
  <header><p>dashboard</p></header>

<Body:>
  <div id="wrap">
    <ul>
      {#each _projectsWithScreenshots as :project}
        <app:project>
      {/}
    </ul>
  </div>
  <a href="#" class="btn btn-large btn-block">Default Button</a>

  <project:>
    <li class="project" id="{:project.key}">{:project.name}</li>

app-index.js

var derby = require('derby');
derby.use(require('derby-ui-boot'));

var app = derby.createApp(module);
var get = app.get;
var view = app.view;
var ready = app.ready;

// ROUTES //
get('/projects', function(page, model, params) {
  var projectsQuery = model.query('projects');
  model.subscribe(projectsQuery, function (err, projectsWithScreenshots) {
    model.ref('_projectsWithScreenshots', projectsWithScreenshots);

    page.render();
  });
});

server-index.js

var http = require('http');
var path = require('path');
var express = require('express');
var gzippo = require('gzippo');
var derby = require('derby');
var app = require('../app');
var serverError = require('./serverError');


// SERVER CONFIGURATION //

var expressApp = express();
var server = module.exports = http.createServer(expressApp);

derby.use(derby.logPlugin);

var store = derby.createStore({listen: server});
store.query.expose('projects', 'withScreenshot', function () {
  return this.where('screenshotUrl').exists();
});

var ONE_YEAR = 1000 * 60 * 60 * 24 * 365;
var root = path.dirname(path.dirname(__dirname));
var publicPath = path.join(root, 'public');

expressApp
  .use(express.favicon())
  // Gzip static files and serve from memory
  .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR}))
  // Gzip dynamically rendered content
  .use(express.compress())

  // Uncomment to add form data parsing support
  // .use(express.bodyParser())
  // .use(express.methodOverride())

  // Uncomment and supply secret to add Derby session handling
  // Derby session middleware creates req.model and subscribes to _session
  // .use(express.cookieParser())
  // .use(store.sessionMiddleware({
  //   secret: process.env.SESSION_SECRET || 'YOUR SECRET HERE'
  // , cookie: {maxAge: ONE_YEAR}
  // }))

  // Adds req.getModel method
  .use(store.modelMiddleware())
  .use(function (req, res, next) {
    var model = req.getModel();
    var projects = model.get('projects');
    if(!projects) {
      model.set('projects', [
        { key: 'KEY1', name: 'Name 1', screenshotUrl: 'http://www.example.com/1' },
        { key: 'KEY2', name: 'Name 2', screenshotUrl: 'http://www.example.com/2' },
        { key: 'KEY3', name: 'Name 3', screenshotUrl: '' },
        { key: 'KEY4', name: 'Name 4' }
      ], function (err) {
        if(err) {
          next(err);
        } else {
          next();
        }
      });
    } else {
      next();
    }
  })
  // Creates an express middleware from the app's routes
  .use(app.router())
  .use(expressApp.router)
  .use(serverError(root));


// SERVER ONLY ROUTES //

expressApp.all('*', function(req) {
  throw '404: ' + req.url;
});