Content not from webpack is served from /opt/app/public directory

Issue

i have a simple application with react and typescript that display hello world on localhost:8080.
When i run my application on command line it works and i see the hello world message on localhost
but when i dockerize my app, and run the docker image i didn’t have access to localhost:8080
can someone help me please ?
The content of webpack.config.js :

const webpack = require("webpack");
const process = require("process");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackHarddiskPlugin = require("html-webpack-harddisk-plugin");
const path = require("path");

const config = {
  mode: "production", 
  stats: {
    children: true,
  },
  entry:
    process.argv.mode === "development"
      ? ["react-hot-loader/patch", "./src/index.tsx"]
      : "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  // Currently we need to add '.ts' to the resolve.extensions array.
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    "template: 'custom_index.html'"
    new HtmlWebpackPlugin({ alwaysWriteToDisk: false, filename: "index.html", title:"BootstrapReact" }),
  ],
};

module.exports = (env, argv) => {
  console.log(`This is the Webpack 4 'mode': ${argv.mode}`);
  return config;
};

tree :

.
├── Dockerfile
├── README.md
├── config
│   ├── default.json
│   ├── production.json
│   └── readme.md
├── nginx
│   └── nginx.conf
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.tsx
│   ├── index.html
│   └── index.tsx
├── tsconfig.json
└── webpack.config.js

my dockerfile :

FROM node:16.13.0-alpine3.14

WORKDIR /opt/app

COPY package*.json ./
RUN npm install

COPY ./tsconfig.json ./
COPY ./webpack.config.js ./
COPY ./src ./src
COPY ./config ./config

RUN npm run build
EXPOSE 8080
CMD ["npm", "start"]

And when i run my docker image i have :

> cross-env NODE_ENV=production webpack-dev-server --hot --mode production

This is the Webpack 4 'mode': production
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.17.0.2:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/opt/app/public' directory
asset bundle.js 241 KiB [emitted] [minimized] (name: main) 1 related asset
asset index.html 219 bytes [emitted]
runtime modules 27 KiB 12 modules
orphan modules 17.4 KiB [orphan] 8 modules
modules by path ./node_modules/ 295 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 56.8 KiB 5 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/react/ 6.48 KiB 2 modules
  modules by path ./node_modules/react-dom/ 119 KiB 2 modules
  modules by path ./node_modules/scheduler/ 4.91 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
  + 4 modules
./src/index.tsx + 1 modules 487 bytes [built] [code generated]
  Entrypoint HtmlWebpackPlugin_0-0 =
  runtime modules 440 bytes 3 modules
  cacheable modules 486 bytes
    data:text/javascript,__webpack_public.. 77 bytes [built] [code generated]
    ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 409 bytes [built] [code generated]

  Child HtmlWebpackCompiler compiled successfully
webpack 5.70.0 compiled successfully in 11423 ms 

Solution

my problem is due to a service port error

Answered By – dia

Answer Checked By – Jay B. (AngularFixing Admin)