Hot Module reloading (frontend) operationnal

25da372c · Florent Chehab · 04c716cf · 25da372c · 25da372c · 25da372c
Commit 25da372c authored Feb 08, 2019 by Florent Chehab
13 changed files
--- a/backend/base_app/settings/base.py
+++ b/backend/base_app/settings/base.py
@@ -18,8 +18,27 @@ import sys
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = dirname(dirname(dirname(os.path.abspath(__file__))))

-# Application definition
+##########
+# Webpack loader related
+
+WEBPACK_LOADER = {
+    "DEFAULT": {
+        "BUNDLE_DIR_NAME": "frontend_app/bundles/",
+        "STATS_FILE": os.path.join(BASE_DIR, "../frontend/webpack-stats.json"),
+    }
+}

+STATICFILES_DIRS = (
+    os.path.join(
+        BASE_DIR, "static/frontend_app/bundles/"
+    ),  # We do this so that django's collectstatic copies or our bundles to the STATIC_ROOT or syncs them to whatever storage we use.
+)
+
+
+# End of webpack loader related
+###########
+
+# Application definition
 INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
@@ -34,6 +53,7 @@ INSTALLED_APPS = [
    "rest_framework.authtoken",
    "backend_app",
    "frontend_app",
+    "webpack_loader",
 ]

 MIDDLEWARE = [

--- a/backend/frontend_app/templates/frontend_app/index.html
+++ b/backend/frontend_app/templates/frontend_app/index.html
+{% load render_bundle from webpack_loader %}
 <!DOCTYPE html>
 <html style="font-size:14">

@@ -20,9 +21,12 @@
  <!-- <script src="{% static '/frontend_app/react-dist/react.production.min.js' %}"></script> -->
  <link rel="stylesheet" href="{% static '/frontend_app/leaflet-dist/leaflet.css' %}"/>
  <link rel="stylesheet" href="{% static '/frontend_app/custom_leaflet.css' %}"/>
-  <link rel="stylesheet" href="{% static '/frontend_app/main.css' %}"/>
+  <!-- <link rel="stylesheet" href="{% static '/frontend_app/main.css' %}"/> -->
  <!-- <script src="{% static '/frontend_app/leaflet-dist/leaflet.js' %}"></script> -->
  <!-- <script src="{% static '/frontend_app/react-leaflet-dist/react-leaflet.js' %}"></script> -->
-  <script src="{% static '/frontend_app/main.js' %}"></script>
-  <noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript> 
-</html>
\ No newline at end of file
+  <!-- <script src="{% static '/frontend_app/main.js' %}"></script> -->
+
+  {% render_bundle 'main' %}
+  {% render_bundle 'vendor' %}
+  <noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript>
+</html>
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -17,3 +17,4 @@ pyyaml
 git+https://github.com/FloChehab/django-extensions.git@30c1a807aeb985739358d70907496e98d1857abb#egg=django-extensions
 uwsgi
 dotmap
+django-webpack-loader==0.6.0
\ No newline at end of file
--- a/frontend/.babelrc
+++ b/frontend/.babelrc
@@ -6,6 +6,7 @@
        "stage-1"
    ],
    "plugins": [
-        "transform-class-properties"
+        "transform-class-properties",
+        "react-hot-loader/babel"
    ]
 }
\ No newline at end of file
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
-node_modules
\ No newline at end of file
+node_modules
+webpack-stats.json
\ No newline at end of file
--- a/frontend/dist/.gitignore
+++ b/frontend/dist/.gitignore
-main.js
-main.css
 fonts/
-stats.json
\ No newline at end of file
+stats.json
+bundles
\ No newline at end of file
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,7 @@
  "scripts": {
    "lint": "eslint \"./src/**/*.js\"",
    "lint-fix": "eslint \"./src/**/*.js\" --fix",
-    "dev": "webpack --mode development",
+    "dev": "node server.js",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1",
    "stats": "webpack --profile --json > frontend/static/frontend/stats.json",
@@ -22,7 +22,6 @@
    "@material-ui/core": "^3.1.0",
    "@material-ui/icons": "^2.0.3",
    "@material-ui/lab": "^3.0.0-alpha.16",
-    "babel-polyfill": "^6.26.0",
    "babel-preset-stage-0": "^6.24.1",
    "date-fns": "^2.0.0-alpha.16",
    "downshift": "^2.2.0",
@@ -50,6 +49,7 @@
    "babel-eslint": "^10.0.1",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
@@ -64,11 +64,15 @@
    "node-sass": "^4.9.3",
    "postcss-loader": "^3.0.0",
    "prop-types": "^15.6.2",
+    "react-hot-loader": "^4.6.5",
    "react-lorem-component": "^0.13.0",
    "react-script": "^2.0.5",
    "sass-loader": "^7.1.0",
    "webpack": "^4.17.0",
    "webpack-bundle-analyzer": "^3.0.2",
-    "webpack-cli": "^3.1.0"
+    "webpack-bundle-tracker": "^0.4.2-beta",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1"
  }
 }
