I have looked at various solutions to this but none of them works for me, feel free to ask for more details

const webpack = require("webpack");
const webpackDevServer = require("webpack-dev-server");
const webpackConfig = require("../webpack.config.dev");
const config = require("config");
const path = require("path");

module.exports = function startWebpackDevServer() {
  const port = config.get("apps.ui.port");

  // Setup webpack config
  const compiler = webpack(webpackConfig);

  // Get infrastructure logger from the compiler
  const logger = compiler.getInfrastructureLogger("webpack-dev-server");

  const options = {
    proxy: [
      {
        "*": 'http://localhost:3077',
        secure: false,
        changeOrigin: true,
      }
    ],
    static: {
      directory: path.resolve(__dirname, "../client/static"),
      watch: true,
    },
    devMiddleware: {
      publicPath: "/",
    },
    open: true,
    hot: true,
    host: "demo2.patientconnect.eu",
    port: port,
    // Additional options can be added as needed
  };

  
  const server = new webpackDevServer(options, compiler);

  

 server.startCallback(() => {
    logger.info(`Webpack Dev Server listening on port ${port}`);
  });

};

My folder structure is:

• app
  client(folder)
  server(folder)
  webpack-dev-server.js(file in server folder)
  webpack.config.js(file in app folder)
• config
• node_modules
  package.json

folder structure in image

Instead of my app, yarn start gives me directory on the browser. This is webpack 5