enable storybook to deliver statics from hapijs server (#4)

package.json

@@ -33,14 +33,15 @@
     "build:analyse":
       "npm run prebuild && cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.analyse.config.js",
     "build:dev": "npm run prebuild && 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",
     "prebuild": "rimraf dist",
     "precommit": "lint-staged",
     "start": "npm run build && node .",
+    "start:server": "node .",
     "storybook": "start-storybook -p 9001 -c storybook",
     "test": "jest",
     "test:coverage": "jest --coverage",
@@ -83,6 +84,7 @@
     "error-overlay-webpack-plugin": "0.1.5",
     "eslint": "4.19.1",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
+    "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,24 @@
 # 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`. If you want to enter the watch mode of the
+server run `npm run watch:server` as well. We recommend to run storybook
+together with the server in watch mode.
+
+## 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

@@ -92,7 +92,7 @@ module.exports = {
             'static',
             'fonts',
           )}/**/*.+(ttf|otf|eot|svg|woff|woff2)`,
-          to: `${BUILD_DIR}/static/fonts`,
+          to: `${BUILD_DIR}/static`,
         },
       ],
       {