How do I run WebPack DevServer in a container?

Question

Say we want to develop in an environment that is not localhost because of X-Frame-Options and other browser protections, but do not want to do a full deployment each time.

Specifically, on Windows, Vue JS and Traefik proxy.

Ideally without creating a new image.

score 1 · Answer 1 · answered May 03 '20 at 20:14

For this to work, you need to enable changing the public host name as documented in I am getting an "Invalid Host header" message, when running my React app in a Webpack dev server on Cloud9.io

For Vue I just added a file vue.config.js with the simplest, but the least secure solution, check the linked solution for a more secure one.

module.exports = {
  configureWebpack: {
    devServer: {
      compress: true,
      disableHostCheck: true,
    }
  }
}

Utilizing the technique in Using Docker-Compose, how to execute multiple commands we can cd to the /work/ folder and run npm run serve (or whatever the equivalent command is for your framework).

services:
  vue:
    image: node:lts
    networks:
      - intranet
    volumes:
      - /d/p/spring-cloud-demo/vue-app:/work
    command: >
      bash -c "cd /work
      && npm run serve"
    deploy:
      labels:
        - traefik.enable=true
        - traefik.http.routers.vue.rule=PathPrefix(`/`)
        - traefik.http.services.vue.loadbalancer.server.port=8080

In order for file watching of volumes to work in Windows machines. You need https://github.com/merofeev/docker-windows-volume-watcher which will broadcast changes to the Docker container that a file has changed in order for devServer to trigger a build.

How do I run WebPack DevServer in a container?

1 Answers1