All Projects β†’ milankinen β†’ Livereactload

milankinen / Livereactload

Licence: mit
Live code editing with Browserify and React

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Livereactload

Kirby Webpack
πŸ’ͺ A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (-82.76%)
Mutual labels:  hmr, livereload
Jus
πŸ‰ An opinionated tool for making static websites with browserify
Stars: ✭ 107 (-87.7%)
Mutual labels:  browserify, livereload
Jet Live
c++ hot code reload for linux and macos
Stars: ✭ 283 (-67.47%)
Mutual labels:  livereload, live-coding
React Study
渐进式学习Reactη”Ÿζ€εœˆ
Stars: ✭ 548 (-37.01%)
Mutual labels:  hmr
Lyo
πŸ“¦ Node.js to browser - The easy way
Stars: ✭ 624 (-28.28%)
Mutual labels:  browserify
Xhr
A small xhr wrapper
Stars: ✭ 801 (-7.93%)
Mutual labels:  browserify
Systemjs Hmr
Hot Module Replacement for SystemJS
Stars: ✭ 24 (-97.24%)
Mutual labels:  hmr
Gowatch
πŸš€ gowatch is a command line tool that builds and (re)starts your go project everytime you save a Go or template file.
Stars: ✭ 539 (-38.05%)
Mutual labels:  livereload
Cypress Hmr Restarter
A Cypress plugin which restarts tests on webpack-dev-server HMR updates
Stars: ✭ 18 (-97.93%)
Mutual labels:  hmr
Browserify Rails
Browserify + Rails = a great way to modularize your legacy JavaScript
Stars: ✭ 701 (-19.43%)
Mutual labels:  browserify
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (-22.07%)
Mutual labels:  hmr
React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: ✭ 632 (-27.36%)
Mutual labels:  hmr
Blink
A tool which allows you to edit source code of any MSVC C++ project live at runtime
Stars: ✭ 808 (-7.13%)
Mutual labels:  live-coding
Yt Player
Simple, robust, blazing-fast YouTube Player API
Stars: ✭ 576 (-33.79%)
Mutual labels:  browserify
Postcss Variables Loader
Share variables between CSS and JS with Webpack + HMR
Stars: ✭ 18 (-97.93%)
Mutual labels:  hmr
Vite
Next generation frontend tooling. It's fast!
Stars: ✭ 35,110 (+3935.63%)
Mutual labels:  hmr
Bonzomatic
Live shader coding tool and Shader Showdown workhorse
Stars: ✭ 829 (-4.71%)
Mutual labels:  live-coding
React Starterify
A minimal React JS application starter kit
Stars: ✭ 669 (-23.1%)
Mutual labels:  browserify
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (-23.1%)
Mutual labels:  hmr
Demoit
Live coding demos without Context Switching
Stars: ✭ 717 (-17.59%)
Mutual labels:  live-coding

LiveReactload

Live code editing with Browserify and React.

❗️ ❗️ ❗️

ATTENTION! The upcoming 4.x version will be using the new react-hot-loader and it is already available in npm as a beta tag. If you want to test it, check out the migration guide and installation instructions here!

❗️ ❗️ ❗️

Gitter npm version Build Status

Motivation

Hot reloading is de facto in today's front-end scene but unfortunately there 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 functionality to Browserify by honoring its principles: simplicity and modularity.

How it works?

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 changes and sends the changed contents to the browser via WebSocket.
  • When the changes arrive to the browser, LiveReactload client (included automatically in the bundle) analyzes the changes and reloads the changed modules

Starting from version 2.0.0 LiveReactload utilizes Dan Abramov's babel-plugin-react-transform and react-proxy, which means that hot-reloading capabilities are same as in Webpack.

And because one photo tells more than a thousand words, watch this video to see LiveReactload in action.

Other implementations

If you are a Webpack user, you probably want to check react-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 and react-transform-hmr

Usage

Pre-requirements

LiveReactload requires watchify, babelify and react >= 0.13.x in order to work.

Installation (Babel 6.x)

Install pre-requirements (if not already exist)

npm i --save react
npm i --save-dev watchify

Install babelify and its dependencies

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

Install React proxying components and LiveReactload

npm i --save-dev livereactload [email protected] babel-plugin-react-transform

Create .babelrc file into project's root directory (or add react-transform extra if the file already exists). More information about .babelrc format and options can be found from babel-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 with watchify. 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 see the basic usage example.

Reacting to reload events

Ideally your client code should be completely unaware of the reloading. However, some libraries like redux require a little hack for hot-reloading. That's why LiveReactload provides module.onReload(..) hook.

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

if (module.onReload) {
  module.onReload(() => {
    ... do something ...
    // 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)
    return true
  });
}

For more details, please see the redux example.

How about build systems?

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

When does it not work?

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

// counter.js
const React = require('react')

let totalClicks = 0

export default React.createClass({

  getInitialState() {
    return {clickCount: totalClicks}
  },

  handleClick() {
    totalClicks += 1
    this.setState({clickCount: totalClicks})
  },


  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Increment</button>
        <div>{this.state.clickCount}</div>
      </div>
    )
  }
})

Configuration options

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

Available options

LiveReactload supports the following configuration options

--no-server

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 after bundling. This is not set by default.

--port <number>

Starts reload server to the given port and configures the bundle's client to connect to the server using this port. Default value is 4474

--host <hostname>

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

--no-dedupe

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.

--no-client

Omits the reload client from the generated bundle.

--ssl-cert <certFilename> and --ssl-key <privateKeyFilename>

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

--no-babel

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

--moduledir <node_modules>

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

License

MIT

Contributing

Please create a Github issue if problems occur. Pull request are also welcome and they can be created to the development branch.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].