Tutorial: Getting Started 3: Views & Static Assets

Getting Started 3: 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 standard convention for sub-directories, so views/auth/login.pug can be accessed as auth:login.

Serving Views

Flitter makes a global function _flitter.view() available for use in controller methods. To serve a view as a response, simple return the _flitter.view() function with the name of the view. View names follow the standard Flitter convention for sub-directories. Here's an example of a controller method that serves a view:

// app/controllers/Auth.controller.js
class AuthController {
    login(req, res){
        return _flitter.view(res, 'auth:login', {destination: req.session.destination})

module.exports = AuthController

Here, the login() method returns the pug view located at views/auth/login.pug. The first argument is the response object. The second argument is the Flitter name of the view. The optional third 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.

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: 4: Database & ORM