{"id":14385165,"url":"https://github.com/milankinen/livereactload","last_synced_at":"2025-04-08T00:39:40.498Z","repository":{"id":29394409,"uuid":"32929613","full_name":"milankinen/livereactload","owner":"milankinen","description":"Live code editing with Browserify and React","archived":false,"fork":false,"pushed_at":"2021-10-09T11:20:15.000Z","size":32272,"stargazers_count":864,"open_issues_count":13,"forks_count":61,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-31T23:37:26.439Z","etag":null,"topics":["browserify","hmr","live-coding","livereload","react"],"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/milankinen.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":"2015-03-26T13:42:05.000Z","updated_at":"2025-03-20T12:51:05.000Z","dependencies_parsed_at":"2022-09-06T17:01:06.757Z","dependency_job_id":null,"html_url":"https://github.com/milankinen/livereactload","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milankinen%2Flivereactload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milankinen%2Flivereactload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milankinen%2Flivereactload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milankinen%2Flivereactload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/milankinen","download_url":"https://codeload.github.com/milankinen/livereactload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755560,"owners_count":20990620,"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":["browserify","hmr","live-coding","livereload","react"],"created_at":"2024-08-28T18:02:00.083Z","updated_at":"2025-04-08T00:39:40.479Z","avatar_url":"https://github.com/milankinen.png","language":"JavaScript","readme":"# LiveReactload\n\nLive code editing with Browserify and React.\n\n:exclamation: :exclamation: :exclamation:\n\n**ATTENTION! The upcoming 4.x version will be using the new [`react-hot-loader`](https://github.com/gaearon/react-hot-loader)\nand it is already available in npm as a beta tag. If you want to test it, check out the migration guide and\ninstallation instructions [here](https://github.com/milankinen/livereactload/tree/4.x)!**\n\n:exclamation: :exclamation: :exclamation:\n\n\n[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/milankinen/livereactload)\n[![npm version](https://badge.fury.io/js/livereactload.svg)](http://badge.fury.io/js/livereactload)\n[![Build Status](https://travis-ci.org/milankinen/livereactload.svg)](https://travis-ci.org/milankinen/livereactload)\n\n## Motivation\n\nHot reloading is de facto in today's front-end scene but unfortunately\nthere isn't any decent implementation for Browserify yet. This is shame because\n(in my opinion) Browserify is the best bundling tool at the moment.\n\nHence the goal of this project is to bring the hot reloading functionality\nto Browserify by honoring its principles: simplicity and modularity.\n\n\n## How it works?\n\nLiveReactload can be used as a normal Browserify plugin. When applied to the bundle,\nit modifies the Browserify bundling pipeline so that the created bundle becomes\n\"hot-reloadable\".\n\n  * LiveReactload starts the reloading server which watches the bundle changes\n  and sends the changed contents to the browser via WebSocket.\n  * When the changes arrive to the browser, LiveReactload client (included automatically\n  in the bundle) analyzes the changes and reloads the changed modules\n\nStarting from version `2.0.0` LiveReactload utilizes [Dan Abramov](https://github.com/gaearon)'s\n[babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform) and\n[react-proxy](https://github.com/gaearon/react-proxy), which means that hot-reloading\ncapabilities are same as in Webpack.\n\nAnd because one photo tells more than a thousand words, watch [this video](https://vimeo.com/123513496) to see\nLiveReactload in action.\n\n### Other implementations\n\nIf you are a Webpack user, you probably want to check\n**[react-transform-boilerplate](https://github.com/gaearon/react-transform-boilerplate)**.\n\nIf you want to stick with browserify, but use the Hot Module Reloading API (like webpack), you could use: **[browserify-hmr](https://github.com/AgentME/browserify-hmr)**, **[babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform)** and\n**[react-transform-hmr](https://github.com/gaearon/react-transform-hmr)**\n\n\n## Usage\n\n### Pre-requirements\n\nLiveReactload requires `watchify`, `babelify` and `react \u003e= 0.13.x` in order to\nwork.\n\n### Installation (Babel 6.x)\n\nInstall pre-requirements (if not already exist)\n\n```sh\nnpm i --save react\nnpm i --save-dev watchify\n```\n\nInstall `babelify` and its dependencies\n\n```sh\nnpm i --save babelify babel-preset-es2015 babel-preset-react\n```\n\nInstall React proxying components and LiveReactload\n\n```sh\nnpm i --save-dev livereactload react-proxy@1.x babel-plugin-react-transform\n```\n\nCreate `.babelrc` file into project's root directory (or add `react-transform` extra\nif the file already exists). More information about `.babelrc` format and options\ncan be found from [babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform).\n\n```javascript\n{\n  \"presets\": [\"es2015\", \"react\"],\n  \"env\": {\n    \"development\": {\n      \"plugins\": [\n        [\"react-transform\", {\n          \"transforms\": [{\n            \"transform\": \"livereactload/babel-transform\",\n            \"imports\": [\"react\"]\n          }]\n        }]\n      ]\n    }\n  }\n}\n```\n\nAnd finally use LiveReactload as a Browserify plugin with `watchify`. For example:\n\n```bash\nnode_modules/.bin/watchify site.js -t babelify -p livereactload -o static/bundle.js\n```\n\n**That's it!** Now just start (live) coding! For more detailed example, please see\n**[the basic usage example](examples/01-basic-usage)**.\n\n### Reacting to reload events\n\nIdeally your client code should be completely unaware of the reloading. However,\nsome libraries like `redux` require a little hack for hot-reloading. That's why\nLiveReactload provides `module.onReload(..)` hook.\n\nBy using this hook, you can add your own custom functionality that is\nexecuted in the browser only when the module reload occurs:\n\n```javascript\nif (module.onReload) {\n  module.onReload(() =\u003e {\n    ... do something ...\n    // returning true indicates that this module was updated correctly and\n    // reloading should not propagate to the parent components (if non-true\n    // value is returned, then parent module gets reloaded too)\n    return true\n  });\n}\n```\n\nFor more details, please see **[the redux example](examples/02-redux)**.\n\n### How about build systems?\n\nLiveReactload is build system agnostic. It means that you can use LiveReactload with\nall build systems having Browserify and Watchify support. Please see\n**[build systems example](examples/03-build-systems)** for more information.\n\n\n## When does it not work?\n\nWell... if you hide your state inside the modules then the reloading will lose\nthe state. For example the following code will **not** work:\n\n```javascript\n// counter.js\nconst React = require('react')\n\nlet totalClicks = 0\n\nexport default React.createClass({\n\n  getInitialState() {\n    return {clickCount: totalClicks}\n  },\n\n  handleClick() {\n    totalClicks += 1\n    this.setState({clickCount: totalClicks})\n  },\n\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.handleClick}\u003eIncrement\u003c/button\u003e\n        \u003cdiv\u003e{this.state.clickCount}\u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n})\n```\n\n## Configuration options\n\nYou can configure the LiveReactload Browserify plugin by passing some options\nto it (`-p [ livereactload \u003coptions...\u003e ]`, see Browserify docs for more information\nabout config format).\n\n### Available options\n\nLiveReactload supports the following configuration options\n\n#### `--no-server`\n\nPrevents reload server startup. If you are using LiveReactload plugin with Browserify\n(instead of watchify), you may want to enable this so that the process won't hang after\nbundling. This is not set by default.\n\n#### `--port \u003cnumber\u003e`\n\nStarts reload server to the given port and configures the bundle's client to\nconnect to the server using this port. Default value is `4474`\n\n#### `--host \u003chostname\u003e`\n\nConfigures the reload client to use the given hostname when connecting to the\nreload server. You may need this if you are running the bundle in an another device.\nDefault value is `localhost`\n\n#### `--no-dedupe`\n\nDisables Browserify module de-duplication. By default, de-duplication is enabled.\nHowever, sometimes this de-duplication with may cause an invalid bundle with LiveReactload.\nYou can disable this de-duplication by using this flag.\n\n#### `--no-client`\n\nOmits the reload client from the generated bundle.\n\n#### `--ssl-cert \u003ccertFilename\u003e` and `--ssl-key \u003cprivateKeyFilename\u003e`\n\nAdds your custom SSL certificate and key to the reload web-server. This is needed if you\nwant to use LiveReactLoad in HTTPS site. Parameters are paths to the actual files.\n\n#### `--no-babel`\n\nIf you use a tool other than Babel to transform React syntax, this disables the in-browser warning that would otherwise appear.\n\n#### `--moduledir \u003cnode_modules\u003e`\n\nDirectory pointing node modules where `livereactload` is installed. By default points to `\u003croot-dir\u003e/node_modules`.\n\n## License\n\nMIT\n\n\n## Contributing\n\nPlease create a [Github issue](/../../issues) if problems occur. Pull request are also welcome\nand they can be created to the `development` branch.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilankinen%2Flivereactload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmilankinen%2Flivereactload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilankinen%2Flivereactload/lists"}