| 1 | # Page Helper
|
| 2 |
|
| 3 | [](https://github.com/ales6164/page-helper)
|
| 4 |
|
| 5 | A JavaScript library for building modular web apps.
|
| 6 |
|
| 7 | #### New Features
|
| 8 |
|
| 9 | - Pre-render requests now support headers, body and POST method.
|
| 10 |
|
| 11 | ## Installation
|
| 12 | This library is available as a NPM package. Install by running the command bellow:
|
| 13 | ```sh
|
| 14 | $ npm i page-helper --save-dev
|
| 15 | ```
|
| 16 |
|
| 17 | ## How-To
|
| 18 | Create your first layout and page component inside `web/src` directory.
|
| 19 |
|
| 20 | `web/src/index.html`
|
| 21 | ```html
|
| 22 | <!DOCTYPE html>
|
| 23 | <html>
|
| 24 | <head>
|
| 25 | <base href="/">
|
| 26 | ...
|
| 27 | </head>
|
| 28 | <body>
|
| 29 | ...
|
| 30 | <!-- Page helper uses Handlebars.js to render HTML templates -->
|
| 31 | {{> router-outlet}} <!-- Router outlet for page rendering -->
|
| 32 | ...
|
| 33 | {{> definitions}} <!-- For necessary scripts, resources and component definitions -->
|
| 34 | </body>
|
| 35 | </html>
|
| 36 | ```
|
| 37 |
|
| 38 | `web/src/components/page-home.html`
|
| 39 | ```html
|
| 40 | <template>
|
| 41 | Hello World!
|
| 42 | </template>
|
| 43 | ```
|
| 44 |
|
| 45 |
|
| 46 | Create app and run local server
|
| 47 | ```js
|
| 48 | const helper = require('page-helper');
|
| 49 |
|
| 50 | const app = new helper.Helper({
|
| 51 | workingDir: 'web/src', // source code of your web app
|
| 52 | defaultLocale: 'en',
|
| 53 | routes: [
|
| 54 | {
|
| 55 | path: '/', // use '/*' for the catch-all handler
|
| 56 | component: 'page-home', // component name
|
| 57 | outlet: 'router-outlet' // default
|
| 58 | }
|
| 59 | ]
|
| 60 | });
|
| 61 |
|
| 62 | gulp.task('serve', () => {
|
| 63 | app.parseLayout('web/src/index.html'); // parse layout
|
| 64 | app.parse('web/src/components/page-home.html'); // parse component
|
| 65 |
|
| 66 | expressApp.use(express.static('web/src/static')); // serve static files
|
| 67 |
|
| 68 | app.setupExpress(expressApp, {liveReload: true}); // serve our app
|
| 69 |
|
| 70 | expressApp.listen(3000); // listen on port
|
| 71 | });
|
| 72 | ```
|
| 73 |
|
| 74 | Build app for production
|
| 75 | ```js
|
| 76 | ...
|
| 77 |
|
| 78 | gulp.task('build', () => {
|
| 79 | app.parseLayout('web/src/index.html'); // parse layout
|
| 80 | app.parse('web/src/components/page-home.html'); // parse component
|
| 81 |
|
| 82 | app.build('web/dist') // build to directory
|
| 83 | });
|
| 84 | ```
|
| 85 |
|
| 86 | ### Plugins
|
| 87 |
|
| 88 | Page helper is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.
|
| 89 |
|
| 90 | | Plugin | README |
|
| 91 | | ------ | ------ |
|
| 92 | | Handlebars | [https://github.com/wycats/handlebars.js][PlDb] |
|
| 93 | | Pages | [https://github.com/ales6164/pages][PlGh] |
|
| 94 | | Custom Elements| [https://github.com/webcomponents/custom-elements][PlGd] |
|
| 95 |
|
| 96 | ### Todos
|
| 97 |
|
| 98 | - Write sample app
|
| 99 | - Extend locale functionalities
|
| 100 | - Add support for dynamic routing
|
| 101 |
|
| 102 | License
|
| 103 | ----
|
| 104 |
|
| 105 | MIT
|
| 106 |
|
| 107 |
|
| 108 | **Free Software, Hell Yeah!**
|
| 109 |
|
| 110 | [//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)
|
| 111 |
|
| 112 | [PlDb]: <https://github.com/wycats/handlebars.js>
|
| 113 | [PlGh]: <https://github.com/ales6164/pages>
|
| 114 | [PlGd]: <https://github.com/webcomponents/custom-elements>
|