Express/connect middleware to pre-render ajax page for non-ajax browsers, especially using angular.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.eslintrc
.gitignore
.travis.yml
README.md
connect-prerenderer.js
package.json
runTest.sh
urlRenderer.js

README.md

connect-prerenderer

Build Status npm version

Express/connect middleware to pre-render ajax page for non-ajax browsers, especially using angular.js

How to use

$ npm install connect-prerenderer

In app.js:

var express = require('express');
var prerenderer = require('connect-prerenderer');
var app = express();
app.use(prerenderer());
...

Options

  • targetGenerator: a name or a function to generate a new one for HTTP request.
  • timeout: an integer in milliseconds to specify how long it waits to prerender.
  • cookieDomain: a domain name to allow passing cookies.
  • attachConsole: when truthy, attach global.console to window.console when prerendering files (useful for debugging)
  • subprocess: if truthy, do the rendering in a subprocess (it helps to prevent possible memory leaks in jsdom). You can also set the RENDERER_USE_SUBPROCESS environment variable to any value (except an empty string) to achieve the same result. Try it if you experience memory leaks.

Coding conventions (client-side)

  • If an html is prerendered, the body is like: <body data-prerendered="true">
  • When JavaScript code finishes prerendering, it should call: document.onprerendered()

Notes for AngularJS

The following snippet would help AngularJS to work:

<script>
  angular.element(document).ready(function() {
    if (document.body.getAttribute('data-prerendered')) {
      document.addEventListener('click', function() {
        document.removeEventListener('click', arguments.callee, true);
        angular.bootstrap(document.documentElement, []);
        return true;
      }, true);
    } else {
      angular.bootstrap(document.documentElement, []);
    }
  });
</script>

To keep templates for interpolation in a prerendered html, use the modified version of angular.js (v1.2.5) located in test/server/public/.

Limitations

  • style attributes are not preserved by jsdom (use class).

AngularJS only limitations:

  • ng-repeat workaround only works with ng-repeat attributes.
  • ng-repeat-(start|end) is not supported.