{"id":16482871,"url":"https://github.com/yusinto/universal-hot-reload","last_synced_at":"2025-03-15T11:33:15.505Z","repository":{"id":38427621,"uuid":"71550515","full_name":"yusinto/universal-hot-reload","owner":"yusinto","description":"Hot reload client and server webpack bundles for the ultimate development experience","archived":false,"fork":false,"pushed_at":"2023-01-06T02:03:23.000Z","size":4369,"stargazers_count":79,"open_issues_count":67,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-10T17:46:11.792Z","etag":null,"topics":["bundle","hot","hot-module-replacement","hot-reload","hotload","hotloader","hotloading","live","live-reload","livereload","reload","reloading","server","server-side-bundle","universal","universal-hot-reload","universal-web","universal-webpack","webpack","webpack-dev-server"],"latest_commit_sha":null,"homepage":null,"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/yusinto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-21T09:22:54.000Z","updated_at":"2024-07-29T23:50:53.000Z","dependencies_parsed_at":"2023-02-05T02:30:26.008Z","dependency_job_id":null,"html_url":"https://github.com/yusinto/universal-hot-reload","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Funiversal-hot-reload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Funiversal-hot-reload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Funiversal-hot-reload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Funiversal-hot-reload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yusinto","download_url":"https://codeload.github.com/yusinto/universal-hot-reload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725071,"owners_count":20337660,"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":["bundle","hot","hot-module-replacement","hot-reload","hotload","hotloader","hotloading","live","live-reload","livereload","reload","reloading","server","server-side-bundle","universal","universal-hot-reload","universal-web","universal-webpack","webpack","webpack-dev-server"],"created_at":"2024-10-11T13:12:17.633Z","updated_at":"2025-03-15T11:33:15.065Z","avatar_url":"https://github.com/yusinto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# universal-hot-reload\n\n[![Circle CI](https://img.shields.io/circleci/project/github/yusinto/universal-hot-reload/master.svg?style=for-the-badge\u0026logo=circleci)](https://circleci.com/gh/yusinto/universal-hot-reload)\n[![npm version](https://img.shields.io/npm/v/universal-hot-reload.svg?style=for-the-badge)](https://www.npmjs.com/package/universal-hot-reload)\n[![npm downloads](https://img.shields.io/npm/dm/universal-hot-reload.svg?style=for-the-badge)](https://www.npmjs.com/package/universal-hot-reload) \n[![npm](https://img.shields.io/npm/dt/universal-hot-reload.svg?style=for-the-badge)](https://www.npmjs.com/package/universal-hot-reload) \n[![npm](https://img.shields.io/npm/l/universal-hot-reload.svg?style=for-the-badge)](https://www.npmjs.com/package/universal-hot-reload) \n\n\u003e **Easily hot reload your server, client or universal apps** :clap:\n\nWhy this package?\n * Setup hot reload for your app in four lines of code or less.\n * Supports server, client and universal hot reloads!\n * Works with react, typescript, graphql and nexus.\n\n\u003cb\u003eThis should be used in development only!\u003c/b\u003e\n\n## Installation\n\nyarn add universal-hot-reload -D\n\n## Quickstart: server only\nTo hot reload graphql servers and express servers without ssr, \ncreate index.js and server.js like below. For graphql, only `express-graphql` \nand `apollo-server` are supported for now.\n\n#### index.js\n\n```js\nconst { serverHotReload } = require('universal-hot-reload');\n\n// server.js is where you export your http.server instance (see below) \nserverHotReload(require.resolve('./server.js'));\n```\n\n#### server.js\n```js\n// You'll need to export default an instance of http.server so universal-hot-reload\n// can restart your server when changes are detected.\n\n// For express or express-graphql\nexport default app.listen(PORT, () =\u003e console.log(`Listening at ${PORT}`));\n\n// For apollo-server\nconst server = new ApolloServer({ typeDefs, resolvers });\nserver.listen().then(() =\u003e console.log(`Listening at ${PORT}`));\nexport default server.httpServer;\n```\n\nRun your app:\n```bash\nnode index.js\n```\n\n### Quickstart: universal apps\nTo hot reload a universal app, create index.js like below and follow the same \nsteps as [Quickstart: server only](#quickstart-server-only).\n \n#### index.js\n\n```js\nconst UniversalHotReload = require('universal-hot-reload').default;\n\n// supply your own webpack configs\nconst serverConfig = require('../webpack.config.server.js');\nconst clientConfig = require('../webpack.config.client.js');\n\n// the configs are optional, you can supply either one or both.\n// if you omit say the server config, then your server won't hot reload.\nUniversalHotReload({ serverConfig, clientConfig });\n```\n\n## Advanced\nIf you use the `serverHotReload` function then you won't need to supply your own server webpack config. `universal-hot-reload`\nuses a default server webpack config so you don't have to supply your own.\n\nIf you want to use your own custom server webpack config or if you want to hot reload your universal app,\nthen you'll need to supply your own webpack configs. Follow the lines marked `Important`.\n\n1. Your server webpack config should look like this:\n    \n    ```js\n    const path = require('path');\n    const nodeExternals = require('webpack-node-externals');\n    \n    module.exports = {\n      mode: 'development',\n      devtool: 'source-map',\n      entry: './src/server/server.js',\n      target: 'node', // Important\n      externals: [nodeExternals()], // Important\n      output: {\n        path: path.resolve('dist'),\n        filename: 'serverBundle.js',\n        libraryTarget: 'commonjs2' // Important\n      },\n      // other webpack config\n    };\n    ```\n2. Your client webpack config should look like this:\n\n    ```javascript\n    const path = require('path');\n    const webpackServeUrl = 'http://localhost:3002';\n    \n    module.exports = {\n      mode: 'development',\n      devtool: 'source-map',\n      entry: './src/client/index',\n      output: {\n        path: path.resolve('dist'),\n        publicPath: `${webpackServeUrl}/dist/`, // Important: must be full path with trailing slash\n        filename: 'bundle.js'\n      },\n      // other webpack config\n    };\n    ```\n3. Create an `index.js` file:\n\n    ```javascript\n    const UniversalHotReload = require('universal-hot-reload').default;\n\n    // You can provide only a server or a client config or both. \n    const serverConfig = require('../webpack.config.server.js');\n    const clientConfig = require('../webpack.config.client.js');\n \n    // Omitting a config means that side of your app won't hot reload.\n    UniversalHotReload({ serverConfig, clientConfig });\n    ```\n\n4. Lastly in your server entry file:\n\n    ```javascript\n    import { getDevServerBundleUrl } from 'universal-hot-reload';\n    import webpackClientConfig from 'path/to/webpack.config.client';\n\n    // Important: gets webpack-dev-server url from your client config \n    const devServerBundleUrl = getDevServerBundleUrl(webpackClientConfig);\n \n    // Important: feed the url into script src\n    const html = `\u003c!DOCTYPE html\u003e\n                \u003chtml\u003e\n                  \u003cbody\u003e\n                    \u003cdiv id=\"reactDiv\"\u003e${reactString}\u003c/div\u003e\n                    \u003cscript src=\"${devServerBundleUrl}\"\u003e\u003c/script\u003e\n                  \u003c/body\u003e\n                \u003c/html\u003e`;\n                \n    // Important: the listen method returns a http.server object which must be default exported\n    // so universal-hot-reload can access it\n    export default app.listen(PORT, () =\u003e {\n      log.info(`Listening at ${PORT}`);\n    });\n    ```\n\n5. Run your app!\n    \n    ```javascript\n    node index.js\n    ```\n\n## Examples\nFor graphql, check this [example](https://github.com/yusinto/universal-hot-reload/tree/master/examples/ts) with nexus, \napollo server and typescript. Only `express-graphql` and `apollo-server` are supported right now. `graphql-yoga`\ndoes not expose its `http.server` instance and so it's not hot-reloadable this way for now.\n\nFor universal webpack apps, check the react [example](https://github.com/yusinto/universal-hot-reload/tree/master/examples/js)\nfor a fully working spa with react and react-router.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Funiversal-hot-reload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyusinto%2Funiversal-hot-reload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Funiversal-hot-reload/lists"}