Every view will recieve this.props which can be used to render the component. The value of this.props will be created based upon four types of data (merged):

• 1. manifest[‘client-props’]
• 2. automatic generated runtime
• 3. data returned by the general model-file: src/model-general.js
• 4. data returned by the view specific model-file src/models/modelname.js

1. manifest[‘client-props’]

Any properties that you set inside manifest[‘client-props’] will be available to all views through this.props.__appProps.clientProps

2. automatic generated runtime

A lot of runtime information is available at this.props.__appProps. This is automaticly generated, some properties will defer for each client:

Available pre-defined properties of this.props.__appProps:

bodyattrcookie: {object} the body-data-attr cookie, which is also rendered as body[data-cookiename] data attributes
charset
cookie: {object} the props cookie
description: the description of the page
device: the client device, either desktop, tablet or phone
ga: Google analytics key
lang: the current language (abreviation) that the client is using
langprefix: language prefix which can be used when creating language uri’s
languages: the language-deinitions of manifest.json
locales: the current locales that the client is using
node_env: the nodejs environment that the server is running on
offline: whether the app is currently offline -> this information will be automatically updated on the client as it is always false with a server-response
offlineMessage: the message to be shown when the app is offline
path: the path (uri without questionmark)
routes: route-object containing all client-side route-information, extracted from routes.json
serverStartup: time that the server app was started
showEnvironment: whether to show the environment
showOffline: whether to show if the client has no connection
socketport: the socketport that SocketIO connects to
title: the title of the page
uri: the uri
useragent: full useragent info
version: the version of the webapp
view: the view-name
viewport the viewport

3. data returned by the general model-file: src/model-general.js

Every view will get additional properties by this file. The way to setup and use it, is the same as for view specific model-file (see below).

4. data returned by the view specific model-file src/models/modelname.js

More properties can be created by using a Model that should have the same name as the view, only with the extention of .js. Models are more powerful, because they receive the client’s language and can build complex datastructures asynchronously.

The webapplication comes with a folder named: models. This is the folder where you should define your (optional) models. Whenever a modelfile exists, the application will use it. A Model should always return either an object, or a Promise that gets fulfilled with an object (see Async models). The object gets merges inside this.props.

Model-files should export a function that recieves 5 arguments: request, reply, modelConfig, language , manifest.

Example model-file /models/index.js

'use strict';

const model = (request, reply, modelConfig, language /* , manifest */) => {
    return {
        name: 'Marco Asbreuk',
        count: 10
    };
};

module.exports = model;

Different models for different devices

By changing the modelname with a affinity, you can setup different model-files to be served on the next devices: desktop, tablet and phone. See Different devices.