Set Up Hot-Module Replacement
Explore how to build and run the app and enable Hot-Module Replacement (HMR).
HMR
In this lesson, we’ll delve into HMR in NestJS. HMR is a development tool that can significantly enhance developer workflow by allowing real-time updates to the application as we make changes. We’ll learn how HMR works, how to implement it in projects, and how it can expedite the development process.
Development mode
After we start the dev server, it will watch for source file changes. When we save a change to the source code, the server will restart, and then we’ll see the updated behavior.
How can we start the server in production mode?
Watch mode vs. HMR
In development mode, we use the 'start:dev' command that executes the following script:
nest start --watch
It uses the TypeScript compiler watch mode, which watches the source code change, recompile, and do a full reload.
This behavior is acceptable for a small app. But if we’re working on a large app, we might want to reload the changed module only to save time. HMR is designed for this.
NestJS HMR is implemented using webpack, a widely used module bundler and build tool in the JavaScript ecosystem. Webpack is designed to take multiple JavaScript and other resource files and bundle them together into a single optimized file, making it easier to manage and deploy web applications. Additionally, webpack’s HMR allows adding or removing modules when an app runs without requiring a full reload. It uses ...