Update Laravel Mix, and enable Hot Module Reloading.

.babelrc

@@ -11,6 +11,7 @@
       {
         "loose": true
       }
-    ]
+    ],
+    "react-hot-loader/babel"
   ]
 }

.gitignore

@@ -4,6 +4,7 @@
 /public/css/app.css
 /public/js/app.js
 /public/js/bootstrap.js
+/public/js/bootstrap.js.LICENSE
 /public/mix-manifest.json
 /public/media
 /public/sitemap*

config/es.php

@@ -214,7 +214,6 @@
                                 ],
                                 'license' => [
                                     'type' => 'text',
-                                    'index' => false,
                                 ],
                             ]
                         ],

package.json

@@ -5,29 +5,29 @@
     "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",
     "watch-poll": "npm run watch -- --watch-poll",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --disable-host-check --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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --mode=production --config=node_modules/laravel-mix/setup/webpack.config.js",
     "svgr": "svgr --svgo-config=\"svgo.json\" --ext=jsx -d resources/assets/js/icons resources/assets/svg/icons"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/plugin-proposal-decorators": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@sentry/browser": "^5.10.2",
     "@svgr/cli": "^2.4.1",
     "babel-preset-react": "^6.24.1",
     "cross-env": "^5.2.0",
-    "laravel-mix": "^4.0.15",
-    "lodash": "^4.17.15",
+    "laravel-mix": "^5.0.1",
+    "lodash-webpack-plugin": "^0.11.5",
     "request": "^2.88.0",
     "resolve-url-loader": "^2.3.1",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
     "webpack-bundle-analyzer": "^3.3.2"
   },
   "dependencies": {
-    "@sentry/browser": "^5.6.3",
     "array-to-sentence": "^2.0.0",
     "breakpoint-sass": "^2.7.1",
     "bricks.js": "^1.8.0",
@@ -47,6 +47,7 @@
     "react-dom": "^16.8.6",
     "react-gateway": "^3.0.0",
     "react-headroom": "^2.2.8",
+    "react-hot-loader": "^4.12.18",
     "react-infinite-scroller": "^1.2.0",
     "react-intersection-observer": "^8.25.2",
     "react-keyboard-shortcuts": "^1.1.3",

resources/assets/js/App.jsx

@@ -12,7 +12,7 @@ import { GatewayDest, GatewayProvider } from "react-gateway";
 import ReactModal2 from "react-modal2";
 ReactModal2.getApplicationElement = () => document.getElementById("App__main");
 import notifier from "./utils/notifier";
-import get from "lodash.get";
+import get from "lodash/get";
 
 import AppProviders from "./context/AppProviders";
 import Collection from "./Collection/Collection";

resources/assets/js/AppRouter.jsx

@@ -1,10 +1,11 @@
+import { hot } from "react-hot-loader/root";
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import ScrollMemory from "react-router-scroll-memory";
 
 import App from "./App";
 
-export default function AppRouter() {
+function AppRouter() {
   return (
     <Router>
       <>
@@ -14,3 +15,5 @@ export default function AppRouter() {
     </Router>
   );
 }
+
+export default hot(AppRouter);

resources/assets/js/bootstrap.js

@@ -1,3 +1,4 @@
+import "react-hot-loader";
 import React from "react";
 import ReactDOM from "react-dom";
 import AppRouter from "./AppRouter";

resources/assets/js/context/auth-context.js

@@ -29,6 +29,11 @@ class AuthProvider extends React.Component {
             authenticated: true
           });
         });
+      } else {
+        /**
+         * TODO : hit /login_from_token, to login and
+         * 'remember' user in sesssion.
+         */
       }
     } else {
       // If first loading after server-side authentication,

resources/assets/js/context/selections-context.js

@@ -2,7 +2,7 @@ import React from "react";
 
 import * as authClient from "../utils/auth-client";
 import * as selectionsClient from "../utils/selections-client";
-import get from "lodash.get";
+import get from "lodash/get";
 const SelectionsContext = React.createContext();
 
 class SelectionsProvider extends React.Component {

resources/assets/sass/blocks/Info.scss

@@ -24,7 +24,7 @@
     display: block;
     font-size: rem(22px);
     line-height: rem(20px);
-    color: #FF4747;
+    color: #ff4747;
     span {
     }
   }

resources/views/layouts/default.blade.php

@@ -18,7 +18,7 @@
     <meta name="msapplication-TileColor" content="#ff4747">
     <meta name="theme-color" content="#ffffff">
 
-    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css">
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
 
     @if (app()->environment('production'))
     <!-- Matomo -->
@@ -88,7 +88,7 @@ function getOriginalVisitorCookieTimeout() {
     <script crossorigin="anonymous"
         src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=IntersectionObserver">
     </script>
-    <script src="{{ mix('/js/bootstrap.js') }}"></script>
+    <script src="{{ mix('js/bootstrap.js') }}"></script>
 
     @yield('end_body')
 </body>

webpack.mix.js

@@ -2,6 +2,8 @@ let mix = require("laravel-mix");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
   .BundleAnalyzerPlugin;
 
+const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
+
 /*
  |--------------------------------------------------------------------------
  | Mix Asset Management
@@ -15,23 +17,26 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
 
 mix
   .react("resources/assets/js/bootstrap.js", "public/js")
-  .sass("resources/assets/sass/app.scss", "public/css");
-// .webpackConfig({
-//   plugins: [
-//     new BundleAnalyzerPlugin({
-//       analyzerMode: "static",
-//       reportFilename: "../storage/app/public/report.html",
-//       generateStatsFile: true,
-//       statsFilename: "../storage/app/public/stats.json"
-//     })
-//   ]
-// });
-// .options({
-//   hmrOptions: {
-//     host: "gobelins.test",
-//     port: 8080
-//   }
-// });
+  .sass("resources/assets/sass/app.scss", "public/css")
+  .webpackConfig({
+    plugins: [
+      new LodashModuleReplacementPlugin(),
+      new BundleAnalyzerPlugin({
+        analyzerMode: "static",
+        reportFilename: "../storage/app/public/report.html",
+        generateStatsFile: true,
+        statsFilename: "../storage/app/public/stats.json"
+      })
+    ]
+  })
+  .options({
+    processCssUrls: false,
+    hmrOptions: {
+      // host: "gobelins.test",
+      host: "127.0.0.1",
+      port: 8080
+    }
+  });
 
 if (mix.inProduction()) {
   mix.version();