DEV Community

Ryo Kuroyanagi
Ryo Kuroyanagi

Posted on

Running WebpackDevServer in Docker

TL;DR A sample project to webpack-dev-server in a Docker container is in this repository.

Background

Sometimes we want to run webpack-dev-server in a Docker container.
The reason might be like following

  • Want to use a specific Node.js version docker image
  • Want to start project in a series of docker-compose services

Key points

There's some key points to run webpack-dev-server in a Docker container.

Needs to run the dev server for 0.0.0.0

By default, the dev server runs for 127.0.0.1 to enable accessing by localshot:XXXX on browsers. But this does not expose the content outside of a Docker container. You need to listen 0.0.0.0. Ref: What is the difference between 0.0.0.0, 127.0.0.1 and localhost?

...
  devServer: {
    compress: false,
    host: "0.0.0.0",
    port: 3000,
  },
...
Enter fullscreen mode Exit fullscreen mode

https://github.com/ku6ryo/WebpackDevServer-w-Docker/blob/master/webpack.config.js#L25

Naive watch option does not work

By default, the dev server's watch option is enabled and it automatically re-compiles and reloads every time a file changed. However, it does NOT work in the case of running in a Docker container. We need to use the poll option of webpack's watch option.

...
  watchOptions: {
    poll: 1000,
  }
...
Enter fullscreen mode Exit fullscreen mode

https://github.com/ku6ryo/WebpackDevServer-w-Docker/blob/master/webpack.config.js#L28

That's it! Hope this helps :)

Top comments (3)

Collapse
 
tqbit profile image
tq-bit

watchOptions saved my nerves. Thank you!

Collapse
 
ku6ryo profile image
Ryo Kuroyanagi

Grad to hear that ;)

Collapse
 
serdarde profile image
Serdar

Thank you!! I was struggling with nuxtjs2. Adding those lines solved the problem:
watchers: {
webpack: {
poll: true,
},
},