Content not from webpack is served from '/app' directory (Docker / Webpack)

Question

I'm using Webpack configuration with docker.

Everything working well as development step. However this is not working for my preproduction and production step. The difference between these steps is that I copy past my entire repository when it is the development step and only the build file when it is preproduction/production step.

Why ? Because I want to optimise the space on my server.

There is my docker file configuration:

FROM node:alpine AS base
USER root
WORKDIR /app
COPY frontend/package*.json /app/
RUN npm install
RUN npm install -g serve

FROM base AS development
COPY frontend /app/
RUN npm run build:development

FROM base AS preproduction
COPY frontend/build /app/build
COPY frontend/public /app/public
COPY frontend/webpack.config.js /app/
COPY frontend/env /app/env

FROM base AS production
COPY frontend/build /app/build
COPY frontend/public /app/public
COPY frontend/webpack.config.js /app/
COPY frontend/env /app/env

As you can see above, only build file is paste to the container for preproduction and production in the application repository "app" (The build is done in a jenkins pipeline before running the dockerfile).

This my webpack configuration:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

module.exports = () => {
  console.info("Environment: ", process.env.NODE_ENV);
  return {
    entry: path.resolve(__dirname, "src", "index.tsx"),
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
      assetModuleFilename: "assets/[name][ext]",
    },
    devServer: {
      compress: true,
      port: 3000,
      static: __dirname,
      historyApiFallback: true,
    },
    plugins: [
      new Dotenv({
        path: path.resolve(__dirname, `./env/.env.${process.env.NODE_ENV}`),
        systemvars: true,
      }),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "build", "index.html"),
        filename: "index.html",
        favicon: "./public/favicon.ico",
        manifest: "./public/manifest.json",
        inject: "body",
      }),
    ],
    ...
}

And this my package.json script command, I'm running:

"cleanBuild": "rm -rf build/* && cp public/index.html build/index.html",
"build:preproduction": "npm run cleanBuild && NODE_ENV=preproduction webpack --mode production",
"start:preproduction": "NODE_ENV=preproduction webpack serve --mode production --port 3000 --allowed-hosts all",

So, does anyone know if it is mandatory to have the src file to be present in the app folder in order to have webpack working ?

If not, how can I manage it or solve my issue ?

Answer 1

In order to solve the issue, I Copy paste the SRC file which is mandatory in order to let webpack run properly.