forked from annawchou/fluxible.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathserver.js
81 lines (70 loc) · 2.58 KB
/
server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
* Copyright 2015, Yahoo! Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
import path from 'path';
import express from 'express';
import favicon from 'serve-favicon';
import serialize from 'serialize-javascript';
import { navigateAction } from 'fluxible-router';
import bodyParser from 'body-parser';
import cookieParser from 'cookie-parser';
import csrf from 'csurf';
import React from 'react';
import app from './app';
import HtmlComponent from './components/Html.jsx';
import assets from './utils/assets';
import DocsService from './services/docs';
import SearchService from './services/search';
import { createElementWithContext } from 'fluxible-addons-react';
const htmlComponent = React.createFactory(HtmlComponent);
const server = express();
server.set('state namespace', 'App');
server.use(favicon(path.join(__dirname, '/assets/images/favicon.ico')));
server.use('/public', express.static(path.join(__dirname, '/build')));
server.use(cookieParser());
server.use(bodyParser.json());
server.use(csrf({ cookie: true }));
// Get access to the fetchr plugin instance
const fetchrPlugin = app.getPlugin('FetchrPlugin');
// Register our services
fetchrPlugin.registerService(DocsService);
fetchrPlugin.registerService(SearchService);
// Set up the fetchr middleware
server.use(fetchrPlugin.getXhrPath(), fetchrPlugin.getMiddleware());
// Render the app
function renderApp(res, context) {
const appElement = createElementWithContext(context);
const renderedApp = React.renderToString(appElement);
const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
const doctype = '<!DOCTYPE html>';
const componentContext = context.getComponentContext();
const html = React.renderToStaticMarkup(htmlComponent({
assets: assets,
context: componentContext,
state: exposed,
markup: renderedApp
}));
res.send(doctype + html);
}
// Every other request gets the app bootstrap
server.use(function (req, res, next) {
const context = app.createContext({
req: req, // The fetchr plugin depends on this
xhrContext: {
_csrf: req.csrfToken() // Make sure all XHR requests have the CSRF token
}
});
context.executeAction(navigateAction, { url: req.url }, function (err) {
if (err) {
if (err.statusCode === 404) {
return next();
}
return next(err);
}
renderApp(res, context);
});
});
const port = process.env.PORT || 3000;
server.listen(port);
console.log('Listening on port ' + port);