Hello, we have such setup for a `react` project wi...

# javascript

[taso]

Hello, we have such setup for a react project with KotlinJs. https://github.com/novoda/spikes/blob/master/game-of-life-multiplatform/web/build.gradle

The below gradle script is something we copy pasted. When I upgrade to Kotlin version 1.2.21, the task mentioned in the very bottom copyDependenciesKotlinJs is gone. Since I don’t understand the setup, I’m really not sure how to fix it.

task copyStatic(type: Copy) {
from "$rootDir/src/web"
into "$buildDir/web"
}

task buildBundle(type: NpmTask, dependsOn: [npmInstall, runDceKotlinJs]) {
args = ["run", "dist"]
}

task copyKotlinJs(type: Copy, dependsOn: compileKotlin2Js) {
def workDir = "$buildDir/classes/main/"
from(workDir) {
include "*.js"
include "*.js.map"
}
into "$workDir/dependencies"
}

task devBuild(dependsOn: [npmInstall, copyStatic, copyKotlinJs])

assemble.dependsOn buildBundle, copyStatic

afterEvaluate {
copyKotlinJs.dependsOn copyDependenciesKotlinJs
}

[Tristan Caron]

You can start a new project with https://github.com/JetBrains/create-react-kotlin-app and look how it's done

[anton.bannykh]

@taso kotlin-dce-js plugin used to create this task for its internal use. It doesn't expose it anymore.

[anton.bannykh]

You used that task to copy dependencies without running DCE for fast development cycle

[anton.bannykh]

With recent Kotlin release some undocument changes to the plugin have happened. (Sorry)

[anton.bannykh]

build.gradle:

task buildBundle(type: NpmTask, dependsOn: [npmInstall, runDceKotlinJs]) {
    args = ["run", "dist"]
}

task devBuild(dependsOn: [npmInstall, runDceKotlinJs]) {
    runDceKotlinJs.dceOptions.devMode = true
}

task copyStatic(type: Copy) {
    from "$projectDir/src/web"
    into "$buildDir/web"
}

assemble.dependsOn buildBundle, copyStatic

[anton.bannykh]

webpack.common.js:

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "src/main/js/index.js"),
    output: {
        path: path.resolve(__dirname, "build/web"),
        filename: "bundle.js"
    },
    resolve: {
        modules: [path.resolve(__dirname, "node_modules"), path.resolve(__dirname, "build/kotlin-js-min/main/")]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ["source-map-loader"],
                enforce: "pre"
            }
        ]
    }
};

[anton.bannykh]

webpack.dev.js:

var webpack = require("webpack");
var merge = require("webpack-merge");
var path = require("path");

module.exports = merge({
    devtool: "inline-source-map",
    resolve: {
        modules: [path.resolve(__dirname, "build/kotlin-js-min/main")]
    },
    devServer: {
        contentBase: "./src/web/"
//        port: 9000,
//        hot: true,
//        proxy: [
//            {
//                context: ["/all", "/sessions"],
//                target: "<http://localhost:8080>",
//                ws: true
//            }
//        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
},require("./webpack.common.js"));

[anton.bannykh]

Basically the DCE output is build/kotlin-js-min/main now

[anton.bannykh]

And instead of running copyDependenciesKotlinJs and copyKotlinJs you just set runDceKotlinJs to devMode

[taso]

This looks good. Thanks for clarification. Will update our project.

[taso]

Also thanks @Tristan Caron for the example project creator

[anton.bannykh]

I don't think create-react-kotlin-app suports multiplatform though =( The kotlin-frontend-plugin recommended by @timm might work out well for you.

[taso]

I don’t need multiplatform setup

[taso]

multiplatform setup is easy. I have common-js which uses multiplatform project. Then have a regular kotlin2js depending on common-js