Presence Digital

How to install React JSS hot reloading

How to install React JSS hot reloading
To enable hot reloading for faster development using React JSS and Sitecore, you can follow these steps:
  1. Install the necessary dependencies
 
npm install react-hot-loader@4.12.21
  1. Update the webpack configuration to use the React Hot Loader plugin. In your webpack.config.js file, add the following code:
 
const webpack = require(\'webpack\'); module.exports = { // ... plugins: [ newwebpack.HotModuleReplacementPlugin(), ], devServer: { hot: true, }, };
  1. Add the react-hot-loader to your application entry point. In your index.js file, add the following code:
 
import { hot } from \'react-hot-loader/root\'; import App from \'./App\'; const HotApp = hot(App); ReactDOM.render(<HotApp />, document.getElementById(\'root\'));
  1. Configure the Sitecore JSS app to use the hot webpack dev server. In your package.json file, add the following code:
 
\"scripts\": { \"start\": \"jss start http://my-sitecore-instance:1234 --hot\", }
  1. Start the development server by running the npm start command. This will launch the Sitecore JSS app with hot reloading enabled.
Now, any changes you make to your React JSS code will be automatically reflected in the browser without requiring a full page reload, allowing for faster development.