Cannot run webpack-dev-server inside docker

Question

I have created a docker image which serves a simple react app using webpack from inside the container, but I get nothing in the browser.

Here are my config files

package.json

{
  "name": "invas_client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --inline --content-base ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "http-server": "^0.8.5",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
    entry: './index.js',

    output: {
        filename: 'bundle.js',
        publicPath: ''
    },

    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
        ]
    }
}

Dockerfile

# Use starter image
FROM node:argon

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app

# Expose port
EXPOSE 8080

# Default command to run
CMD ["npm", "start"]

What's working fine

When I run npm start, the webpack-dev-server runs normally, and when I go to http://localhost:8080, I see my page.

What isn't working

When I run my server using docker, with the following command:

docker build -t anubhav756/app . && docker run -p 80:8080 anubhav756/app

the logs show everything working normally from inside the container, but when I point my browser to http://localhost, I get ERR_CONNECTION_RESET

Sample code's over here

Are you running Docker natively on Linux, or in a VM with Docker Machine? If it's a VM then your container port is published inside the VM, so you need to browse to its IP address - `docker-machine ip`. — Elton Stoneman, Sep 22 '16 at 07:50
Hmm. Anything interesting in the Docker chain from `iptables -L`? — Elton Stoneman, Sep 22 '16 at 07:58
`docker ps` shows this: CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES c25001e81847 anubhav756/invas_client "npm start" 16 seconds ago Up 14 seconds 0.0.0.0:80->8080/tcp berserk_hoover — Anubhav Dhawan, Sep 22 '16 at 08:10
`iptables -L` shows: Chain DOCKER (3 references) target prot opt source destination ACCEPT tcp -- anywhere 172.17.0.2 tcp dpt:http-alt Chain DOCKER-ISOLATION (1 references) target prot opt source destination DROP all -- anywhere anywhere DROP all -- anywhere anywhere DROP all -- anywhere anywhere RETURN all -- anywhere anywhere — Anubhav Dhawan, Sep 22 '16 at 08:13
All looks OK. Try a GET from inside the container to check the app is responding? `docker exec -it c25 bash` then `curl http://localhost:8080` — Elton Stoneman, Sep 22 '16 at 08:15
Got this: root@c25001e81847:/usr/src/app# curl http://localhost:8080 React — Anubhav Dhawan, Sep 22 '16 at 08:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123925/discussion-between-anubhav-dhawan-and-elton-stoneman). — Anubhav Dhawan, Sep 22 '16 at 08:19

score 63 · Accepted Answer · answered Sep 22 '16 at 12:01

63

You are actualy listening on localhost only. To be reachable from outside replace the following line in your package.json file:

"start": "webpack-dev-server --inline --content-base ."

by :

"start": "webpack-dev-server --host 0.0.0.0 --inline --content-base ."

Related discussion : https://github.com/webpack/webpack-dev-server/issues/147

answered Sep 22 '16 at 12:01

Raphayol

1,266
11
14

3

Thanks mate. That solved it right away! You've got a keen eye – Anubhav Dhawan Sep 22 '16 at 12:42
It's only solution if the page is served by server too. Otherwise u'll have websocket requests on your base domain which is not what you want. – wintercounter May 14 '18 at 18:10
This worked for me but for some reason I get a black page – Álvaro Apr 15 '23 at 22:20

score 6 · Answer 2 · answered Oct 20 '17 at 07:43

I just want to add something to Raphayol answer if you couldn't enable hot-reloading of webpack-dev-server inside container.
I couldn't make webpack or webpack-dev-server watch (--watch) mode work even after mounting my project folder into container.
To fix this you need to understand how webpack detects file changes within a directory.
It uses one of 2 softwares that add OS level support for watching for file changes called inotify and fsevent. Standard Docker images usually don't have these (specially inotify for linux) preinstalled so you have to install it in your Dockerfile.
Look for inotify-tools package in your distro's package manager and install it. fortunately all alpine, debian, centos have this.

score 4 · Answer 3 · answered Sep 02 '20 at 17:22

When using webpack-dev-server with Encore and exposing it through Docker, you we'll need to use --host 0.0.0.0 and --public localhost:8080 so files are served even on browsers not navigating to 0.0.0.0 adresses.

Here is what I used :

webpack-dev-server --hot --host=0.0.0.0 --public=localhost:8080

Jack The Grim · Answer 4 · 2022-06-24T08:16:32.223

to complement what Hugo H said, for me i had to do the following to let encore dev-server working fine on docker in a distant server where dev-server running on a declared adresse:

1 ) in webpack.config.js:

.configureDevServerOptions(options => {
    options.allowedHosts = 'all';
    options.host = '0.0.0.0';

    options.client       = {
        webSocketURL: 'https://encore-webserver.domain/ws'
    };
})

in package.json:

"dev-server": "encore dev-server --public https://encore-webserver.domain --port 80 ",

where encore-webserver.domain point with to a node docker container exposing port 80 who simply run npm run dev-server

this pages helped me to solve my problem:

Cannot run webpack-dev-server inside docker

What's working fine

What isn't working

4 Answers4

Linked

Related