marko/docs/browser-side-rendering.md

Browser-side Rendering

Given the following module code that will be used to render a template on the client-side:

run.js:

var template = require('./hello.marko');

template.render({
        name: 'John'
    },
    function(err, output) {
        document.body.innerHTML = output;
    });

You can then bundle up the above program for running in the browser using either Lasso.js (recommended) or browserify.

Using Lasso.js

The lasso CLI can be used to generate resource bundles that includes all application modules and all referenced Marko template files using a command similar to the following:

# First install the lasso and the lasso-marko plugin
npm install lasso --global
npm install lasso-marko

lasso --main run.js --name my-page --plugins lasso-marko

This will produce a JSON file named build/my-page.html.json that contains the HTML markup that should be used to include the required JavaScript and CSS resources that resulted from the page optimization.

Alternatively, you can inject the HTML markup into a static HTML file using the following command:

lasso --main run.js --name my-page --plugins lasso-marko --inject-into my-page.html

Using Browserify

The markoify transform for browserify must be enabled in order to automatically compile and include referenced Marko template files.

# Install the markoify plugin from npm:
npm install markoify --save

# Build the browser bundle:
browserify -t markoify run.js > browser.js