Как реализовать ''горячий" рендеринг компонентов в React с использованием Webpack на примере данного кода?

Question

[Ричард Хендрикс]

Что-то не могу сообразить в чем ошибка, уже перерыл кучу туториалов.
Он мне отдает только папку public и все что в ней, хотя компиляция бандла проходит нормально при каждом изменении в файлах. То есть по итогу если бандл в public есть он его отображает, а если нету то пустой html.

webpack: 4.16.4
webpack-dev-middleware: 3.2.0
webpack-hot-middleware: 2.22.3
react: 16.4.2
babel-core: 6.26.3

server.js

const express = require('express');
const path = require('path');

const app = express();

const webpackConfig = require('../webpack.config.dev');
const webpack = require('webpack');

const compiler = webpack(webpackConfig);

app.use(
  require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: webpackConfig.output.publicPath
  })
);

app.use(require('webpack-hot-middleware')(compiler));

app.use(express.static('public'));

app.get('/', (req, res) =>
  res.sendFile(path.resolve(__dirname, './public/index.html'))
);

app.listen(3000, () => console.log('App listening on port 3000!'));

webpack.config.dev.js

const webpack = require("webpack");
const path = require("path");

module.exports = {
    entry: {
        index: [
            "webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000",
            "./src/index.js"
        ]
    },
    output: {
        path: path.resolve(__dirname, "./public/js"),
        filename: "[name].bundle.js",
        publicPath: "/"
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    module: {
        rules: [
            {
                test: [/\.js$/, /\.jsx$/],
                exclude: /node_modules/,
                include: path.join(__dirname, 'src'),
                use: 'babel-loader',
            }
        ]
    }
};

.babelrc

{
  "presets": [
    "env",
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

./src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './App.jsx'

const render = Component => {
    ReactDOM.render(
        <AppContainer>
            <Component />
        </AppContainer>,
        document.getElementById('root'),
    )
}

render(App)

if (module.hot) {
    module.hot.accept('./App.jsx', () => {
        const NextApp = require('./App.jsx').default;
        render(NextApp)
    })
}

./src/App.jsx

import React from 'react'
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default hot(module)(App)