Page-helper NPM

Page Helper

A JavaScript library for building modular web apps.

New Features

Pre-render requests now support headers, body and POST method.

Installation

This library is available as a NPM package. Install by running the command bellow:

$ npm i page-helper --save-dev

How-To

Create your first layout and page component inside web/src directory.

web/src/index.html

<!DOCTYPE html>
<html>
<head>
<base href="/">
...
</head>
<body>
...
<!-- Page helper uses Handlebars.js to render HTML templates -->
{{> router-outlet}} <!-- Router outlet for page rendering -->
...
{{> definitions}} <!-- For necessary scripts, resources and component definitions -->
</body>
</html>

web/src/components/page-home.html

<template>
Hello World!
</template>

Create app and run local server

const helper = require('page-helper');

const app = new helper.Helper({
    workingDir: 'web/src', // source code of your web app
    defaultLocale: 'en',
    routes: [
        {
            path: '/', // use '/*' for the catch-all handler
            component: 'page-home', // component name
            outlet: 'router-outlet' // default
        }
    ]
});

gulp.task('serve',  () => {
    app.parseLayout('web/src/index.html'); // parse layout
    app.parse('web/src/components/page-home.html'); // parse component

    expressApp.use(express.static('web/src/static')); // serve static files
    
    app.setupExpress(expressApp, {liveReload: true}); // serve our app
    
    expressApp.listen(3000); // listen on port
});

Build app for production

...

gulp.task('build',  () => {
    app.parseLayout('web/src/index.html'); // parse layout
    app.parse('web/src/components/page-home.html'); // parse component
    
    app.build('web/dist') // build to directory
});

Plugins

Page helper is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.

Plugin	README
Handlebars	https://github.com/wycats/handlebars.js
Pages	https://github.com/ales6164/pages
Custom Elements	https://github.com/webcomponents/custom-elements