A plugin for page.js which aims to provide a direct imitation of the Express API so you can share controller code on the client and the server with your Express application without modification.
With this plugin you should be able to write apps that share the same models, views, and controllers on the client and the server, so long as you run Express on the server, page.js on the client, and use a JS templating system that can run on the client and server.
Either download the file from here or use bower:
bower install page.js-express-mapper.js
Load page.js-express-mapper.js after loading page.js.
Then initialize it by calling pageExpressMapper() before defining any routes.
pageExpressMapper() accepts the following params:
Required
This is designed to mimic the Express render method. Load your own templating system elsewhere in your app and call its render method here as a function of your own design.
As with Express, the template argument should refer to a named template and the model argument should be a JSON string or JavaScript object.
For example, using the Teddy templating engine:
pageExpressMapper({
renderMethod: function(template, model) {
var mainElement = document.getElementsByTagName('main')[0];
mainElement.innerHTML = teddy.render(template, model);
}
});This should work with any templating engine which supports both client-side rendering and Express on the server-side.
Optional
In the Express API, routes are defined as children of a named app object.
As such, to directly imitate Express client-side, this plugin defines a global variable named for your Express app just as is done in Node.js.
Default: 'app'
Optional
By default this plugin matches the Express 4 API, but if you want to remap it, supply a customRouter. For example, to match the Express 3 API, you could do this:
pageExpressMapper({
renderMethod: someRenderMethod,
customRouter: {
get: function(route, callback) {
page(route, callback);
},
post: function(route, callback) {
page(route, callback);
},
all: function(route, callback) {
page(route, callback);
}
}
});Default: undefined
Assuming your server code begins as:
var app = express();And your client code begins as something like:
pageExpressMapper({
renderMethod: function(template, model) {
/* render a template using
* your favorite templating
* system here
*/
},
expressAppName: 'app'
});You can then write identical routes for both sides, such as:
app.route('/someRoute').get(function(req, res) {
res.render('someTemplate', {some: 'model'});
});Check out sampleApp.html for simple demonstration of how this works.
To run it, follow these steps:
Clone this repo:
git clone https://github.com/kethinov/page.js-express-mapper.js.git
Install page.js:
cd page.js-express-mapper.js
bower install page.js
Start a simple web server (example assumes you have python installed, but you could use any web server):
python -m SimpleHTTPServer
Then open http://localhost:8000/sampleApp.html in your browser.
All original code in this library is licensed under the Creative Commons Attribution 4.0 International License. Commercial and noncommercial use is permitted with attribution.