webpackMiddleware

index.ts

import * as express from 'express';
import { createRouter } from './routes';
import translations from './translations';

const WEBPACK_AVAILABLE = (() => {
    try {
        require('webpack');
        return true;
    } catch (err) {
        return false;
    }
})();

// Only run in development mode if dev-dependencies (i.e. webpack) are installed, and NODE_ENV is not "production".
const DEVELOPMENT_MODE = process.env.NODE_ENV !== 'production' && WEBPACK_AVAILABLE;

export default function makeUiMiddleware() {
    const router = express.Router();

    // Serve JS and CSS files via webpack-dev-middleware - this makes it so changes to the code are updated
    // right away.
    if (DEVELOPMENT_MODE) {
        const makeWebpackMiddleware = require('./webpackMiddleware').default; // tslint:disable-line no-var-requires
        router.use(makeWebpackMiddleware());
    }

    router.use('/', createRouter());

    return router;
}

export { translations };

webpackMiddelware.ts

import * as express from 'express';
import _ from 'lodash';
import * as path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const WEBPACK_CONFIG: webpack.Configuration = require('../../webpack.config');

function toAbsolutePath(entry: string) {
    return entry.startsWith('.') ? path.resolve(__dirname, '..', '..', entry) : entry;
}

function toAbsolutePaths(entries: string | string[]) {
    if (Array.isArray(entries)) {
        return entries.map(toAbsolutePath);
    } else {
        return toAbsolutePath(entries);
    }
}

export default function makeWebpackDevMiddleware() {
    const answer = express.Router();

    const webpackConfig = _.cloneDeep(WEBPACK_CONFIG);

    // Remap entries to absolute paths
    if (!webpackConfig.entry) {
        // Do nothing
    } else if (typeof webpackConfig.entry === 'string') {
        webpackConfig.entry = toAbsolutePaths(webpackConfig.entry);
    } else if (Array.isArray(webpackConfig.entry)) {
        webpackConfig.entry = toAbsolutePaths(webpackConfig.entry);
    } else if (typeof webpackConfig.entry === 'object') {
        for (const name of Object.keys(webpackConfig.entry)) {
            webpackConfig.entry[name] = toAbsolutePaths(webpackConfig.entry[name]);
        }
    }

    const publicPath = (webpackConfig.output && webpackConfig.output.publicPath) || '/';

    const hmrUrl = publicPath + '__webpack_hmr';
    (webpackConfig as any).entry.messenger.push(`webpack-hot-middleware/client?path=${hmrUrl}`);

    const compiler = webpack(webpackConfig);

    answer.use(
        webpackMiddleware(compiler, {
            lazy: false,
            publicPath,
        })
    );

    answer.use(
        webpackHotMiddleware(compiler, {
            path: hmrUrl,
        })
    );

    return answer;
}