/
server.js
75 lines (58 loc) · 1.93 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
/* @flow */
import 'ignore-styles';
import Koa from 'koa';
import Router from 'koa-router';
import compress from 'koa-compress';
import send from 'koa-send';
import fs from 'fs';
import path from 'path';
import crypto from 'crypto';
import dedent from 'dedent';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { collect } from 'linaria/server'; // eslint-disable-line import/no-unresolved
import App from './components/App';
import config from '../serve.config';
const cache = {};
const css = fs.readFileSync(path.join(__dirname, '../dist/styles.css'), 'utf8');
const app = new Koa();
const router = new Router();
app.use(compress());
router.get('/', async ctx => {
const html = ReactDOMServer.renderToStaticMarkup(<App />);
const { critical, other } = collect(html, css);
const slug = crypto
.createHash('md5')
.update(other)
.digest('hex');
cache[slug] = other;
ctx.type = 'html';
ctx.body = dedent`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Linaria – zero-runtime CSS in JS library</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,600">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono">
<style type="text/css">${critical}</style>
</head>
<body>
<div id="root">${html}</div>
<script src="/dist/app.bundle.js"></script>
<link rel="stylesheet" href="/styles/${slug}">
</body>
</html>
`;
});
router.get('/dist/:path+', async ctx => {
await send(ctx, path.join('dist', ctx.params.path));
});
router.get('/styles/:slug', async ctx => {
ctx.type = 'text/css';
ctx.body = cache[ctx.params.slug];
});
app.use(router.routes());
app.listen(config.port);
console.log(`Listening on http://localhost:${config.port}`);