davidenq commented 8 years ago

Example

Install hapi and marko

[sudo] npm install hapi --save
[sudo] npm install marko --save

directory structure:

├── hapi-marko/
│   ├── public/
│   │   ├── assets/
│   │   │   ├── css/
│   │   │   ├── js/
│   │   │   ├── img/
│   │   ├── resources/
│   │   │   ├── errors/
│   │   │   │     ├── 404.marko
│   │   │   ├── partials/
│   │   │   │     ├── aside.marko
│   │   │   │     ├── footer.marko
│   │   │   │     ├── header.marko
│   │   │   ├── template/
│   │   │   │     ├── master.marko
│   │   │   ├── index.marko
│   ├── index.js
│   ├── package.json
│   ├── README.md

/public/assets
Web resources that are publicly available (css, js, img, fonts)

/public/resouces
Server and browser-side templates

index.js
Application entry point

Server side rendering

index.js

const Hapi = require('hapi'); 
// The following line installs the Node.js require extension
// for '.marko' files. Once installed, '*.marko' files can be
// required just like any other JavaScript modules. 
require('marko/node-require').install();

// If true(the default)then compiled templates will be written to disk. If false,
// compiled templates will not be written to disk (i.e., no '.marko.js' file will
// be generated)
require('marko/compiler').defaultOptions.writeToDisk = false;

const server = new Hapi.Server();
server.connection();

//Load template
const index = require('./public/resources/index.marko');

server.route({
    method: 'GET',
    path: '/',
    handler: function (request, reply) {

        index.render({'message': 'hello world!'}, reply);
    }
});

server.start( () => {
    console.log('Running at:' + server.info.uri);
});

index.marko

<layout-use template="./template/master.marko" show-header="$true">
    <layout-put into="content">
       <div >${data.message}</div>
       or
       <div >$data.message</div>
    </layout-put>
</layout-use>

master.marko

<!DOCTYPE html>
<html lang="es">
    <head>
    </head>
    <body>
        <div id="layout">
            <aside>
                <include template="../partials/aside.marko"/>
            </aside>
            <section class="section">
                <layout-placeholder name="content" />
            </section>
        <footer class="footer">
                <include template="../partials/footer.marko"/>
        </footer>
        </div>
    </body>
</html>

header.marko

<div>header content</div>

aside.marko

<div>aside content</div>

footer.marko

<div>footer content</div>

execute

node index.js

Open your browser and visit http://localhost:8000

gives the following output

aside content
hello world!
or
hello world!
footer content

Clone the example

example-hapi-marko

patrick-steele-idem commented 8 years ago

Thanks @davidenq! I probably won't have a chance to take a closer look until next week, but I'm thinking we should stick with the componentized directory structure with a src/components/ directory and a src/pages/ directory. Thoughts?

davidenq commented 8 years ago

I'm agree. I'll work on a new tutorial. Have a great weekend!

jsumners commented 8 years ago

If you want to adjust the response type:

server.route({
    method: 'GET',
    path: '/',
    handler: function (request, reply) {

        reply(index.stream({'message': 'hello world!'})).type('text/html');
    }
});

patrick-steele-idem commented 8 years ago

Thanks for sharing @jsumners, I updated the Hapi docs to correctly set the content type header: https://github.com/marko-js/marko/commit/951c0dc906677725e3083061dbd2ae2575205d2c