Create React App Hot Loader
Webpack dev-server for create-react-app projects with support for hot reloading.
Introduction
Adding react-hot-loader to your application requires changing webpack configuration. Create-react-app hides webpack files from the developer until they eject. By ejecting you lose the convenience of updates to features beyond just dev-server.
The solution is to delegate the responsibility of running the dev-server to another library. This package comes with webpack server configured for create-react-app projects and with support for react hot loader.
Installation
Package supports both local and global installations.
Add this package to your project if you want to share the experience of real hot reloading with other developers.
Install the server globally if you want to avoid bringing in extra dependencies.
Locally
Run following command to add this package to your project:
$ npm install --dev create-react-app-hot-loader
Open package.json and change start
script to run different server:
"scripts": {- "start": "react-scripts start",+ "start": "create-react-app-hot-loader", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }
Test your new setup by running npm start
.
Globally
To be able to start the server for any project on your local machine, install it as follows:
$ npm install -g create-react-app-hot-loader
Now you can start the server from anywhere with the following command:
$ create-react-app-hot-loader
Debugging
By default update errors cause full page refresh. Not very useful for debugging.
Start the server with --hot-only
flag to disable this fallback mechanism.
Plans
At the moment the server heavily relies on react-scripts internals.
I plan to get rid of those dependencies at the cost of losing some of their useful features.