1 | # ![icon][.svg] expressTurnout [![NPM version][npm-image]][npm] [![Build Status][travis-image]][travis] [![Coverage Status][coveralls-image]][coveralls]
|
2 |
|
3 | > Pre-rendering Single-Page-Application for crawlers.
|
4 |
|
5 | ## Setup
|
6 |
|
7 | 1. Install [phantomjs 2.0.0](http://phantomjs.org/download.html)
|
8 | or [Build](http://blog.rampinteractive.co.uk/compiling-phantomjs-2-0-for-aws-ec2-linux-image/)
|
9 |
|
10 | ```
|
11 | λ phantomjs -v
|
12 | # 2.0.0
|
13 | ```
|
14 |
|
15 | Or
|
16 |
|
17 | ```bash
|
18 | $ phantomjs -v
|
19 | # 2.0.0
|
20 | ```
|
21 |
|
22 | 2. Install modules
|
23 |
|
24 | ```bash
|
25 | $ npm install express express-turnout --save
|
26 | ```
|
27 |
|
28 | 3. Use express-turnout before routing.
|
29 |
|
30 | Example:
|
31 |
|
32 | ```js
|
33 | // Environment
|
34 | var port= 59798;
|
35 |
|
36 | // Dependencies
|
37 | var express= require('express');
|
38 | var turnout= require('express-turnout');
|
39 |
|
40 | // Setup express
|
41 | var app= express();
|
42 | app.use(turnout());
|
43 | app.use(function(req, res) {
|
44 | res.sendFile(__dirname + '/index.html');
|
45 | });
|
46 | app.listen(port, function() {
|
47 | console.log('listening at %s', port);
|
48 | });
|
49 | ```
|
50 |
|
51 | 4. Add below to <head> in index.html:
|
52 |
|
53 | ```html
|
54 | <script src="/express-turnout.js"></script>
|
55 | ```
|
56 |
|
57 | 5. Finally, Execute window.expressTurnoutRendered() at Timing of Should be read for crawlers.
|
58 |
|
59 | Example:
|
60 |
|
61 | ```js
|
62 | angular.module('myApp',['ui.router'])
|
63 | .run(function($rootScope,$window){
|
64 | $rootScope.$on('$viewContentLoaded',function(){
|
65 | var renderedTemplate= document.body.innerHTML.trim().length>0
|
66 | if(renderedTemplate){
|
67 | $window.expressTurnoutRendered();
|
68 | }
|
69 | });
|
70 | })
|
71 | .config(function($stateProvider){
|
72 | // states...
|
73 | })
|
74 | ;
|
75 | ```
|
76 |
|
77 | > * [Spec - expressTurnout](./test/express-turnout.spec.coffee#L25)
|
78 | > * [Demo - http://turnout.berabou.me](https://github.com/59naga/turnout.berabou.me)
|
79 |
|
80 | ## How it works the source code for crawlers?
|
81 | Add '?_escaped_fragment_' to URL.
|
82 |
|
83 | Example:
|
84 |
|
85 | ```bash
|
86 | $ curl http://localhost:59798/?_escaped_fragment_
|
87 |
|
88 | <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>
|
89 | <meta charset="UTF-8">
|
90 | <title>Welcome googlebot!</title>
|
91 | <base href="/">
|
92 | <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
|
93 | <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
|
94 |
|
95 | <script src="/express-turnout.js"></script>
|
96 | <script>
|
97 | //...
|
98 | </script>
|
99 | </head>
|
100 | <!-- 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>
|
101 | ```
|
102 |
|
103 | # API
|
104 | ## express-turnout(options)
|
105 | ### Options
|
106 | #### `blacklist`
|
107 | [Return 403 If matched URL in RegExps.][1]
|
108 |
|
109 | Default: `[]`
|
110 |
|
111 | #### `whitelist`
|
112 | [Return 403 Unless matched URL in RegExps.][2]
|
113 |
|
114 | Default: `[]`
|
115 |
|
116 | #### `timeout`
|
117 | [Return 403 if exceeded the time.][3]
|
118 |
|
119 | Default: `1000` ms
|
120 |
|
121 | #### `maxBuffer`
|
122 | [Return 500 if rendered html is more than the number of bytes.][4]
|
123 |
|
124 | Default: `1000` ms
|
125 |
|
126 | #### `ua`
|
127 | [Do Pre-rendering If matched UserAgent in RegExps.][5]
|
128 |
|
129 | Default: `['Googlebot','Twitterbot']`
|
130 |
|
131 | [1]: ./test/options.spec.coffee#L17
|
132 | [2]: ./test/options.spec.coffee#L76
|
133 | [3]: ./test/options.spec.coffee#L137
|
134 | [4]: ./test/options.spec.coffee#L163
|
135 | [5]: ./test/options.spec.coffee#L189
|
136 |
|
137 | ## `DEBUG=express:turnout`
|
138 | > See [Debugging Express](http://expressjs.com/guide/debugging.html)
|
139 |
|
140 | Example:
|
141 | ```bash
|
142 | $ curl -A Googlebot http://localhost:59798/second
|
143 |
|
144 | $ DEBUG=express:turnout node test/examples/angular-ui-router
|
145 | # express:turnout new Turnout +0ms {"ua":["Googlebot","Twitterbot"],"blacklist":[],"whitelist":[],"timeout":1000,"eventName":"expressTurnoutRendered"}
|
146 | # express:turnout [ 'Googlebot', index: 0, input: 'Googlebot' ] +1m isBot Googlebot
|
147 | # express:turnout Render http://localhost:59798/second? Limit by 1000ms +2ms
|
148 | # 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>
|
149 | ```
|
150 |
|
151 | ## /express-turnout.js
|
152 | ### `window.expressTurnoutRendered`
|
153 | Finish the Pre-rendering If Execute via express-turnout.
|
154 |
|
155 | ## Inspired
|
156 | [prerender-node / AngularJS SEO with Prerender.io | Scotch](https://scotch.io/tutorials/angularjs-seo-with-prerender-io)
|
157 |
|
158 | License
|
159 | ===
|
160 | [MIT][License]
|
161 |
|
162 | [License]: 59naga.mit-license.org
|
163 |
|
164 | [.svg]: https://cdn.rawgit.com/59naga/express-turnout/master/.svg
|
165 |
|
166 | [npm-image]:https://img.shields.io/npm/v/express-turnout.svg?style=flat-square
|
167 | [npm]: https://npmjs.org/package/express-turnout
|
168 | [travis-image]: http://img.shields.io/travis/59naga/express-turnout.svg?style=flat-square
|
169 | [travis]: https://travis-ci.org/59naga/express-turnout
|
170 | [coveralls-image]: http://img.shields.io/coveralls/59naga/express-turnout.svg?style=flat-square
|
171 | [coveralls]: https://coveralls.io/r/59naga/express-turnout?branch=master
|