Tutorial: Views & Static Assets

Flitter uses Pug as a view engine, so, for the most part, working with views is a standard experience.

Creating Views

Creating views in Flitter is identical to any other Pug view. You can find more info on that here. Views should be placed in the views/ directory and follow the Flitter canonical naming scheme, so views/auth/login.pug can be accessed as auth:login.

Serving Views

Flitter provides a few niceties in the Express response to make working with views a little nicer. As always, you can serve a view the traditionaly way using response.view() and passing in a view name, and arguments:

// app/controllers/Auth.controller.js
const Controller = require('libflitter/controller/Controller')

class AuthController extends Controller {
    login(req, res){
        return res.view('auth:login', {destination: req.session.destination})
    }
}

module.exports = exports = AuthController

Here, the login() method returns the pug view located at views/auth/login.pug. The first argument is the Flitter canonical name of the view. The optional second argument is an object of variables to be passed to the view. The object keys correspond to the variable names in the template. That is { username: "foobar" } can be accessed as {{ username }} in the template.

Likewise, you can return error pages using response.error():

// app/controllers/Auth.controller.js
const Controller = require('libflitter/controller/Controller')

class AuthController extends Controller {
    login(req, res){
    	if ( req.session.auth.user ) {
    		return res.error(403, {message: 'Users cannot re-login.'})
    	}

        return res.view('auth:login', {destination: req.session.destination})
    }
}

module.exports = exports = AuthController

So, if a user existed, they would be served the Pug view located at views/errors/403.pug, and a {{ message }} variable would be made available to the view.

The page() method.

While view and error are nice, oftentimes there is a set of data that you always want passed to the view. Things like the app name, base url, and current user. Cue response.page(). This method works identially to response.view() except it will automatically inject data into the view for you. Currently, it provides the app name, the app url, and, if one exists, the current user. You can also pass in other information:

// app/controllers/Auth.controller.js
const Controller = require('libflitter/controller/Controller')

class AuthController extends Controller {
    login(req, res){
    	if ( req.session.auth.user ) {
    		return res.error(403, {message: 'Users cannot re-login.'})
    	}

        return res.page('auth:login', {destination: req.session.destination})
    }
}

module.exports = exports = AuthController

Unlike with view(), however, we can use {{ name }} and {{ url }} in the auth login view.

Static Assets

Flitter serves static assets from the app/assets/ directory. All files in this folder are made publicly available using the /assets prefix. For example, the file app/assets/flitter.png can be accessed at http://application.url/assets/flitter.png. Flitter serves the app/assets/favicon.ico file specially using the express-favicon plugin automatically. That means you can just replace the app/assets/favicon.ico file with a custom one for your app and Flitter will serve it automatically.

Next: Database & ORM