Pull request #730: + client: Add Hot Module Replacement

Merge in DNS/adguard-home from feature/hmr to master

Squashed commit of the following:

commit 952ed1955c2a7a32446d99489f137f02eb47c99e
Merge: 83484931 de92c852
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Aug 13 11:02:10 2020 +0300

    Merge branch 'master' into feature/hmr

commit 8348493105d7d63d8b0836a5c272df2b17a6b142
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 15:07:31 2020 +0300

    Remove empty prop types, remove Services empty container

commit b2fe4a30b79d91e482318ee5deea8e49c7038f7e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 13:56:35 2020 +0300

    Move constants

commit f8be4c18c35193ad77bf5e25f311ad834c1d6870
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 13:19:02 2020 +0300

    Fix Setup bug, update webpack.dev

commit 1d9cc4ddf8af2c979eb707a7f0fc06744eec186c
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 12:10:38 2020 +0300

    Review changes

commit a1edb21358def21ed1808b081ffc2f0b6755e3da
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Aug 5 11:46:58 2020 +0300

    Remove lazy loading, fix updated components

commit 0aa2cf55f8d4206ac9e2f99fc1b990ed8a9c7825
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Aug 4 20:32:19 2020 +0300

    Refactor App component, add lazy loading

commit 3c2ba4772a91ff7b06641dba6c6bf3fdcd2fdf7f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Aug 4 17:12:41 2020 +0300

    Simplify App hot loading boilerplate, setup lazy loading, update Header

commit 8df3221f315372b066f2ac0c9a1687f1677b8415
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Aug 4 15:16:06 2020 +0300

    + client: Add Hot Module Replacement

client/webpack.dev.js

@@ -1,5 +1,50 @@
 const merge = require('webpack-merge');
+const yaml = require('js-yaml');
+const fs = require('fs');
 const common = require('./webpack.common.js');
+const { BASE_URL } = require('./constants');
+
+const ZERO_HOST = '0.0.0.0';
+const LOCALHOST = '127.0.0.1';
+const DEFAULT_PORT = 80;
+
+/**
+ * Get document, or throw exception on error
+ * @returns {{bind_host: string, bind_port: number}}
+ */
+const importConfig = () => {
+    try {
+        const doc = yaml.safeLoad(fs.readFileSync('../AdguardHome.yaml', 'utf8'));
+        const { bind_host, bind_port } = doc;
+        return {
+            bind_host,
+            bind_port,
+        };
+    } catch (e) {
+        console.error(e);
+        return {
+            bind_host: ZERO_HOST,
+            bind_port: DEFAULT_PORT,
+        };
+    }
+};
+
+const getDevServerConfig = (proxyUrl = BASE_URL) => {
+    const { bind_host: host, bind_port: port } = importConfig();
+    const { DEV_SERVER_PORT } = process.env;
+
+    const devServerHost = host === ZERO_HOST ? LOCALHOST : host;
+    const devServerPort = DEV_SERVER_PORT || port + 8000;
+
+    return {
+        hot: true,
+        host: devServerHost,
+        port: devServerPort,
+        proxy: {
+            [proxyUrl]: `http://${devServerHost}:${port}`,
+        },
+    };
+};
 
 module.exports = merge(common, {
     devtool: 'eval-source-map',
@@ -16,4 +61,5 @@ module.exports = merge(common, {
             },
         ],
     },
+    devServer: process.env.WEBPACK_DEV_SERVER ? getDevServerConfig(BASE_URL) : undefined,
 });