{"id":13657592,"url":"https://github.com/vlazh/node-hot-loader","last_synced_at":"2025-04-07T07:03:49.357Z","repository":{"id":56300591,"uuid":"91475291","full_name":"vlazh/node-hot-loader","owner":"vlazh","description":"Hot module replacement (hot reload) for Node.js applications. Develop without server restarting.","archived":false,"fork":false,"pushed_at":"2023-08-15T04:49:18.000Z","size":1753,"stargazers_count":133,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-15T00:04:14.641Z","etag":null,"topics":["express","express-hot-reload","hmr","hot","hot-reload","hot-replacement","javascript","loader","module","node","node-hot-reload","reload","replacement","restart","server","server-side","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vlazh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-16T15:38:02.000Z","updated_at":"2023-11-16T15:32:50.000Z","dependencies_parsed_at":"2024-01-13T10:41:51.918Z","dependency_job_id":"97254317-518c-4aaa-9e27-c1479e2386e8","html_url":"https://github.com/vlazh/node-hot-loader","commit_stats":{"total_commits":290,"total_committers":6,"mean_commits":"48.333333333333336","dds":"0.23448275862068968","last_synced_commit":"d6067ec8168f6a701ec2adf61ed6d5fe82c6b4fa"},"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Fnode-hot-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Fnode-hot-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Fnode-hot-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Fnode-hot-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vlazh","download_url":"https://codeload.github.com/vlazh/node-hot-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608150,"owners_count":20965952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","express-hot-reload","hmr","hot","hot-reload","hot-replacement","javascript","loader","module","node","node-hot-reload","reload","replacement","restart","server","server-side","webpack","webpack-loader"],"created_at":"2024-08-02T05:00:46.036Z","updated_at":"2025-04-07T07:03:49.332Z","avatar_url":"https://github.com/vlazh.png","language":"JavaScript","readme":"# Node Hot Loader [![npm package](https://img.shields.io/npm/v/node-hot-loader.svg?style=flat-square)](https://www.npmjs.org/package/node-hot-loader)\r\n\r\n**Node Hot Loader** is a small tool for [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement.html) support for Node.js application development with [webpack](https://github.com/webpack/webpack).\r\nUnder the hood it uses webpack and babel, so you can use all you need configurations in config files for babel and webpack.\r\n\r\n**Node Hot Loader**, by default, runs all webpack entries in the same **single process** or in **forked process**, if you set corresponding [option](#Options).\r\n\r\nThe most suitable use case for **Node Hot Loader** is hot-reloaded [express](http://expressjs.com/) application.\r\nExpress application can contains API and frontend together, moreover frontend can use own HMR, e.g. [React](https://facebook.github.io/react/) with [React Hot Loader](https://github.com/gaearon/react-hot-loader).\r\nSee how to setup React HMR with Express in [React Hot Loader docs](http://gaearon.github.io/react-hot-loader/getstarted/).\r\nThus, both the frontend and the server will be hot-reloadable.\r\n\r\n**Node Hot Loader** also supports webpack config files written on ES2015+/TypeScript (via babel).\r\nFor using ES2015+/TypeScript in webpack configuration you have to provide babel configuration file in project root directory.\r\n\r\n**If you have suggestions or you find a bug, please, open an issue or make a PR.**\r\n\r\n## Installation\r\n\r\n```sh\r\nnpm install --save-dev node-hot-loader webpack\r\n# or\r\nyarn add --dev node-hot-loader webpack\r\n```\r\n\r\n## Command line usage\r\n\r\n**Node Hot Loader** uses [yargs](http://yargs.js.org/) for parsing command line arguments.\r\n\r\n```\r\nUsage: node-hot {options}\r\n```\r\n\r\n### [Options](#Options)\r\n\r\n| Name            | Description                                                                                                          | Note                                                        |\r\n| --------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |\r\n| `--config`      | Path to the webpack config file.                                                                                     | If not set then search webpack.config.js in root directory. |\r\n| `--fork`        | Launch compiled assets in forked process with optional node exec arguments.                                          |\r\n| `--args`        | List of arguments for forked process.                                                                                |\r\n| `--autoRestart` | Auto restart forked process if unaccepted modules discovered.                                                        |\r\n| `--inMemory`    | Launch compiled assets in memory fs. Not worked with forked process.                                                 |\r\n| `--logLevel`    | Log level related to [webpack stats configuration presets names](https://webpack.js.org/configuration/stats/#stats). | If not set then uses webpack stats configuration.           |\r\n\r\n### Usage example\r\n\r\n```sh\r\nnode-hot --config webpack.config.server.js\r\n# or\r\nnode-hot --logLevel minimal\r\n# or\r\nnode-hot --fork\r\n# or\r\nnode-hot --fork --autoRestart\r\n# or\r\nnode-hot --fork=--arg1,--arg2 --\r\n# or\r\nnode-hot --fork --args=--arg1,--arg2\r\n# or just\r\nnode-hot\r\n# Use the --help option to get the list of available options\r\n```\r\n\r\nOf course, you can add script into you package.json:\r\n\r\n```json\r\n\"scripts\": {\r\n  \"start\": \"node-hot --config webpack.config.server.js\"\r\n}\r\n```\r\n\r\nand then run with your favorite package manager:\r\n\r\n```sh\r\nnpm run start\r\n# or\r\nyarn run start\r\n```\r\n\r\n## Webpack plugin\r\n\r\n```typescript\r\nimport NodeHotLoaderWebpackPlugin from 'node-hot-loader/NodeHotLoaderWebpackPlugin';\r\n\r\n// Webpack configuration\r\nexport default {\r\n  plugins: [\r\n    // All options are optional\r\n    new NodeHotLoaderWebpackPlugin({\r\n      force, // boolean. true - always launch entries, false (by default) - launch entries only in watch mode.\r\n      fork, // boolean | string[]. For example ['--key', 'key value'].\r\n      args, // string[]. For example ['--arg1', 'arg2'].\r\n      autoRestart, // boolean\r\n      logLevel, // string\r\n    }),\r\n  ],\r\n};\r\n```\r\n\r\nand run webpack in watch mode:\r\n\r\n```sh\r\nwebpack --watch\r\n```\r\n\r\n## The minimum required configuration:\r\n\r\n**Node Hot Loader** adds all necessaries to webpack config if not present already (e.g. HotModuleReplacementPlugin),\r\nbut it's require the minimum configuration in your webpack config file:\r\n\r\n```javascript\r\nexport default {\r\n  output: {\r\n    // Webpack can't find hot-update if output file is not directly in output.path.\r\n    // For example, filename: 'js/[name].js' will not work.\r\n    // However, I have no many tests for that.\r\n    filename: '[name].js',\r\n  },\r\n};\r\n```\r\n\r\n## Express Hot Reload Example\r\n\r\n```javascript\r\nimport app from './app'; // configuring express app, e.g. routes and logic\r\n\r\nfunction startServer() {\r\n  return new Promise((resolve, reject) =\u003e {\r\n    const httpServer = app.listen(app.get('port'));\r\n\r\n    httpServer.once('error', (err: any) =\u003e {\r\n      if (err.code === 'EADDRINUSE') {\r\n        reject(err);\r\n      }\r\n    });\r\n\r\n    httpServer.once('listening', () =\u003e resolve(httpServer));\r\n  }).then((httpServer) =\u003e {\r\n    const { port } = httpServer.address();\r\n    console.info(`==\u003e 🌎 Listening on ${port}. Open up http://localhost:${port}/ in your browser.`);\r\n\r\n    // Hot Module Replacement API\r\n    if (module.hot) {\r\n      let currentApp = app;\r\n      module.hot.accept('./app', () =\u003e {\r\n        httpServer.removeListener('request', currentApp);\r\n        import('./app')\r\n          .then(({ default: nextApp }) =\u003e {\r\n            currentApp = nextApp;\r\n            httpServer.on('request', currentApp);\r\n            console.log('HttpServer reloaded!');\r\n          })\r\n          .catch((err) =\u003e console.error(err));\r\n      });\r\n\r\n      // For reload main module (self). It will be restart http-server.\r\n      module.hot.accept((err) =\u003e console.error(err));\r\n      module.hot.dispose(() =\u003e {\r\n        console.log('Disposing entry module...');\r\n        httpServer.close();\r\n      });\r\n    }\r\n  });\r\n}\r\n\r\nconsole.log('Starting http server...');\r\nstartServer().catch((err) =\u003e {\r\n  console.error('Error in server start script.', err);\r\n});\r\n```\r\n\r\n## Troubleshooting\r\n\r\n### Running **Node Hot Loader** inside a Docker container\r\n\r\nIf you attempt to run the **Node Hot Loader** inside a Docker container, it will start and serve as expected, but will not Hot Module Reload without some additional configuration. Add the following to your webpack config:\r\n\r\n```javascript\r\nmodule.exports = {\r\n  //...\r\n  watchOptions: {\r\n    poll: 1000, // Check for changes every second\r\n  },\r\n};\r\n```\r\n\r\nThis instructs webpack to poll for changes (every second) instead of watching. This is necessary because watching does not work with NFS and machines in VirtualBox. See [Webpack Configuration](https://webpack.js.org/configuration/watch/#watchoptions-poll) docs for more information.\r\n\r\n\r\n### Debugging in an IDE\r\n\r\nIf you have problems with sourcemaps or breakpoints, try to launch `node-hot-loader` with `fork` [option](#Options).\r\nAlso you may have to use one of the `eval` sourcemap styles for the `devtool` option in the webpack config.\r\n\r\n## License\r\n\r\n[MIT](https://opensource.org/licenses/mit-license.php)\r\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlazh%2Fnode-hot-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvlazh%2Fnode-hot-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlazh%2Fnode-hot-loader/lists"}