From 68054a3cc6bcf0051f0db111548bbe10b4b92c1a Mon Sep 17 00:00:00 2001 From: natterstefan Date: Tue, 14 Aug 2018 12:36:06 +0200 Subject: [PATCH] enable storybook to deliver statics from hapijs server --- package.json | 4 ++- src/client/components/app/index.stories.js | 2 +- storybook/README.md | 18 +++++++++++++- storybook/middleware.js | 27 ++++++++++++++++++++ webpack/common.config.js | 8 +++++- yarn.lock | 29 +++++++++++++++++++++- 6 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 storybook/middleware.js diff --git a/package.json b/package.json index b474041..9828696 100644 --- a/package.json +++ b/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", diff --git a/src/client/components/app/index.stories.js b/src/client/components/app/index.stories.js index f589231..6f6d4ac 100644 --- a/src/client/components/app/index.stories.js +++ b/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', }} diff --git a/storybook/README.md b/storybook/README.md index f2ee0f1..10de36e 100644 --- a/storybook/README.md +++ b/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 diff --git a/storybook/middleware.js b/storybook/middleware.js new file mode 100644 index 0000000..6ea498f --- /dev/null +++ b/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}/`, + }), + ) +} diff --git a/webpack/common.config.js b/webpack/common.config.js index 03f9d49..3047117 100644 --- a/webpack/common.config.js +++ b/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`, }, { diff --git a/yarn.lock b/yarn.lock index a8cb85e..789ad34 100644 --- a/yarn.lock +++ b/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" +http-proxy-middleware@0.18.0: + 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: