-
Notifications
You must be signed in to change notification settings - Fork 2
/
server.js
executable file
·72 lines (59 loc) · 2.17 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
// an Isomorphic helper
let Iso = require('iso');
let React = require('react');
let express = require('express');
let path = require('path');
let App = require('./js/components/App.jsx');
let WebAPIUtils = require('./js/utils/WebAPIUtils');
let alt = require('./js/alt');
let app = express();
// Static directories to make css and js work
app.use('/build', express.static(path.join(__dirname, 'build')))
app.use('/assets', express.static(path.join(__dirname, 'assets')))
// I pulled this from index.html
let htmlStart = `
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alt Flux Sample</title>
<link rel="shortcut icon" type="image/png" href="assets/images/react.png">
<link rel="stylesheet" href="assets/css/uikit.almost-flat.min.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
`;
let htmlEnd = `
<script src="build/bundle.js"></script>
</body>
</html>
`;
// Bootstrap our flux stores, create the markup, send it to iso.
app.get('/', (req, res) => {
// Pull all the products using our WebAPIUtils
// we have wrapped them up in promises but this interface can be anything
// else: callbacks, generators, async/await.
WebAPIUtils.getAllProducts().then((products) => {
// There are two ways we can get the data in at this point
// we can fire off the action which we're sure is a synchronous op
// or we can use alt's bootstrap which is also synchronous.
//
// We prepare the data that we want to bootstrap our stores with
// and run `alt.bootstrap`
let data = { ProductStore: { products } };
alt.bootstrap(JSON.stringify(data));
// This creates the markup that we'll use to pass into Iso
let markup = React.renderToString(React.createElement(App));
// here we use `alt.flush` in order to flush the data out of the stores
// for the next request.
let body = Iso.render(markup, alt.flush());
// and we send down the markup
res.send(`${htmlStart}${body}${htmlEnd}`);
}).catch((e) => {
// Naive error handling in case something goes wrong
res.send(e.stack);
});
});
app.listen(8080, () => {
console.log('Listening on port 8080');
});