enable storybook to deliver statics from hapijs server

package.json

@@ -27,13 +27,14 @@
     "build": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.config.js",
     "build:analyse": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.analyse.config.js",
     "build:dev": "webpack --config webpack/dev.config.js",
-    "build:storybook": "build-storybook -o dist/storybook",
+    "build:storybook": "build-storybook -o dist/storybook -c storybook",
     "format": "eslint --fix ./src/**/*.js",
     "format:scss": "stylelint --fix ./src/**/*.scss",
     "lint": "eslint ./**/*.js",
     "lint:scss": "stylelint ./src/**/*.scss",
     "precommit": "lint-staged",
     "start": "npm run build && node .",
+    "start:server": "node .",
     "storybook": "start-storybook -p 9001 -c storybook",
     "test": "jest",
     "test:coverage": "jest --coverage",
@@ -78,6 +79,7 @@
     "eslint": "4.19.1",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "html-loader": "0.5.5",
+    "http-proxy-middleware": "0.18.0",
     "husky": "0.14.3",
     "jest": "23.1.0",
     "lint-staged": "7.1.2",

src/client/components/app/index.stories.js

@@ -39,7 +39,7 @@ class Wrapper extends React.Component {
         otherProps={{
           image: {
             alt: 'App',
-            src: 'http://via.placeholder.com/350x150',
+            src: '350x150.png', // http://via.placeholder.com/350x150
           },
           title: 'Hello Storybook',
         }}

storybook/README.md

@@ -1,9 +1,25 @@
 # Storybook
 
-The boilerplate comes along with a fully functional storybook to present components
+The boilerplate comes along with a [storybook][1] to present components
 in an isolated (and mocked) environment to other developers and your clients.
 
+## Start Storybook
+
+Running storybook not only requires to exectute `npm run storybook` but also
+`npm run start:server`. Or if you want to enter the watch mode of the
+server and client fields (including statics): `npm run watch:server` together
+with `npm run watch:client`. We recommend to run storybook together with the
+watch mode of the client and server.
+
+## Static files
+
+The storybook is able to deliver static files, because we implemented a solution
+in [middleware.js](./middleware.js). The solution is based on [indiesquidge's
+solution](https://github.com/storybooks/storybook/issues/208#issuecomment-306953718).
+
 ## Available features and toolset
 
 * [Apollo Client and GQL Endpoint Mocking](./gql/README.md)
 * [Mocked Redux Store](./redux/README.md)
+
+[1]: https://github.com/storybooks/storybook

storybook/middleware.js

@@ -0,0 +1,27 @@
+/**
+ * Inspired by (Credits):
+ * - https://github.com/storybooks/storybook/issues/208#issuecomment-306953718
+ *
+ * Other links
+ * - https://github.com/storybooks/storybook/issues/1685#issuecomment-336811882
+ * - https://github.com/storybooks/storybook/issues/714#issuecomment-302996551
+ * - https://github.com/storybooks/storybook/pull/435#issuecomment-264813688
+ */
+/* eslint-disable import/no-extraneous-dependencies */
+const proxy = require('http-proxy-middleware')
+
+require('dotenv').config()
+
+const host = process.env.HOST || 'localhost'
+const port = process.env.PORT || 8000
+
+// proxy static request to our Node.js server
+module.exports = function expressMiddleware(router) {
+  router.use(
+    '/__static__',
+    proxy({
+      changeOrigin: true,
+      target: `http://${host}:${port}/`,
+    }),
+  )
+}

webpack/common.config.js

@@ -74,7 +74,13 @@ module.exports = {
       [
         {
           context: './src/static',
-          from: `${path.resolve(__dirname, '..', 'src', 'static', 'images')}/**/*.+(png|jpg|gif)`,
+          from: `${path.resolve(
+            __dirname,
+            '..',
+            'src',
+            'static',
+            'images',
+          )}/**/*.+(png|jpg|gif|svg)`,
           to: `${BUILD_DIR}/static/images`,
         },
         {

yarn.lock

@@ -4502,6 +4502,10 @@ event-stream@~3.3.0:
     stream-combiner "~0.0.4"
     through "~2.3.1"
 
+eventemitter3@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
+
 events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
@@ -4930,6 +4934,12 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+follow-redirects@^1.0.0:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.5.tgz#3c143ca599a2e22e62876687d68b23d55bad788b"
+  dependencies:
+    debug "^3.1.0"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -5765,6 +5775,23 @@ http-parser-js@>=0.4.0:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
 
+[email protected]:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz#0987e6bb5a5606e5a69168d8f967a87f15dd8aab"
+  dependencies:
+    http-proxy "^1.16.2"
+    is-glob "^4.0.0"
+    lodash "^4.17.5"
+    micromatch "^3.1.9"
+
+http-proxy@^1.16.2:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  dependencies:
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
+
 http-signature@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
@@ -7738,7 +7765,7 @@ micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
+micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8, micromatch@^3.1.9:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   dependencies: