Hi! Trying to figure out how to use `historyApiFal...

# javascript

[Nikolai Sviridov]

Hi! Trying to figure out how to use historyApiFallback: true in webpack config. My webpack.config.d/03.devServer.js looks like this (copy from previous versions of full-stack-web-jetbrains-night-sample (current one doesn't work )):

// wrap is useful, because declaring variables in module can be already declared
// module creates own lexical environment
;(function (config) {
    const shouldRunServer = config.mode !== "production"
    const serverTaskName = ":server:devServer"
    const serverUrl = '<http://localhost:8081>'
    const path = require('path')

    if (shouldRunServer) {
        console.log("Running " + serverTaskName + " in background...")
        // __dirname = $ROOT/build/js/packages/$PACKAGE_NAME
        // rootProject = $ROOT
        const rootProject = path.resolve(__dirname, '../../../../')
        const child = require('child_process').exec(
            "." + path.sep + "gradlew " + serverTaskName,
            {
                "cwd": rootProject
            },
            (err, stdout, stderr) => {
                if (err) {
                    console.log("Cannot run " + serverTaskName + " server: " + err);
                }
            }
        )

        let isBackendRun = false

        config.devServer = config.devServer || {}
        config.devServer.onBeforeSetupMiddleware = function (server) {
            if (isBackendRun) return

            isBackendRun = true

            const originalClose = server.middleware.close;
            server.middleware.close = function () {
                child.kill('SIGINT');
                originalClose(arguments)
            }
        }
        config.devServer.proxy = {
            '/': {
                target: serverUrl,
                secure: false,
                bypass: function (req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('.js') !== -1) {
                        return req.headers.accept;
                    }
                }
            }
        }
        
    }
    config.devServer = {
        ...config.devServer,
        historyApiFallback: true,
    }
    // config.devServer["historyApiFallback"] = true // doesn't work too
})(config);

I need it for react routing to be able to work with reloading and using external url. Am I missing something and it should be in another place or smth else?

[Robert Jaros]

Plain simple:

if (config.devServer) {
    config.devServer.historyApiFallback = true
}

should work (works for me)

[Nikolai Sviridov]

Also tried this one. Doesn't work for my case(

[andylamax]

this is what works for me

config.devServer = { ...config.devServer, historyApiFallback: true, host: "0.0.0.0" }