Fail to run react application on Docker

Question

problem

I'm making simple React application by webpack without create-react-app .
Now I try to run this React application on Docker by commanding docker-compose up , but this is failed.
I want to know how to fix to run on Docker by docker-compose up .

~/hospital master*
❯ docker-compose up
Starting hospital_client_1 ... done
Attaching to hospital_client_1
client_1  | 
client_1  | > client@1.0.0 start /app
client_1  | > webpack-dev-server --mode=development "0.0.0.0" "3000"
client_1  | 
client_1  | /app/node_modules/webpack-cli/bin/utils/convert-argv.js:547
client_1  |                             const i = content.indexOf("=");
client_1  |                                               ^
client_1  | 
client_1  | TypeError: content.indexOf is not a function
client_1  |     at /app/node_modules/webpack-cli/bin/utils/convert-argv.js:547:23
client_1  |     at Array.forEach (<anonymous>)
client_1  |     at processOptions (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:546:11)
client_1  |     at processConfiguredOptions (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:170:4)
client_1  |     at module.exports (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:131:10)
client_1  |     at Object.<anonymous> (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)
client_1  |     at Module._compile (internal/modules/cjs/loader.js:777:30)
client_1  |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
client_1  |     at Module.load (internal/modules/cjs/loader.js:643:32)
client_1  |     at Function.Module._load (internal/modules/cjs/loader.js:556:12)
client_1  | npm ERR! code ELIFECYCLE
client_1  | npm ERR! errno 1
client_1  | npm ERR! client@1.0.0 start: `webpack-dev-server --mode=development "0.0.0.0" "3000"`
client_1  | npm ERR! Exit status 1
client_1  | npm ERR! 
client_1  | npm ERR! Failed at the client@1.0.0 start script.
client_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
client_1  | 
client_1  | npm ERR! A complete log of this run can be found in:
client_1  | npm ERR!     /root/.npm/_logs/2019-12-02T13_52_45_192Z-debug.log
hospital_client_1 exited with code 1

what I tried

This React application successes to run in local environment(npm start).

some codes

hospital
  ├ client
  │  ├ src
  │  │  ├ components
  │  │  │  └ Demo.tsx
  │  │  ├ App.tsx
  │  │  ├ index.html
  │  │  └ index.tsx
  │  ├ Dockerfile
  │  ├ package.json
  │  └ webpack.config.js
  └ docker-compose.yml

Dockerfile

FROM node:alpine
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm start

docker-compose.yml

version: '3'
services:
  client:
    command: 'npm start --host 0.0.0.0 --port 3000'
    build:
      dockerfile: Dockerfile
      context: ./client
    ports:
      - '3000:3000'
    volumes:
      - /app/node_modules
      - ./client:/app

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',

  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  devServer: {
    port: '3000',
    hot: true,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.ts(x?)$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],

  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },
};

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "start": "webpack-dev-server --mode=development"
  },

The entire code is here:
https://github.com/jpskgc/hospital

Update

I fixed Dockerfile and docker-compose.yml in following way.
It called another error.

FROM node:alpine
WORKDIR '/app'
// ADD 
RUN apk add --no-cache bash
COPY ./package.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm start

version: '3'
services:
  client:
    // change command
    command: bash -c "npm start --host 0.0.0.0 --port 3000"
    build:
      dockerfile: Dockerfile
      context: ./client
    ports:
      - '3000:3000'
    volumes:
      - /app/node_modules
      - ./client:/app

❯ docker-compose up
Creating network "hospital_default" with the default driver
Creating hospital_client_1 ... done
Attaching to hospital_client_1
client_1  | internal/modules/cjs/loader.js:628
client_1  |     throw err;
client_1  |     ^
client_1  | 
client_1  | Error: Cannot find module '/app/bash'
client_1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
client_1  |     at Function.Module._load (internal/modules/cjs/loader.js:527:27)
client_1  |     at Function.Module.runMain (internal/modules/cjs/loader.js:840:10)
client_1  |     at internal/main/run_main_module.js:17:11 {
client_1  |   code: 'MODULE_NOT_FOUND',
client_1  |   requireStack: []
client_1  | }

Answer 1

looks like something is wrong with your docker-compose start up command because it fails on reading arguments:

/app/node_modules/webpack-cli/bin/utils/convert-argv.js:547
client_1  |                             const i = content.indexOf("=");

for that purposes i usually do like this:

command: bash -c "(some_command_here && some_second_command_here && npm start --host 0.0.0.0 --port 3000"

but since you are starting from FROM node:alpine you have to install bash first. so something like this should work for your Dockerfile:

RUN apk update
RUN apk upgrade
RUN apk add bash

Answer 2

The problem is that you are passing --host 0.0.0.0 --port 3000 to npm start instead of to webpack-dev-server . You can move those arguments to package.json .

The Dockerfile needs some adjustments too.

Dockerfile

FROM node:alpine

RUN mkdir -p /app
COPY . /app
WORKDIR /app
RUN npm install

EXPOSE 3000/tcp
CMD ["npm", "start"]

docker-compose.yml

version: '3'
services:
  client:
    build:
      dockerfile: Dockerfile
      context: ./client
    ports:
      - '3000:3000'
    volumes:
      - ./client:/app

package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack --mode development",
    "start": "webpack-dev-server --mode development --host 0.0.0.0 --port 3000"
  },
  ...
}