Hi, I'm struggling with getting local dev mode (`r...

# react

[Piotr Krzemiński]

Hi, I'm struggling with getting local dev mode (run task) to work properly with reloading on changes. I use react-router. Two problems:
1. Minor: When calling ./gradlew run --continuous the browser opens on http://localhost:8080/ and displays what corresponds to an unmatched route. Can I configure Webpack through build.gradle.kts somehow so that it opens some real route, like http://localhost:8080/ui/users in my case?
2. Major: when making a change while I'm under /ui/users , the website reloads but fails with this message in server console: "<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/ui/users to http://localhost:8080/ [EADDRNOTAVAIL]"

[Piotr Krzemiński]

My config so far is:

js(LEGACY) {
        useCommonJs()
        browser {
            binaries.executable()

            commonWebpackConfig {
                cssSupport.enabled = true
                devServer = devServer?.copy(
                    proxy = mutableMapOf("/ui/users" to "<http://localhost:8080/>"),
                )
            }
        }
    }

[Piotr Krzemiński]

I'd expect the dev server to take my index.html and let the react-router do the routing

[Piotr Krzemiński]

http://localhost:8080/webpack-dev-server returns this:

Assets Report:

Compilation: unnamed

frontend-react.js

main.430e7e2f64785def3978.hot-update.js

main.430e7e2f64785def3978.hot-update.json

and it's weird there's no index.html which I have placed in src/main/resources. Not sure if related to the problem, though

[Robert Jaros]

You should probably add historyApiFallback = true to you webpack configuration.

[Piotr Krzemiński]

I cannot find this property:

@Suppress("unused")
    data class DevServer(
        var open: Any = true,
        var port: Int? = null,
        var proxy: MutableMap<String, Any>? = null,
        var static: MutableList<String>? = null,
        var contentBase: MutableList<String>? = null
    ) : Serializable

[Piotr Krzemiński]

I use Kotlin 1.6.0 already. On which version are you @Robert Jaros?

[Robert Jaros]

There is no such property in the gradle plugin. You need to add this in webpack.config.d folder.

[Robert Jaros]

if (config.devServer) {
    // other options
    config.devServer.historyApiFallback = true;
}

in webpack.config.d/webpack.js file

[Robert Jaros]

it should redirect dev server to your index.html for all routes

[Robert Jaros]

You need to setup correctly your production env as well.
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

[Piotr Krzemiński]

thank you, it works!

[Piotr Krzemiński]

would it make sense to contribute to Kotlin/JS to add this flag? it's a bit weird to have Webpack config scattered around multiple places

[Robert Jaros]

there are lots of other missing options, I don't even think this one is the most important 🙂

[Piotr Krzemiński]

too bad there's no some generic approach to surface all options