react-hot-boilerplate alternatives and similar libraries
Based on the "Boilerplate" category
-
create-react-app
Create React apps with no build configuration. -
react-boilerplate
Quick packager-agnostic boilerplate for React modules using JSX. -
electron-react-boilerplate
Live editing development on desktop app. -
react-redux-universal-hot-example
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform. -
react-redux-starter-kit
Get started with React, Redux, and React-Router!. -
generator-react-webpack
Yeoman generator for ReactJS and Webpack. -
react-isomorphic-starterkit
Create an isomorphic React app in less than 5 minutes. -
essential-react
A minimal skeleton for building testable React apps using Babel. -
generator-starhackit
StarHackIt: React/Redux + Node full-stack starter kit with authentication and authorization, data backed by SQL. -
reactpack
Build your react apps with one command and one npm i. -
redux-cli
An opinionated CLI for building redux/react apps quicker. -
redux-webpack-es6-boilerplate
A starter project for modern React apps with Redux. -
gluestick
GlueStick is a command line interface for quickly developing universal web applications using React and Redux. -
universal-redux
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to. -
generator-flux-on-rails
Scaffolder of universal Flux / Redux app, backed by Rails API. -
phoenix
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support. -
create-react-dependency
Create react dependencies with no build configuration. -
crisp-react
Express integration in TypeScript with support for multiple SPAs and pitfall avoidance.
Do you think we are missing an alternative of react-hot-boilerplate or a related project?
README
A Big Update Is Coming
React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference.
React Hot Boilerplate
The minimal dev environment to enable live-editing React components.
⚠️⚠️⚠️ This Is Experimental and Incomplete! ⚠️⚠️⚠️
This is not a good starting point for people learning React.
It’s experimental and completely lacks any production features.
Do not use this as an actual project boilerplate!
If you’re just getting started with React, use Create React App instead.
Usage
git clone https://github.com/gaearon/react-hot-boilerplate.git
cd react-hot-boilerplate/
npm install
npm start
open http://localhost:3000
Now edit src/App.js.
Your changes will appear without reloading the browser like in this video.
Linting
This boilerplate project includes React-friendly ESLint configuration.
npm run lint
Using 0.0.0.0 as Host
You may want to change the host in server.js and webpack.config.js from localhost to 0.0.0.0 to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
Missing Features
This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into other starter kits.
WebStorm
Because the WebStorm IDE uses "safe writes" by default, Webpack's file-watcher won't recognize file changes, so hot-loading won't work. To fix this, disable "safe write" in WebStorm.
Dependencies
- React
- Webpack
- webpack-dev-server
- babel-loader
- react-hot-loader
Resources
- Demo video
- react-hot-loader on Github
- Integrating JSX live reload into your workflow
- Troubleshooting guide
- Ping @dan_abramov on Twitter or #reactjs (
chat.freenode.net/reactjs) on IRC