![laravel_mix.png](https://blog.radicalloop.com/uploads/laravel_mix_9cca2ac510.png)

**[Laravel Mix](https://laravel-mix.com/) is a wrapper around Webpack.** Webpack has many options/configurations and little hard to configure. Here “[Laravel Mix](https://laravel-mix.com/)” 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 `watch` the file changes, without necessarily using hot reloading. The `create-react-app` (https://github.com/facebook/create-react-app) does not provide ability to `watch` changes. 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.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   
   
    <title>Choose the Champ</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    
    <div id="root"></div>
    
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</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

```json
"scripts": {
  "dev": "npm run development",
  "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
  "prod": "npm run production",
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
```

## #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.

```javascript
let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix.setPublicPath('/')
.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(jsx|js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        exclude: /(node_modules)/,
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }
    ]
  },
})
.options({
  hmrOptions: {
      port: 3000
  }
})
.sass('src/css/app.scss', '/dist')
.react('src/index.js', '/dist/app.js');

// Full API
// mix.js(src, output);
// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
// mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
// mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
// mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);
// mix.stylus(src, output);
// mix.postCss(src, output, [require('postcss-some-plugin')()]);
// mix.browserSync('my-site.test');
// mix.combine(files, destination);
// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
// mix.copy(from, to);
// mix.copyDirectory(fromDir, toDir);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.setResourceRoot('prefix/for/resource/locators');
// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
// mix.dump(); <-- Dump the generated webpack config object t the console.
// mix.extend(name, handler) <-- Extend Mix's API with your own components.
// mix.options({
//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//   globalVueStyles: file, // Variables file to be imported in every component.
//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
//   purifyCss: false, // Remove unused CSS selectors.
//   terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });
```

**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](https://laravel-mix.com/docs/5.0/installation) 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!! ?


...

Follow **RadicalLoop** on [Twitter](https://twitter.com/radicalloop), [Facebook](https://www.facebook.com/radicalloop/). ?

large_laravel_mix.png

medium_laravel_mix.png

small_laravel_mix.png

thumbnail_laravel_mix.png

laravel_mix.png

Setup React with hot reloading using Laravel Mix

Setup React with hot reloading using Laravel Mix

Radicalloop