No way to extend webpack-server options

[Zeno Jiricek]

Running my project in Docker with docker-compose.

webpack-serve only listens for requests on 127.0.0.1:$PORT.

If we could extend the config in lib/dev.js then i could specify the host option to be 0.0.0.0.

This way the webpack-serve is listening to requests coming from outside my docker container.

Here's how I'm running x0:

docker-compose.yml

version: "2.0"

services:

  tool:
    image: airtonix/${npm_package_name}:${npm_package_version}
    ports:
      - 8080:8080
    volumes:
      - "./src:/app/src"

docker-compose--build.yml

version: "2.0"

services:

  tool:
    build: .
    image: airtonix/${npm_package_name}:${npm_package_version}

Dockerfile

FROM node:8.9.0-alpine as builder

WORKDIR /build

RUN apk add --no-cache \
  autoconf \
  automake \
  ca-certificates \
  curl \
  g++ \
  gcc \
  git \
  jpeg-dev \
  jq \
  make \
  nasm \
  openssh \
  openssl \
  python \
  run-parts \
  zlib-dev \
 && update-ca-certificates

RUN npm install -g node-gyp

COPY ./package.json .
COPY ./package-lock.json .
RUN npm install


FROM node:8.9.0-alpine

WORKDIR /app
COPY . /app
COPY --from=builder /build/node_modules /app/node_modules
CMD [ "npm", "run", "container:prod" ]

package.json

{
  "name": "zenobius",
  "version": "4.0.0-beta",
  "scripts": {
    "dev": "npm run docker:run -- tool npm run container:dev",
    "prod": "npm run docker:run -- tool npm run container:prod",
    "// [container] commands": "",
    "container:dev": "MODE=development x0 src/content",
    "container:prod": "MODE=production x0 build src/content",
    "// [workstation] Release Commands": "",
    "git:pull": "git pull",
    "git:publish": "npx npm-run-all --serial release:post:git-add release:post:git-commit-amend release:post:git-push-origin",
    "prerelease": "npx npm-run-all --serial git:pull",
    "postversion": "npm run docker:run -- tool container:release",
    "release": "npx standard-version",
    "postrelease": "git push --follow-tags",
    "release:post:git-add": "git add .",
    "release:post:git-commit-amend": "git commit --amend --no-edit",
    "release:post:git-push-origin": "git push --follow-tags",
    "// [workstation] Docker Commands": "",
    "docker:run": "docker-compose run --service-ports --rm",
    "docker:shell": "npm run docker:run -- tool /bin/sh",
    "docker:build": "docker-compose -f docker-compose--build.yml build tool",
    "// [container] Release Commands": "",
    "container:release": "npx run-s release:build-frontend release:publish-styleguide",
    "container:release:changelog": "conventional-changelog --infile=./project/CHANGELOG.md "
  },
  "dependencies": {
    "webpack": "4.20.2",
    "axios": "0.17.0",
    "node-sass": "4.5.3",
    "push-dir": "0.4.1",
    "@compositor/x0": "6.0.6"
  }
}

$ npm run docker:build
$ npm run dev

[Zeno Jiricek]

i managed to get around this limitation (and my issue specifically) by doing the following:

package.json

...
"scripts": {
    "dev": "npm run docker:run -- tool npm run container:dev",
    "prod": "npm run docker:run -- tool npm run container:prod",

    "// [container] commands": "",
    "container:dev": "npm-run-all --parallel container:dev:proxy container:dev:x0",
    "container:dev:proxy": "http-proxy --verbose --hostname=0.0.0.0 --port=3000 localhost:8080",
    "container:dev:x0": "x0 src/content",
   ...
},
"dependancies": {
    ...
    "http-proxy-cli": "1.1.0",
    ...
}

[Zeno Jiricek]

Remaining issues around running webpack in docker are that watchOptions is not used due to the way x0 launches webpack-serve.

    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    }

[Zeno Jiricek]

Considering webpack-serve is defunct now, i think the best way moving forward on this is to:

• provide a sane default instance of webpack-dev-server
• allow the user to provide their own instance of webpack-dev-server somehow.

[Zeno Jiricek]

meh... webpack-serve author isn't very accomodating... kinda deflating.

anyway, can get x0 to listen to 0.0.0.0 by simply setting your webpack.config.js to:

module.exports = {
    serve: {
      host: '0.0.0.0',
      port: 8080,
      hot: true,
    }
};

Trouble is that webpack-hot-client or whatever it's called is now also hardcoded to try to connect to a server at ws://0.0.0.0:8081... webpack-server have this crazy idea that you're not allowed to set hot.server different to server.host

[Zeno Jiricek]

🎉