Simplify building and running a marko project
npm install marko-startermarko-starter is a project for building and running
Marko.js applications. It provides a
toolset that includes a build pipeline and a generic HTTP server with routing
that makes building Marko applications easy! If you're looking to build a
project from scratch quickly, check out
marko-devtools, which includes a
command for creating Marko projects with marko-starter!
Requires Node 6+
To get started, marko-starter may be installed locally to your project or
globally:
``bash`
npm install marko-starter --save
Or installed globally:
`bash`
npm install marko-starter -g
Adding a page to your application simply requires adding a new directory under
the routes/ directory. Inside this directory, you can put either anindex.marko template and/or a route.js file that exports a handler method.
Example scenario
Given a directory structure like this:
`
⤷ routes/
⤷ my-page/
⤷ index.marko
Hitting /my-page will render index.marko.
By default, the route for a page is determined by the page's directory name,
but you can also define a custom route for your page. This route can include
custom express-style url parameters. You do this by exporting a path from aroute.js file in your page's directory:
`js`
exports.path = '/people/:name';
If using an index.marko template for the route, the input will contain the
following properties:
| Property | Type | Description | Example |
|------------|----------|--------------------------------------------------------------------------------------|--------------------|
| path | String | The path from the request | "/people/frank" |params
| | Object | An object that contains String properties populated from the path placeholders | {name: "frank"} |query
| | Object | An object that contains String query parameters properties from the _query string_ | {age: "27"} |metadata
| | Object | The route metadata | {secure: false} |
Example scenario
Given a route:
/people/:name
And a template:
`marko`
When you hit the following url:
/people/frank?age=27
The rendered output would be:
`html`
Routes may also be added to the projectConfig:
my-project/project.js
`js
const template = require('./template.marko');
module.exports = require('marko-starter').projectConfig({
...
routes: [
{
path: '/foo/:name',
handler(input, out) {
const name = input.params.name;
template.render({ name }, out);
}
}
]
});
`
If you need more control over the data passed to the template or don't even want
to render a template, you can define a custom handler function in yourroute.js file:
`js
const template = require('./index.marko');
exports.path = '/people/:name';
exports.handler = (input, out) => {
const name = input.params.name;
template.render({ name }, out);
};
`
To add a component, simply create a new directory under the components/
directory. The directory name will be used as the component name. Inside the
directory you should put an file.
`
⤷ components/
⤷ my-component/
⤷ index.marko
Given the above structure, you will be able to use in any other
component template or page template.
Adding client-side behavior to a component is as simple as defining methods in
your index.marko in a class tag and exporting them within the template, orcomponent.js
defining a file next to your index.marko file that exports the
methods.
Example single file component
Single file components contain the component logic and the markup in the same
index.marko file:
index.marko
`marko
class {
onInput(input) {
this.state = {
count: input.count
}
this.initialCount = input.count
}
incrementCount() {
this.state.count++
}
resetCount() {
this.state.count = this.initialCount
}
}
Example split-file component
Split-file components separate the component logic into a component.js and
the markup in index.marko:
index.marko
html
${state.count}
`component.js
js
module.exports = {
onInput(input) {
this.state = {
count: input.count
}
this.initialCount = input.count
},
incrementCount() {
this.state.count++
},
resetCount() {
this.state.count = this.initialCount
}
};
`
$3
To add styles to your components, either add a top-level