docker react does not work in localhost

Question

I am trying to run my react app with docker, when I run the container, everything seems fine but I can't access it on localhost (or 127.0.0.1). Here is my configuration:

Dockerfile:

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

COPY package.json /usr/src/app

RUN npm install

COPY . /usr/src/app

EXPOSE 8090

CMD ["npm", "run", "start-test"]

package.json

"start-test": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.dev.config --inline --hot --history-api-fallback --port 8090 --public localhost:8090 --host 0.0.0.0"

webpack.common.js

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

module.exports = {
  entry: {
    app: [
      // 'react-hot-loader/patch',
      'babel-polyfill',
      path.join(__dirname, 'src', 'index.js'),
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {...},
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'Production',
      // hash: true,
      filename: './index.html',
    }),
    new webpack.NamedModulesPlugin(),
  ],
  resolve: {
    extensions: [' ', '.js', '.jsx', '.json'],
    modules: [
      path.join(__dirname, 'src'),
      path.join(__dirname, 'node_modules'),
    ],
  },
};

webpack.config

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    disableHostCheck: true,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'app.css',
      disable: true,
    }),
  ],
});

Everything is fine when I build by using

docker build --no-cache . -t seyaa/client

Then I start the container using

docker run  seyaa/client

Here is the end of the console

> redux-minimal@1.0.0 start-test /usr/src/app
> ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.dev.config --inline --hot --history-api-fallback --port 8090 --public localhost:8090 --host 0.0.0.0

clean-webpack-plugin: /usr/src/app/dist has been removed.
Project is running at http://localhost:8090/
webpack output is served from /
Content not from webpack is served from ./dist
404s will fallback to /index.html
Hash: 64fdd9746e89b58394d3
Version: webpack 3.11.0
Time: 13617ms

The terminal looks fine but I can not access to http://localhost:8090 or http://127.0.0.1:8090 or http://0.0.0.0:8090

Any help would be appreciated.

Thanks

Edit: I am running on a mac

Answer 1

If that's the output from your container, then you're listening on localhost in the container, which is not the same as on the host. Make the server listen on 0.0.0.0 instead of localhost (check this post) then try hitting localhost on your host machine. You're also not exposing any ports through to your host by the looks of it, so you'll also need to change your docker run to be something like docker run -p 8090:8090 seyaa/client.

Answer 2

A container must be started before you can run a command in it.

docker start seyaa/client

Then you may run eg. a shell

docker run seyaa/client /bin/sh