|
1 | | -console.log('Server booting...'); |
2 | | -import * as http from 'http'; |
| 1 | +import { createServer } from 'http'; |
3 | 2 | import * as React from 'react'; |
4 | | -import * as ReactDOMServer from 'react-dom/server'; |
| 3 | +import { renderToString } from 'react-dom/server'; |
5 | 4 | import * as fs from 'fs'; |
6 | 5 | import AppComponent from './components/app'; |
7 | 6 | import { getItems } from './db'; |
8 | | -import * as routes from './routes'; |
9 | | - |
10 | | -const NewApp = React.createFactory(AppComponent); |
11 | | -const PORT = 3007; |
| 7 | +import { faviconUrl, stylesUrl, reactUrl, reactDomUrl, bundleUrl, propsUrl, containerId } from './routes'; |
12 | 8 |
|
| 9 | +console.log('Server booting...'); |
13 | 10 | const isProd = process.env.NODE_ENV === 'production'; |
14 | 11 | console.log('Production optimization enabled? ', isProd); |
| 12 | +const App = React.createFactory(AppComponent); |
| 13 | +const PORT = 3007; |
15 | 14 | const suffix = isProd ? '.production.min.js' : '.development.js'; |
16 | 15 |
|
17 | | -http.createServer((req, res) => { |
| 16 | +createServer((req, res) => { |
18 | 17 | console.log(`${req.httpVersion} ${req.method} ${req.url}`); |
19 | 18 | if (req.url === '/') { |
20 | | - const items = getItems(); |
21 | | - const props = {items: items}; |
22 | | - const reactHtml = ReactDOMServer.renderToString(NewApp(props)); |
| 19 | + const props: AppProps = { items: getItems() }; |
| 20 | + const reactHtml = renderToString(App(props)); |
23 | 21 | const pageHtml = `<!DOCTYPE html> |
24 | 22 | <html> |
25 | 23 | <head> |
26 | 24 | <meta charset="utf-8" /> |
27 | 25 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
28 | | - <link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3qoEAd6r/AHeqgQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3qoEAd6r/AHeqgQAAAAAAAAAAAAAAAAAAAAAAeaz/AMz//wCj1v8Aeaz/AHmsQAAAAAAAAAAAAHmsQAB5rP8Ao9b/AMz//wB5rP8AAAAAAAAAAAAAAAAAAAAAAHyv/wi66/8Lz///CLrr/wB8r/8AfK+/AHyvvwB8r/8Iuuv/C8///wi66/8AfK//AAAAAAAAAAAAAAAAAAAAAAB/soEOqdn/G9L//xvS//8b0v//FL3s/xS97P8b0v//G9L//xvS//8Oqdn/AH+ygQAAAAAAAAAAAAAAAAAAAAAAgrVAAIK1/y3W//8t1v//Ldb//y3W//8t1v//Ldb//y3W//8t1v//AIK1/wCCtUAAAAAAAAAAAAAAAAAAAAAAAAAAAACGuf8xxu3/Qdv//0Hb//9B2///Qdv//0Hb//9B2///Mcbt/wCGuf8AAAAAAAAAAAAAAAAAAAAAAAAAAACKvUAAir3/Qsru/1jg//9Y4P//WOD//1jg//9Y4P//WOD//0LK7v8Air3/AIq9QAAAAAAAAAAAAAAAAACOwUAAjsH/U8/v/2/l//9v5f//b+X//2/l//9v5f//b+X//2/l//9v5f//U8/v/wCOwf8AjsFAAAAAAACTxoEAk8b/ZNXx/4Xr//+F6///hev//4Xr//+F6///hev//4Xr//+F6///hev//4Xr//9k1fH/AJPG/wCTxoEAl8r/3f///734//+c8P//nPD//5zw//+c8P//nPD//5zw//+c8P//nPD//5zw//+c8P//vfj//93///8Al8r/AJvOgQCbzv8Am87/AJvO/wCbzv9YyOf/sPX//7D1//+w9f//sPX//1jI5/8Am87/AJvO/wCbzv8Am87/AJvOgQAAAAAAAAAAAAAAAAAAAAAAAAAAAJ/S/8L5///C+f//wvn//8L5//8An9L/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACi1YFpz+r/0vz//9L8//9pz+r/AKLVgQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKXY/93////d////AKXY/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACo24Fv1O3/b9Tt/wCo24EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKrd/wCq3f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAx+MAAMPDAADAAwAAwAMAAOAHAADgBwAA4AcAAMADAAAAAAAAAAAAAAAAAAD4HwAA+B8AAPw/AAD8PwAA/n8AAA==" rel="icon" type="image/x-icon" /> |
| 26 | + <link href="${faviconUrl}" rel="icon" type="image/x-icon" /> |
29 | 27 | <title>React Example</title> |
30 | | - <link rel="stylesheet" href="${routes.stylesUrl}" /> |
| 28 | + <link rel="stylesheet" href="${stylesUrl}" /> |
31 | 29 | </head> |
32 | 30 | <body> |
33 | | - <div id="${routes.containerId}">${reactHtml}</div> |
34 | | - <script src="${routes.reactUrl}"></script> |
35 | | - <script src="${routes.reactDomUrl}"></script> |
36 | | - <script src="${routes.bundleUrl}"></script> |
| 31 | + <div id="${containerId}">${reactHtml}</div> |
| 32 | + <script src="${reactUrl}"></script> |
| 33 | + <script src="${reactDomUrl}"></script> |
| 34 | + <script src="${bundleUrl}"></script> |
37 | 35 | </body> |
38 | 36 | </html>`; |
39 | 37 | res.setHeader('Content-Type', 'text/html'); |
40 | 38 | res.end(pageHtml) |
41 | | - } else if (req.url === routes.propsUrl) { |
| 39 | + } else if (req.url === propsUrl) { |
42 | 40 | const items = getItems(); |
43 | 41 | const props = {items: items}; |
44 | 42 | res.setHeader('Content-Type', 'application/json'); |
45 | 43 | res.end(JSON.stringify(props)); |
46 | | - } else if (req.url === routes.reactUrl) { |
| 44 | + } else if (req.url === reactUrl) { |
47 | 45 | res.setHeader('Content-Type', 'text/javascript'); |
48 | 46 | res.setHeader('Cache-Control', 'public, max-age=86400'); |
49 | 47 | fs.readFile(`./node_modules/react/umd/react${suffix}`, (err, data) => { |
50 | 48 | if (err) { console.error(err); } |
51 | 49 | res.end(data); |
52 | 50 | }); |
53 | | - } else if (req.url === routes.reactDomUrl) { |
| 51 | + } else if (req.url === reactDomUrl) { |
54 | 52 | res.setHeader('Content-Type', 'text/javascript'); |
55 | 53 | res.setHeader('Cache-Control', 'public, max-age=86400'); |
56 | 54 | fs.readFile(`./node_modules/react-dom/umd/react-dom${suffix}`, (err, data) => { |
57 | 55 | if (err) { console.error(err); } |
58 | 56 | res.end(data); |
59 | 57 | }); |
60 | | - } else if (req.url === routes.stylesUrl) { |
| 58 | + } else if (req.url === stylesUrl) { |
61 | 59 | res.setHeader('Content-Type', 'text/css'); |
62 | 60 | fs.readFile('./src/style.css', (err, data) => { |
63 | 61 | if (err) { console.error(err); } |
64 | 62 | res.end(data); |
65 | 63 | }); |
66 | | - } else if (req.url === routes.bundleUrl) { |
| 64 | + } else if (req.url === bundleUrl) { |
67 | 65 | res.setHeader('Content-Type', 'text/javascript'); |
68 | 66 | fs.readFile('./dist/browser.js', (err, data) => { |
69 | 67 | if (err) { console.error(err); } |
|
0 commit comments