Work around webpack/webpack-dev-server#887

Author: lox

Dockerfile

@@ -7,4 +7,5 @@ ADD package.json yarn.lock /frontend/
 RUN yarn install
 
 ADD . /frontend/
-CMD ["npm", "start"]
+
+CMD ["npm", "start"]

docker-compose.override.yml

@@ -1,12 +1,12 @@
-version: '2'
+version: '2.1'
 
 services:
   frontend:
     volumes:
-      - ".:/frontend:cached,ro"
+      - ".:/frontend:cached"
       - "./bundle-analysis:/frontend/bundle-analysis"
       - "./dist:/frontend/dist"
       - "./coverage:/frontend/coverage"
       - /frontend/node_modules
     ports:
-      - "4890:4890"
+      - "4890:4890"

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '2'
+version: '2.1'
 
 services:
   frontend:
@@ -8,9 +8,11 @@ services:
       - "./bundle-analysis:/frontend/bundle-analysis"
       - "./dist:/frontend/dist"
       - "./coverage:/frontend/coverage"
+    extra_hosts:
+     - "buildkite.dev:0.0.0.0" # fix for hostname checking in webpack-dev-server
     environment:
-      - EMOJI_HOST
-      - FRONTEND_HOST
+      - EMOJI_HOST=${EMOJI_HOST:-http://buildkite.dev:4890/_frontend/dist/}
+      - FRONTEND_HOST=${FRONTEND_HOST:-http://buildkite.dev:4890/_frontend/vendor/emojis/}
       - BUILDKITE
       - BUILDKITE_COMMIT
       - BUILDKITE_ORGANIZATION_SLUG

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "env": "env",
-    "start": "NODE_ENV=development webpack-dev-server --config webpack/config.js --progress --colors --cache --inline --hot --port 4890",
+    "start": "NODE_ENV=development webpack-dev-server --config webpack/config.js --progress --colors --cache --inline --hot --host buildkite.dev --port 4890",
     "test": "jest",
     "test-with-coverage": "jest --coverage",
     "lint": "eslint .",