Setup React with hot reloading using Laravel Mix

Laravel Mix is a wrapper around Webpack. Webpack has many options/configurations and little hard to configure. Here “Laravel Mix” provides huge help. Laravel Mix is easy to use and configure.

Why do you need Laravel Mix?
Let’s suppose you want to run your app on local sub-domain like http://dev.example.com for development, and you only want to watchthe file changes, without necessarily using hot reloading. The create-react-app (https://github.com/facebook/create-react-app) does not provide ability towatchchanges. It is the perfect case where you can use Laravel Mix .

Let’s see how to setup React with hot reloading using Laravel Mix.

#Install React

npm install --save-dev react react-dom

#Add Index.html

Add index.html to your project. Below should be your folder structure.

./src --> Your react app
   ./components
   ...
./node_modules
index.html

Your index.html should look like below.

index.html

#Install Laravel Mix

npm install --save-dev cross-env laravel-mix

#Add scripts in package.json

Add below scripts in your package.json file

“scripts” to add in package.json

#Edit webpack configuration

Now, you should edit the webpack.mix.js configuration as per your need. You can add/edit all webpack configurations in this file. Basic configuration file looks like below.

webpack.mix.js

Cool. Now, you are ready to go 🙂.. Run below command for hot reloading.

npm run hot

If you are running your app on your local sub-domain(http://dev.example.com), you can watch the changes and on page reload you can see all new changes. Here is the command.

npm run watch

And to compile the project for production, you may execute command like below. You can check other commands into scripts tag in package.json file.

npm run prod

Laravel Mix provides almost each configuration which are provided by webpack.

Let us know if you have any query. We would love to help. Hope you enjoy reading this post!! 😊

If you found this article helpful, please click on the clap button below! ❤️👇

Follow RadicalLoop on Twitter, Facebook. 🚀