expressTurnout 
Pre-rendering Single-Page-Application for crawlers.
Setup
-
Install phantomjs 2.0.0 or Build
λ phantomjs -v # 2.0.0Or
$ phantomjs -v # 2.0.0 -
Install modules
$ npm install express express-turnout --save
-
Use express-turnout before routing.
Example:
// Environment var port= 59798; // Dependencies var express= require('express'); var turnout= require('express-turnout'); // Setup express var app= express(); app.use(turnout()); app.use(function(req, res) { res.sendFile(__dirname + '/index.html'); }); app.listen(port, function() { console.log('listening at %s', port); });
-
Add below to <head> in index.html:
<script src="/express-turnout.js"></script>
-
Finally, Execute window.expressTurnoutRendered() at Timing of Should be read for crawlers.
Example:
angular.module('myApp',['ui.router']) .run(function($rootScope,$window){ $rootScope.$on('$viewContentLoaded',function(){ var renderedTemplate= document.body.innerHTML.trim().length>0 if(renderedTemplate){ $window.expressTurnoutRendered(); } }); }) .config(function($stateProvider){ // states... }) ;
How it works the source code for crawlers?
Add '?escaped_fragment' to URL.
Example:
$ curl http://localhost:59798/?_escaped_fragment_
<html lang="en" ng-app="myApp" class="ng-scope"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>
<meta charset="UTF-8">
<title>Welcome googlebot!</title>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="/express-turnout.js"></script>
<script>
//...
</script>
</head>
<!-- uiView: --><body ui-view="" class="ng-scope"><h1 class="ng-scope">first</h1><a ui-sref="second" class="ng-scope" href="/second">second</a></body></html>API
express-turnout(options)
Options
blacklist
Return 403 If matched URL in RegExps.
Default: []
whitelist
Return 403 Unless matched URL in RegExps.
Default: []
timeout
Return 403 if exceeded the time.
Default: 1000 ms
maxBuffer
Return 500 if rendered html is more than the number of bytes.
Default: 1000 ms
ua
Do Pre-rendering If matched UserAgent in RegExps.
Default: ['Googlebot','Twitterbot']
DEBUG=express:turnout
Example:
$ curl -A Googlebot http://localhost:59798/second
$ DEBUG=express:turnout node test/examples/angular-ui-router
# express:turnout new Turnout +0ms {"ua":["Googlebot","Twitterbot"],"blacklist":[],"whitelist":[],"timeout":1000,"eventName":"expressTurnoutRendered"}
# express:turnout [ 'Googlebot', index: 0, input: 'Googlebot' ] +1m isBot Googlebot
# express:turnout Render http://localhost:59798/second? Limit by 1000ms +2ms
# express:turnout Rendered +298ms <html lang="en" ng-app="myApp" class="ng-scope">...<!-- uiView: --><body ui-view="" class="ng-scope"><h1 class="ng-scope">second</h1><a ui-sref="first" class="ng-scope" href="">first</a></body></html>/express-turnout.js
window.expressTurnoutRendered
Finish the Pre-rendering If Execute via express-turnout.
Inspired
prerender-node / AngularJS SEO with Prerender.io | Scotch
