Repository files navigation

Live code editing with Browserify and React.

❗ ❗ ❗

ATTENTION! The upcoming 4.x version will be using the newreact-hot-loaderand it is already available in npm as a beta tag. If you want to test it, check out the migration guide andinstallation instructionshere!

❗ ❗ ❗

Hot reloading is de facto in today's front-end scene but unfortunatelythere isn't any decent implementation for Browserify yet. This is shame because(in my opinion) Browserify is the best bundling tool at the moment.

Hence the goal of this project is to bring the hot reloading functionalityto Browserify by honoring its principles: simplicity and modularity.

LiveReactload can be used as a normal Browserify plugin. When applied to the bundle,it modifies the Browserify bundling pipeline so that the created bundle becomes"hot-reloadable".

• LiveReactload starts the reloading server which watches the bundle changesand sends the changed contents to the browser via WebSocket.
• When the changes arrive to the browser, LiveReactload client (included automaticallyin the bundle) analyzes the changes and reloads the changed modules

Starting from version2.0.0 LiveReactload utilizesDan Abramov'sbabel-plugin-react-transform andreact-proxy, which means that hot-reloadingcapabilities are same as in Webpack.

And because one photo tells more than a thousand words, watchthis video to seeLiveReactload in action.

If you are a Webpack user, you probably want to checkreact-transform-boilerplate.

If you want to stick with browserify, but use the Hot Module Reloading API (like webpack), you could use:browserify-hmr,babel-plugin-react-transform andreact-transform-hmr

LiveReactload requireswatchify,babelify andreact >= 0.13.x in order towork.

Install pre-requirements (if not already exist)

npm i --save reactnpm i --save-dev watchify

Installbabelify and its dependencies

npm i --save babelify babel-preset-es2015 babel-preset-react

Install React proxying components and LiveReactload

npm i --save-dev livereactload react-proxy@1.x babel-plugin-react-transform

Create.babelrc file into project's root directory (or addreact-transform extraif the file already exists). More information about.babelrc format and optionscan be found frombabel-plugin-react-transform.

{"presets":["es2015","react"],"env":{"development":{"plugins":[["react-transform",{"transforms":[{"transform":"livereactload/babel-transform","imports":["react"]}]}]]}}}

And finally use LiveReactload as a Browserify plugin withwatchify. For example:

node_modules/.bin/watchify site.js -t babelify -p livereactload -o static/bundle.js

That's it! Now just start (live) coding! For more detailed example, please seethe basic usage example.

Ideally your client code should be completely unaware of the reloading. However,some libraries likeredux require a little hack for hot-reloading. That's whyLiveReactload providesmodule.onReload(..) hook.

By using this hook, you can add your own custom functionality that isexecuted in the browser only when the module reload occurs:

if(module.onReload){module.onReload(()=>{    ...dosomething ...// returning true indicates that this module was updated correctly and// reloading should not propagate to the parent components (if non-true// value is returned, then parent module gets reloaded too)returntrue});}

For more details, please seethe redux example.

LiveReactload is build system agnostic. It means that you can use LiveReactload withall build systems having Browserify and Watchify support. Please seebuild systems example for more information.

Well... if you hide your state inside the modules then the reloading will losethe state. For example the following code willnot work:

// counter.jsconstReact=require('react')lettotalClicks=0exportdefaultReact.createClass({getInitialState(){return{clickCount:totalClicks}},handleClick(){totalClicks+=1this.setState({clickCount:totalClicks})},render(){return(<div><buttononClick={this.handleClick}>Increment</button><div>{this.state.clickCount}</div></div>)}})

You can configure the LiveReactload Browserify plugin by passing some optionsto it (-p [ livereactload <options...> ], see Browserify docs for more informationabout config format).

LiveReactload supports the following configuration options

Prevents reload server startup. If you are using LiveReactload plugin with Browserify(instead of watchify), you may want to enable this so that the process won't hang afterbundling. This is not set by default.

Starts reload server to the given port and configures the bundle's client toconnect to the server using this port. Default value is4474

Configures the reload client to use the given hostname when connecting to thereload server. You may need this if you are running the bundle in an another device.Default value islocalhost

Disables Browserify module de-duplication. By default, de-duplication is enabled.However, sometimes this de-duplication with may cause an invalid bundle with LiveReactload.You can disable this de-duplication by using this flag.

Omits the reload client from the generated bundle.

Adds your custom SSL certificate and key to the reload web-server. This is needed if youwant to use LiveReactLoad in HTTPS site. Parameters are paths to the actual files.

If you use a tool other than Babel to transform React syntax, this disables the in-browser warning that would otherwise appear.

Directory pointing node modules wherelivereactload is installed. By default points to<root-dir>/node_modules.

MIT

Please create aGithub issue if problems occur. Pull request are also welcomeand they can be created to thedevelopment branch.