Don't forget to give "--host 0.0.0.0" to the startup option of webpack-dev-server using docker

#docker #webpack

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

 {
   ...
   "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.