4.1 KiB
Installation
Trying out Marko
If you just want to play around with Marko in the browser, head on over to our Try Online feature. You'll be able to develop a Marko application right in your browser.
Creating new apps
If you're starting from scratch, marko-devtools provides a starter app to
get you going quickly. To get started:
npm install marko-devtools --global
marko create hello-world
cd hello-world
npm install # or yarn
npm start
Direct usage
Installing
The Marko compiler runs on Node.js and can be installed using npm:
npm install marko --save
or using yarn:
yarn add marko
In the browser
Let's say we have a simple view that we want to render in the browser: hello.marko
hello.marko
<h1>Hello ${input.name}</h1>
First, let's create a client.js that requires the view and renders it to the body:
client.js
var myComponent = require('my-component');
myComponent.renderSync({ name:'Marko' }).appendTo(document.body);
Now, we need to bundle these files for use in the browser. We can use a tool called lasso to do that for us, so let's get it (and the marko plugin) installed:
npm install --global lasso-cli
npm install --save lasso-marko
Now we can build our bundle for the browser:
lasso --main client.js --plugins "lasso-marko"
This builds a client.js file to the newly created static/ directory. If we had css in the view, a client.css file would also have been generated. You can now create an html file and drop the script (and stylesheet) in it:
index.html
<!doctype html>
<html>
<body>
<script src="static/client.js"/>
</body>
</html>
Load up that page in your browser and you should see Hello Marko staring back at you.
On the server
Require Marko views
Marko provides a custom Node.js require extension that allows you require Marko views exactly like a standard JavaScript module. Take the following example server.js:
server.js
// The following line installs the Node.js require extension
// for `.marko` files. This should be called once near the start
// of your application before requiring any `*.marko` files.
require('marko/node-require');
// Load a Marko view by requiring a .marko file:
var hello = require('./hello.marko');
Serving a simple page
Let's update server.js to serve the view from an http server:
server.js
// Allow requiring marko views
require('marko/node-require');
var http = require('http');
var hello = require('./hello.marko');
var port = 8080;
http.createServer((req, res) => {
// let the browser know html is coming
res.setHeader('content-type', 'text/html');
// render the output to the `res` output stream
hello.render({ name:'Marko' }, res);
}).listen(port);
And give hello.marko some content:
hello.marko
<h1>Hello ${input.name}</h1>
Start the server (node server.js) and open your browser to http://localhost:8080 where you should see the heading Hello Marko.
Initializing server-rendered components
Marko automatically injects a list of components that need to be mounted in the browser, right before the closing </body> tag (as such, it required that you include a <body> in your rendered output).
However, you still need to bundle the CSS & JavaScript for your page and include the proper link, style, and script tags. Luckily, the lasso taglib will do all the heavy lifting for you.
First install lasso and lasso-marko:
npm install --save lasso lasso-marko
Next, in your page or layout view, add the lasso-head and lasso-body tags:
layout.marko_
<!doctype>
<html>
<head>
<title>Hello world</title>
<lasso-head/>
</head>
<body>
<include(input.body)/>
<lasso-body/>
</body>
</html>
Finally, configure your server to serve the static files that lasso generates:
server.js
app.use(require('lasso/middleware').serveStatic());