Hi, I've just converted an existing project to inc...

# kvision

[Mark Fisher]

Hi, I've just converted an existing project to include kvision, I've got the web application to run with jsRun, but I'm having trouble getting HMR to work.
The app is just a hello world, I'm using intellij, and was trying to get some basic dev env setup.

override fun start() {
        root("kvapp") {
            flexPanel(FlexDirection.ROW, justify = JustifyContent.CENTER) {
                div("Hello world!") {
                    marginTop = 50.px
                    fontSize = 50.px
                }
            }
        }
    }

Starting the application from cli using gradle, my message is displayed at localhost:3000, but when I change the div text, although I see webpack reporting it's compiled, neither a normal browser (chrome) or debug javascript browser from within IntelliJ are showing the altered text, even when refreshing the page.

Logs when I save a change in WebApp.kt (the above taken from)

❯ ./gradlew :server:jsRun
Starting a Gradle Daemon, 1 busy and 1 incompatible and 5 stopped Daemons could not be reused, use --status for details

> Configure project :server
w: 'java' Gradle plugin is not compatible with 'org.jetbrains.kotlin.multiplatform' plugin.

Consider adding a new subproject with 'java' plugin where the KMP project is added as a dependency.


> Task :server:jsBrowserDevelopmentRun
<i> [webpack-dev-server] [HPM] Proxy created: /kv/*,/kvsse/*  -> <http://localhost:8080>
<i> [webpack-dev-server] [HPM] Proxy created: /login,/logout  -> <http://localhost:8080>
<i> [webpack-dev-server] [HPM] Proxy created: /kvws/*  -> <http://localhost:8080>
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: <http://localhost:3000/>
<i> [webpack-dev-server] On Your Network (IPv4): <http://192.168.1.100:3000/>
<i> [webpack-dev-server] Content not from webpack is served from 'kotlin, ..\..\..\..\server\build\processedResources\js\main' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
webpack 5.94.0 compiled successfully in 1084 ms
webpack 5.94.0 compiled successfully in 21 ms
webpack 5.94.0 compiled successfully in 30 ms

I'm wondering what I'm doing wrong.
Sorry for the beginner question.

[Robert Jaros]

Hello
For HMR you also need startApplication(::App, module.hot) and correct settings in webpack.config.d/webpack.js (hot = true).

[Robert Jaros]

Please compare your application with the template from kvision-examples repo

[Mark Fisher]

I'm not getting HMR working in examples either. I'm expecting that if I make a change to any of the web application, and see webpack update, then the version showing on localhost:3000 should reflect it, if that's correct. Even refreshing the page doesn't change anything. Only restarting the "./gradlew jsRun" picks up the changes

My main is:

fun main() {
    startApplication(::WebApp, module.hot, BootstrapModule, BootstrapCssModule, CoreModule)
}

and my webpack.js is:

config.resolve.modules.push("../../processedResources/js/main");
config.resolve.conditionNames = ['import', 'require', 'default'];

if (config.devServer) {
    config.devServer.hot = true;
    config.devServer.open = false;
    config.devServer.port = 3000;
    config.devServer.historyApiFallback = true;
    config.devtool = 'eval-cheap-source-map';
} else {
    config.devtool = undefined;
}

// disable bundle size warning
config.performance = {
    assetFilter: function (assetFilename) {
        return !assetFilename.endsWith('.js');
    },
};

[Mark Fisher]

But with these, changes to the div don't reflect on the browser.

class WebApp: Application() {
    override fun start() {
        root("kvapp") {
            flexPanel(FlexDirection.ROW, justify = JustifyContent.CENTER) {
                div("Hello world! something here") {
                    marginTop = 50.px
                    fontSize = 50.px
                }
            }
        }
        // can do an AppScope.launch here to run something to populate page
    }
}

[Robert Jaros]

You are running ./gradlew jsRun? It should be ./gradlew -t jsRun

[Mark Fisher]

aha. I've never used -t before. I'm mostly backend dev so that was never on my radar. Thanks.

[Mark Fisher]

And now I see it on the Development page docs.