--- a/frontend/server.js
+++ b/frontend/server.js
+var webpack = require("webpack");
+var WebpackDevServer = require("webpack-dev-server");
+var config = require("./webpack.config.dev");
+
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  inline: true,
+  //progress: true,
+  historyApiFallback: true,
+  headers: { "Access-Control-Allow-Origin": "*" }
+}).listen(3000, "0.0.0.0", (err) => {
+  if (err) {
+    // eslint-disable-next-line no-console
+    console.log(err);
+  }
+
+  // eslint-disable-next-line no-console
+  console.log("Listening at 0.0.0.0:3000");
+});
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
-import "babel-polyfill";
-
 import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
@@ -19,7 +17,10 @@ const MainReactEntry = () => (
  </Provider>
 );

-
 const wrapper = document.getElementById("app");

 wrapper ? ReactDOM.render(<MainReactEntry />, wrapper) : null;
+
+if(module.hot) {
+	module.hot.accept();
+}
\ No newline at end of file
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const BundleTracker = require("webpack-bundle-tracker");

 const config = {
  entry: {
-    main: "./src/index.js",
+    main: [
+      "./src/index",
+    ],
+    vendor: [
+      "babel-polyfill",
+    ]
  },
  output: {
-    path: __dirname + "/dist",
-    filename: "[name].js"
+    path: __dirname + "/dist/bundles",
+    filename: "[name]-[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
        options: {
-          presets: ['es2015', 'react', 'stage-0'],
+          presets: ["es2015", "react", "stage-0"],
+          compact: true
        },
      },
      {
@@ -26,39 +33,42 @@ const config = {
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
-              publicPath: '../'
+              publicPath: "../"
            }
          },
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
+          "css-loader",
+          "postcss-loader",
+          "sass-loader",
        ]
      },
      {
        test: /\.yml/,
-        use: 'js-yaml-loader'
+        use: "js-yaml-loader"
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
-          loader: 'file-loader',
+          loader: "file-loader",
          options: {
-            name: '[name].[ext]',
-            publicPath: './fonts/',
-            outputPath: 'fonts/'
+            name: "[name].[ext]",
+            publicPath: "./fonts/",
+            outputPath: "fonts/"
          }
        }]
      }
    ],
  },
  plugins: [
+    // TODO add hash to css files
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
-      filename: "[name].css",
-      chunkFilename: "[id].css"
-    })
+      filename: "[name]-[hash].css",
+      chunkFilename: "[id]-[hash].css"
+    }),
+
+    new BundleTracker({ filename: "./webpack-stats.json" }),
  ],
 };

-module.exports = config;
\ No newline at end of file
+module.exports = config;
--- a/frontend/webpack.config.build.js
+++ b/frontend/webpack.config.build.js
+const merge = require("webpack-merge");
+const webpackConfig = require("./webpack.config");
+
+module.exports = merge(webpackConfig, {
+  devtool: "source-map",
+});
\ No newline at end of file
--- a/frontend/webpack.config.dev.js
+++ b/frontend/webpack.config.dev.js
+const merge = require("webpack-merge");
+const webpackConfig = require("./webpack.config.base");
+const webpack = require("webpack");
+
+const devConfig = merge(webpackConfig, {
+  devtool: "eval",
+  mode: "development",
+  entry: {
+    main: [
+      "webpack-dev-server/client?http://localhost:3000",
+      "webpack/hot/only-dev-server",
+    ]
+  },
+  output: {
+    publicPath: "http://localhost:3000/dist/bundles/",
+    path: __dirname + "/dist/bundles",
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
+  ],
+});
+
+module.exports = devConfig;