2.9.0

leebenson · leebenson · commit b57360d4e199 · 2017-10-17T17:32:48.000+01:00
2.9.0 - 2017-10-17 ----------------------------------------------- ## Building * Fixes static building via `npm run build-static`, by replacing broken `chunk-manifest-webpack-plugin` (closes #55) ## Webpack * Adds `src` to modules path, to avoid `src/` prefixes at the start of userland imports (closes #69) * Fixes stats configuration to work with the latest Webpack versions * Adds CORS config to webpack_dev_server, to enable LAN-wide browser hot-code reloading (closes #99) * Removes leading `/` in asset output, to allow defining a `<base>` tag in userland via React Helmet (closes #102) ## ESLint * Refactors rules, to be grouped by plugin * Adds `jsx-a11y/anchor-is-valid` rule to avoid 'href' on React Router `<Link>` attributes * Adds `function-paren-newline` rule to enforce consistent parenthesis * Adds `object-curly-newline` rule to allow one-line / multi-line object definitions * Fixes various kit and src files to conform to new rules ## React * Bumps to React v16 - officially out of RC! ## Config * Adds `.disableKoaHelmet()` for disabling [koa-helmet](https://www.npmjs.com/package/koa-helmet) on the server (closes #79) * Adds `.setKoaHelmetOptions()` for passing options to Koa Helmet * Sets `.koaHelmetOptions` and `.bodyParserOptions` to null by default ## App * Disables SSL by default ## Server * Removes leading `/` in bundled assets (along with Webpack) to allow for a `<base>` tag to define the load path ## Testing (Jest) * Fixes Jest testing to be compatible with Babel and React (closes #81, merges #84 - thanks @Nate0001) ## General * Fixes 'local' typo (merges #89 - thanks @kane-c) * Fixes misspelled `browserslist` file (merges #95 - thanks @klarstrup) * Adds idiomatic [React Helmet](https://github.com/nfl/react-helmet) `<head>` tags, adds missing html/body attributes, base, link, style, script and noscript, uses new `Helmet.renderStatic()` call (closes #101 & #94 - thanks @klarstrup) * Adds default `<base href="/" />` tag, when none is defined with React Helmet ## Docker * Adds Alpine-based `Dockerfile` to reduce Docker image size from 943mb -> 323mb (closes #98, merges #97 - thanks @kane-c) * Adds `docker-compose.yml` for production (closes #98) * Adds `docker-compose.dev.yml` for local development. Removes the local `node_modules` to ensure Alpine-compatible Linux binaries are being referenced by local code changes. Supports hot code reloading in-browser and via SSR ## NPM * Bumps packages: "babel-eslint": "^8.0.1" "copy-webpack-plugin": "^4.1.1", "cross-env": "^5.1.0", "eslint": "^4.9.0", "eslint-config-airbnb": "^16.1.0", "eslint-plugin-compat": "^2.0.1", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-react": "^7.4.0", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "graphql-tag": "^2.5.0", "iltorb": "^2.0.1" "jest": "^21.2.1", "less": "^3.0.0-alpha.3", "postcss-loader": "^2.0.8", "resolve-url-loader": "^2.1.1", "rimraf": "^2.6.2", "serve": "^6.2.0", "style-loader": "^0.19.0", "webpack": "^3.8.0", "webpack-chunk-hash": "^0.5.0", "webpack-config": "^7.5.0", "webpack-dev-server": "^2.9.2", "webpack-manifest-plugin": "^1.3.2", "apollo-server-koa": "^1.1.7", "graphql": "^0.11.7", "koa-send": "^4.1.1", "prop-types": "^15.6.0", "react": "^16.0.0", "react-apollo": "^1.4.16", "react-dom": "^16.0.0", "react-hot-loader": "^3.1.1"
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,6 @@
 {
   "presets": [
+    "react",
     ["env", {
       "targets": {
         "node": true
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,12 +15,14 @@ module.exports = {
   env: {
     node: true,
     browser: true,
+    'jest/globals': true,
   },
   plugins: [
     'babel',
     'import',
     'jsx-a11y',
     'compat',
+    'jest',
   ],
   rules: {
     // General
@@ -67,6 +69,7 @@ module.exports = {
     'import/resolver': {
       node: {
         paths: [
+          PATHS.src,
           PATHS.root,
           'node_modules',
         ],
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,14 @@
-UNVERSIONED - 2017-10-17
+2.9.0 - 2017-10-17
 -----------------------------------------------
 
 ## Building
 * Fixes static building via `npm run build-static`, by replacing broken `chunk-manifest-webpack-plugin` (closes #55)
 
 ## Webpack
+* Adds `src` to modules path, to avoid `src/` prefixes at the start of userland imports (closes #69)
 * Fixes stats configuration to work with the latest Webpack versions
 * Adds CORS config to webpack_dev_server, to enable LAN-wide browser hot-code reloading (closes #99)
+* Removes leading `/` in asset output, to allow defining a `<base>` tag in userland via React Helmet (closes #102)
 
 ## ESLint
 * Refactors rules, to be grouped by plugin
@@ -26,13 +28,24 @@ UNVERSIONED - 2017-10-17
 ## App
 * Disables SSL by default
 
+## Server
+* Removes leading `/` in bundled assets (along with Webpack) to allow for a `<base>` tag to define the load path
+
+## Testing (Jest)
+* Fixes Jest testing to be compatible with Babel and React (closes #81, merges #84 - thanks @nate0001)
+
 ## General
 * Fixes 'local' typo (merges #89 - thanks @kane-c)
 * Fixes misspelled `browserslist` file (merges #95 - thanks @klarstrup)
-* Adds idiomatic [React Helmet](https://github.com/nfl/react-helmet) `<head>` tags, adds missing html/body attributes, link, style, script and noscript, uses new `Helmet.renderStatic()` call (closes #101 & #94 - thanks @klarstrup)
+* Adds idiomatic [React Helmet](https://github.com/nfl/react-helmet) `<head>` tags, adds missing html/body attributes, base, link, style, script and noscript, uses new `Helmet.renderStatic()` call (closes #101 & #94 - thanks @klarstrup)
+* Adds default `<base href="/" />` tag, when none is defined with React Helmet
 
-## NPM
+## Docker
+* Adds Alpine-based `Dockerfile` to reduce Docker image size from 943mb -> 323mb (closes #98, merges #97 - thanks @kane-c)
+* Adds `docker-compose.yml` for production (closes #98)
+* Adds `docker-compose.dev.yml` for local development. Removes the local `node_modules` to ensure Alpine-compatible Linux binaries are being referenced by local code changes. Supports hot code reloading in-browser and via SSR
 
+## NPM
 * Bumps packages:
 "babel-eslint": "^8.0.1"
 "copy-webpack-plugin": "^4.1.1",
diff --git a/Dockerfile b/Dockerfile
@@ -1,38 +1,35 @@
-FROM debian:jessie-slim
+FROM node:8-alpine
 
-ENV EPHIMERAL_PACKAGES "build-essential dh-autoreconf curl xz-utils python"
-ENV PACKAGES "libpng-dev"
-
-# Add `package.json` to build Debian compatible NPM packages
 WORKDIR /src
-ADD package.json .
-
-# install everything (and clean up afterwards)
-RUN apt-get update \
-  && apt-get install -y apt-utils \
-  && apt-get install -y ${EPHIMERAL_PACKAGES} ${PACKAGES} \
-  && curl -sL https://deb.nodesource.com/setup_8.x | bash - \
-  && apt-get install -y nodejs \
-  && cd /src \
+
+# Add NPM package config
+ADD package*.json ./
+
+# The official image has verbose logging; change it to npm's default
+ENV NPM_CONFIG_LOGLEVEL notice
+
+# Install everything (and clean up afterwards)
+RUN apk add --no-cache --virtual .gyp \
+    autoconf \
+    automake \
+    g++ \
+    libpng-dev \
+    libtool \
+    make \
+    nasm \
+    python \
   && npm i \
-  ; apt-get remove --purge -y ${EPHIMERAL_PACKAGES} \
-  ; apt-get autoremove -y ${EPHIMERAL_PACKAGES} \
-  ; apt-get clean \
-  ; apt-get autoclean \
-  ; echo -n > /var/lib/apt/extended_states \
-  ; rm -rf /var/lib/apt/lists/* \
-  ; rm -rf /usr/share/man/?? \
-  ; rm -rf /usr/share/man/??_*
+  && apk del .gyp
 
 # Add the remaining project files
 ADD . .
 
-# Build distribution
-RUN npm run build
-
 # Set the default host/port
 ENV HOST 0.0.0.0
 ENV PORT 4000
 
+# Build distribution
+RUN npm run build
+
 # Start the server by default
 CMD npm run server
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -0,0 +1,16 @@
+# Note: This is intended for use in local development
+version: '3.3'
+services:
+  reactql-dev:
+    build: .
+    volumes:
+      - .:/src
+      - /src/node_modules
+    ports:
+      - 8080:8080
+      - 8081:8081
+    environment:
+      HOST: "0.0.0.0"
+      BROWSER_HOST: "0.0.0.0"
+      PORT: "8081"
+    command: npm start
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,13 @@
+# Note: For production. For development, use `docker-compose.dev.yml`
+version: '3.3'
+services:
+  reactql-dev:
+    build: .
+    volumes:
+      - .:/src
+      - /src/node_modules
+    ports:
+      - 4000:4000
+    environment:
+      HOST: "0.0.0.0"
+      BROWSER_HOST: "0.0.0.0"
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  coverageReporters: ['text'],
+  collectCoverageFrom: [
+    'src/**/*.js(x)',
+  ],
+  transform: {
+    '^.+\\.js(x)$': '<rootDir>/jest.transform.js',
+  },
+};
diff --git a/jest.transform.js b/jest.transform.js
@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const babel = require('babel-jest');
+
+module.exports = babel.createTransformer({
+  presets: [
+    'react',
+    ['env', {
+      targets: {
+        node: true,
+      },
+    }],
+  ],
+  plugins: [
+    ['module-resolver', {
+      root: ['.'],
+      alias: {
+        src: './src',
+      },
+    }],
+    'transform-object-rest-spread',
+    'syntax-dynamic-import',
+    'transform-regenerator',
+    'transform-class-properties',
+    'transform-decorators-legacy',
+  ],
+});
diff --git a/kit/entry/server_dev.js b/kit/entry/server_dev.js
@@ -21,10 +21,8 @@ import server, { createReactHandler, staticMiddleware } from './server';
 // ----------------------
 
 // Get manifest values
-const css = '/assets/css/style.css';
-const scripts = [
-  'vendor.js',
-  'browser.js'].map(key => `/${key}`);
+const css = 'assets/css/style.css';
+const scripts = ['vendor.js', 'browser.js'];
 
 // Spawn the development server.
 // Runs inside an immediate `async` block, to await listening on ports
diff --git a/kit/views/ssr.js b/kit/views/ssr.js
@@ -18,6 +18,7 @@ const Html = ({ helmet, scripts, window, css, children }) => (
       <meta httpEquiv="Content-Language" content="en" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       {helmet.meta.toComponent()}
+      {helmet.base.toString() ? helmet.base.toComponent() : <base href="/" />}
       <link rel="stylesheet" href={css} />
       {helmet.link.toComponent()}
       {helmet.style.toComponent()}
diff --git a/kit/webpack/base.js b/kit/webpack/base.js
@@ -47,6 +47,7 @@ export default new WebpackConfig().merge({
     // short-hand imports without knowing the full/relative path.  If it
     // doesn't find anything, then it'll check `node_modules` as normal
     modules: [
+      PATHS.src,
       PATHS.root,
       'node_modules',
     ],
@@ -98,7 +99,7 @@ export default new WebpackConfig().merge({
     path: PATHS.public,
 
     // Deem the `dist` folder to be the root of our web server
-    publicPath: '/',
+    publicPath: '',
 
     // Filenames will simply be <name>.js
     filename: '[name].js',
diff --git a/kit/webpack/browser_dev.js b/kit/webpack/browser_dev.js
@@ -27,7 +27,7 @@ import PATHS from '../../config/paths';
 // Host and port settings to spawn the dev server on
 const HOST = process.env.BROWSER_HOST || 'localhost';
 const PORT = process.env.BROWSER_PORT || 8080;
-const LOCAL = `http://${HOST}:${PORT}`;
+const LOCAL = `http://${HOST}:${PORT}/`;
 
 export default new WebpackConfig().extend({
   '[root]/browser.js': conf => {
@@ -75,7 +75,7 @@ export default new WebpackConfig().extend({
     compress: true,
 
     // Assume app/public is the root of our dev server
-    publicPath: '/',
+    publicPath: '',
 
     // Inline our code, so we wind up with one, giant bundle
     inline: true,
@@ -109,7 +109,7 @@ export default new WebpackConfig().extend({
   // Extra output options, specific to the dev server -- source maps and
   // our public path
   output: {
-    publicPath: `${LOCAL}/`,
+    publicPath: `${LOCAL}`,
   },
 
   plugins: [
diff --git a/kit/webpack/browser_prod.js b/kit/webpack/browser_prod.js
@@ -168,7 +168,7 @@ export default new WebpackConfig().extend({
       // Put this in `dist` rather than `dist/public`
       fileName: '../manifest.json',
       // Prefix assets with '/' so that they can be referenced from any route
-      publicPath: '/',
+      publicPath: '',
       inlineManifest: true,
     }),
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/app.js b/src/app.js
diff --git a/src/components/main/index.js b/src/components/main/index.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"presets": [`
	`3`	`+ "react",`
`3`	`4`	`["env", {`
`4`	`5`	`"targets": {`
`5`	`6`	`"node": true`