add live reload doc

Author: michael-yin

docs/live_reload.md

@@ -0,0 +1,28 @@
+# Live Reload
+
+With `webpack-dev-server`, we can use it to auto reload web page when the code of the project changed.
+
+Please edit `frontend/webpack/webpack.config.dev.js`
+
+```js
+devServer: {
+  host: "0.0.0.0",
+  port: 9091,
+  headers: {
+    "Access-Control-Allow-Origin": "*",
+  },
+  writeToDisk: true,
+  watchFiles: [
+    Path.join(__dirname, '../../django_app/**/*.py'),
+    Path.join(__dirname, '../../django_app/**/*.html'),
+  ],
+},
+```
+
+Notes:
+
+1. Remove `inline: true,` and `hot: true` from the `devServer` section
+1. Then you should config the `watchFiles`
+1. Here we tell `webpack-dev-server` to watch all `.py` and `.html` files under the `django_app` directory.
+
+Now if we change code in the editor, the web page will live reload, which is awesome!

docs/setup_with_django.md

@@ -220,3 +220,7 @@ $ python manage.py runserver
 Now check on [http://127.0.0.1:8000/](http://127.0.0.1:8000/) and you should be able to see a welcome page.
 
 The source code can also be found in the [Examples](https://github.com/AccordBox/python-webpack-boilerplate/tree/master/examples/)
+
+## Live Reload
+
+[Live Reload Support](live_reload)

mkdocs.yml

@@ -18,6 +18,7 @@ nav:
   - Setup With Flask: setup_with_flask.md
   - Frontend workflow: frontend.md
   - Run NPM command at root directory: run_npm_command_at_root.md
+  - Live Reload: live_reload.md
   - Tailwind CSS: setup_with_tailwind.md
   - Import React: react.md
   - Import Vue: vue.md