How to setup Webpack's HMR in NestJS project in Nx monorepo?

Question

I am trying to enable Webpack HMR in nestjs app in Nx monorepo

The nx workspace with nestjs app can be found in the repo here. It is created by following official docs

Nestjs webpack HMR docs is here

I successfully enabled Webpack HMR in nestjs app without nx monorepo by following the above docs.

How to setup Webpack's HMR in NestJS project in Nx monorepo?

Feel free to ask more details about the question if required

Fabio

Answer 1

🔥[email protected]🔥

yarn add [email protected]

---

webpack-hmr.config.js

...
{
  entry: { main: ['./node_modules/webpack/hot/poll?100', ...config.entry.main ]  }, //this
  externals: [
    nodeExternals({
      allowlist: ['./node_modules/webpack/hot/poll?100'] // this
    })
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.WatchIgnorePlugin({ paths: [/\.js$/, /\.d\.ts$/] }),
    new RunScriptWebpackPlugin({name: config.output.filename, autoRestart: false}),
  ],
},
...

---

apps/project-api/project.json >> targets.build.webpackConfig

"webpackConfig": "apps/project-api/webpack-hmr.config.js"

run

npx nx build project-api --watch

Secundines

A little comment to explain your answer would go a long way to improve the quality of it ! – Lovettalovich