A heatpack command for quick React development with webpack hot reloading.
Just pass it at a module which either runs React.render(...) or exports a React component:
heatpack src/index.js
Install the heatpack command globally:
npm install -g react-heatpack
Navigate to the React code you want to run and point heatpack at a module:
$ cd ~/repos/ideas-md
$ heatpack src/index.js
react-heatpack listening at localhost:3000
If all goes well, you should see a listing of loaded modules, ending with:
webpack: bundle is now VALID
Open http://localhost:3000/ and your app should be served and will be hot reloaded when you make any changes.
I noticed that while my production webpack config tended to be tailored to each project's needs, the config for hot reloading during development was fairly uniform and could be used across multiple projects.
This module provides a generic hot reloading config and takes care of hooking up its webpack depedencies, so you can focus on the interesting bit during initial development.
Webpack loaders are configured for the following:
JavaScript modules can have .js or .jsx extensions and will be transformed with Babel, so you can use:
- JSX
- ECMAScript 6 features
- ECMAScript 7 proposals experimentally supported by Babel.
You can also require .json files as normal.
Since you should never render to document.body, the page served up by heatpack includes a <div id="app"></div> element for your app to render into.
React Hot Loader is used to allow you to tweak your React components on the fly without losing their current state.
Note: React components need to be exported from a module to be eligible for hot reloading, so React.render(...) should be executed in a different module which imports the components to be rendered, e.g.:
var React = require('react')
var App = require('./App')
React.render(<App/>, document.querySelector('#app'))If you pass heatpack a module which doesn't contain a reference to React.render, it will assume the module exports a React component and try to take care of rendering it for you. To disable this check and force the specified module to be executed directly, pass an -f or --force flag.
If you use CoffeeScript, it's also supported - modules can have .coffee or .cjsx extensions.
.cjsx modules will be transformed with coffee-react-transform, allowing you to use JSX in your CoffeeScript.
Require CSS files from your JavaScript as if they were any other module, e.g.:
require('./Widget.css')Styles will be automatically applied to the page and hot reloaded when you make a change.
Vendor prefixes will be automatically applied to your CSS, as necessary.
Images and font files referenced from your CSS will also be handled for you.
See the css-loader documentation for more information on what webpack allows you to do when you start using require() for CSS.
Require image files from your JavaScript as if they were any other module, e.g.:
<img src={require('./logo.png')}/>Small images will be inlined as data: URIs and larger images will be served up by webpack.
The workflow this module is intended to enable is:
- Have an idea for a React component/library/app/etc.
npm installwhatever you need.- Write some initial code: a React component or a module which runs
React.render(...). - Run
heatpackto serve it up and get back to working on your idea, with code and styles hot reloading as you work.
- react-router - hot reloadable nested routing
- redux - hot reloadable Flux (which will secretly make you understand at least one piece of Elm!)
If you need a fully-fledged dev/test/prod webpack setup, or a well-commented reference for how to build one, try cesarandreu/web-app.
Bottom of the README easter egg: you don't even need to npm install react to get started with heatpack (but don't tell anyone because I don't know if that's actually a good thing yet!). It can serve up this sample module without a node_modules in sight:
var React = require('react')
module.exports = React.createClass({render() {return <div>Hi!</div>}})