Don't forget to give "--host 0.0.0.0" to the startup option of webpack-dev-server using docker
Tags: docker, webpack
Published: 2019-06-02 14:10:50

# You must give "--host 0.0.0.0" option to webpack-dev-server in the container

## tl;dr

It is necessary to give "--host 0.0.0.0" to the startup option of webpack-dev-server in the docker container in which server you want to access via http protocol by your browser.

## intro

I will develop react application with docker because I want to keep the developing environment clean. My local developing environment is highly customized with globally installed npm packages to enhance the development experience. Coding is comfortable though, I'm afraid of the development being influenced by such packages so I feel the necessity of sand-box environment like docker container to execute and test application in genuine environment.

## the overview I initially developing

### directory structure
```
react-app
  -- src
    -- components
    -- index.html
    -- index.js
  -- Dockerfile
  -- docker-compose.yml
  -- package.json
  -- webpack.config.js
  -- yarn.lock
```

### Dockerfile
```
FROM node
WORKDIR /app
COPY package.json /app/package.json
COPY yarn.lock /app/yarn.lock
RUN yarn
```

### docker-compose.yml
```
version: '3'
services:
  react:
    build: .
    ports:
      - 8642:8080
    command: yarn start
    volumes:
      - .:/app
    tty: true

```

### package.json
```
{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --config webpack.config.js --mode production",
    "serve": "http-server ./dist"
  }
}
```

### webpack.config.js

```
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, '/dist'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: `${resolve(__dirname, '/src/index.html')}`
    })
  ]
};

```

## a problem occurred

ok, I'm Ready, so check the server -- input "localhost:8642" to 
the browser. I see the awful error message "Can not access this page".

## the reason why I cannot see the page

In the first setting, the server was not accessible from outside.

```
webpack-dev-server --mode development --open --hot
```

## solution

From the official manual, `If you want your server to be accessible externally, specify it like this:`

```
webpack-dev-server --host 0.0.0.0
```

https://webpack.js.org/configuration/dev-server/#devserverhost

## final setting

### package.json
```diff
 {
   ...
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --mode development --open --hot",
+    "start": "webpack-dev-server --mode development --open --hot --host 0.0.0.0"
     "build": "webpack --config webpack.config.js --mode production",
     "serve": "http-server ./dist"
   }
 }
```

By just adding "--host 0.0.0.0", I can see the page served by webpack-dev-server in the docker container.

## conclusion

In conclusion, you must give "--host 0.0.0.0" option to webpack-dev-server when you create a server on Docker container.