UNPKG

4.94 kBMarkdownView Raw
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
71. 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
222. Install modules
23
24 ```bash
25 $ npm install express express-turnout --save
26 ```
27
283. 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
514. Add below to <head> in index.html:
52
53 ```html
54 <script src="/express-turnout.js"></script>
55 ```
56
575. 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?
81Add '?_escaped_fragment_' to URL.
82
83Example:
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
109Default: `[]`
110
111#### `whitelist`
112[Return 403 Unless matched URL in RegExps.][2]
113
114Default: `[]`
115
116#### `timeout`
117[Return 403 if exceeded the time.][3]
118
119Default: `1000` ms
120
121#### `maxBuffer`
122[Return 500 if rendered html is more than the number of bytes.][4]
123
124Default: `1000` ms
125
126#### `ua`
127[Do Pre-rendering If matched UserAgent in RegExps.][5]
128
129Default: `['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
140Example:
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`
153Finish 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
158License
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