page-helper
v2.0.0
Published
[](https://github.com/ales6164/page-helper)
Downloads
51
Readme
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-devHow-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 |
Todos
- Write sample app
- Extend locale functionalities
- Add support for dynamic routing
License
MIT
Free Software, Hell Yeah!