some production stuff

destructobeam · destructobeam · commit fc94e29801bf · 2018-12-21T22:28:38.000+13:00
diff --git a/README.md b/README.md
@@ -17,8 +17,17 @@ Includes Webpack hot reloading for server and client apps.
 Uses the beautiful nature of Koa's async function middleware to encapsulate the
 series of steps required to render your application on the server.
 
+## Notes
+
+### Prefetching
+
+If you want route based prefetching, After.js seems like a good option.
+
+GraphQL should be fetched on server by something like ApolloClient.
+
 ## TODO
 
 - Figure out and implement client only code splitting for when you need super fast TTI, and don't care about overly complex auxiliary interfaces being rendered on the server and included in the initially loaded bundle.
 - Possibly use streaming response on server
+- Testing setup
 - Production settings
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  snapshotSerializers: ['jest-emotion'],
+};
diff --git a/package.json b/package.json
@@ -4,10 +4,11 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "rm -rdf ./dist && node scripts/webpack",
+    "dev": "rm -rdf ./dist && node scripts/webpack.js",
     "clean": "rm -rdf ./dist",
-    "build": "NODE_ENV=production node scripts/webpack",
-    "start": "NODE_ENV=production node dist/server.js"
+    "build": "node scripts/webpack.js",
+    "start": "node dist/server.js",
+    "test": "NODE_ENV=test jest"
   },
   "dependencies": {
     "@loadable/component": "^5.2.2",
@@ -32,6 +33,11 @@
     "@loadable/webpack-plugin": "^5.2.2",
     "babel-loader": "^8.0.4",
     "babel-plugin-emotion": "^10.0.5",
+    "compression-webpack-plugin": "^2.0.0",
+    "jest": "^23.6.0",
+    "jest-emotion": "^10.0.5",
+    "react-test-renderer": "^16.7.0",
+    "size-plugin": "^1.1.1",
     "start-server-webpack-plugin": "^2.2.5",
     "webpack": "^4.27.1",
     "webpack-dev-server": "^3.1.10",
diff --git a/scripts/serve.js b/scripts/serve.js
@@ -3,12 +3,13 @@ const https = require('https');
 
 const app = require('../src/server').default;
 const dev = process.env.NODE_ENV !== 'production';
+const ssl = process.env.PROTOCOL || 'http';
 const port = process.env.PORT || 3000;
 
 let handler = app.callback();
 let server;
 
-if (dev) {
+if (ssl) {
   server = http.createServer(handler);
 } else {
   server = https.createServer(handler);
@@ -19,7 +20,7 @@ server.listen(port, error => {
     console.log(error);
   }
 
-  console.log('Server started');
+  console.log('Server started on port ', port);
 });
 
 if (module.hot) {
diff --git a/src/server.js b/src/server.js
@@ -16,7 +16,7 @@ const server = new Koa();
 
 if (!dev) {
   // Use webpack-dev-server in dev mode, otherwise serve static assets normally
-  server.use(KoaStatic(path.resolve('..', 'public')));
+  server.use(KoaStatic(path.resolve('public')));
 }
 
 // Load asset manifest in to state and watch changes to manifest in development
diff --git a/src/server/render.js b/src/server/render.js
@@ -20,10 +20,11 @@ const render = async (context, next) => {
       ${title.toString()}
       ${meta.toString()}
       ${link.toString()}
+
+      ${chunkExtractor.getScriptTags()}
     </head>
     <body ${bodyAttributes.toString()}>
       <div id="main" role="main">${reactString}</div>
-      ${chunkExtractor.getScriptTags()}
     </body>
     </html>
   `;
diff --git a/webpack/client.js b/webpack/client.js
@@ -3,19 +3,15 @@ const merge = require('webpack-merge');
 
 const dev = process.env.NODE_ENV !== 'production';
 
+const CompressionPlugin = require('compression-webpack-plugin');
 const { HotModuleReplacementPlugin } = require('webpack');
 const LoadablePlugin = require('@loadable/webpack-plugin');
+const SizePlugin = require('size-plugin');
 const WebpackBar = require('webpackbar');
 
 let config = {
   name: 'client',
 
-  output: {
-    path: path.resolve(__dirname, '..', 'public', 'assets'),
-    publicPath: 'http://localhost:3001/assets/',
-    filename: '[name].[hash].js',
-  },
-
   module: {
     rules: [
       {
@@ -34,6 +30,7 @@ let config = {
               ],
               '@babel/preset-react',
             ],
+
             plugins: [
               '@babel/plugin-syntax-dynamic-import',
               '@loadable/babel-plugin',
@@ -49,8 +46,8 @@ let config = {
     new LoadablePlugin({
       writeToDisk: true,
     }),
+    new SizePlugin(),
   ],
-
 };
 
 if (dev) {
@@ -61,13 +58,20 @@ if (dev) {
       main: ['webpack/hot/signal', './src/client.js'],
     },
 
+    output: {
+      path: path.resolve(__dirname, '..', 'public', 'assets'),
+      publicPath: 'http://localhost:3001/assets/',
+      filename: '[name].[hash].js',
+    },
+
     devtool: 'source-map',
     devServer: {
       hot: true,
       headers: { 'Access-Control-Allow-Origin': '*' },
       contentBase: path.resolve('..', 'public', 'assets'),
       publicPath: 'http://localhost:3001/assets/',
       port: 3001,
+      quiet: true,
     },
 
     plugins: [
@@ -78,9 +82,18 @@ if (dev) {
 } else {
   config = merge(config, {
     mode: 'production',
+
     entry: {
       main: './src/client.js',
     },
+
+    output: {
+      path: path.resolve(__dirname, '..', 'public', 'assets'),
+      publicPath: '/assets/',
+      filename: '[name].[hash].js',
+    },
+
+    plugins: [new CompressionPlugin()],
   });
 }
 
diff --git a/webpack/server.js b/webpack/server.js
@@ -18,6 +18,8 @@ let config = {
     filename: 'server.js',
   },
 
+  devtool: 'source-map',
+
   module: {
     rules: [
       {
@@ -38,6 +40,7 @@ let config = {
               ],
               '@babel/preset-react',
             ],
+
             plugins: [
               '@babel/plugin-syntax-dynamic-import',
               '@loadable/babel-plugin',
@@ -58,12 +61,14 @@ let config = {
 
 if (dev) {
   config = merge(config, {
+    mode: 'development',
+
     entry: {
       server: ['webpack/hot/signal', './scripts/serve.js'],
     },
-    mode: 'development',
-    devtool: 'source-map',
+
     watch: true,
+
     plugins: [
       new HotModuleReplacementPlugin(),
       new WebpackBar({ name: 'Server', color: 'blue' }),
@@ -78,9 +83,14 @@ if (dev) {
 } else {
   config = merge(config, {
     mode: 'production',
+
     entry: {
       server: './scripts/serve.js',
     },
+
+    optimization: {
+      minimize: false,
+    },
   });
 }
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ snapshotSerializers: ['jest-emotion'],`
	`3`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const server = new Koa();`
`16`	`16`
`17`	`17`	`if (!dev) {`
`18`	`18`	`// Use webpack-dev-server in dev mode, otherwise serve static assets normally`
`19`		`- server.use(KoaStatic(path.resolve('..', 'public')));`
	`19`	`+ server.use(KoaStatic(path.resolve('public')));`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`// Load asset manifest in to state and watch changes to manifest in development`