Creating a Kotlin React App using gradle

Question

I have been looking forward on how to create a kotlin-react-app using gradle (I am aware with the create-kotlin-react-app CLI tool, which doesn't use radle) and i couldn't get any sources to point me through. I have stumbled accross the kotlin frontend plugin (It works) and the npm and webpack plugin, but I couldnt configure them to run/create me a kotlin-react-project. I not an expert in configuring webpack so it probably even harder for me.

Initial Intentions

I intend to create a multiplatform project (yes, the kotlin experiental packed up in IntelliJ)

Alternative Approach

when I failed, I choose to go with this approach.

Write my code using kotlin multiplatform plugin
Compile it into a jar
Add it as a library into the create-react-kotlin-app i'd create
Run and wait for the magic to happen (it ddnt) Turns out, some how the preconfigured webpack wasn't compiling because it wasn't available during compile time. but the IDE worked well and even provided code compleion

Can someone please point me in a direction?

andylamax · Accepted Answer · 2018-08-28T12:59:44.760

Building a react app using gradle is easy when using the kotlin frontend plugin. In IntelliJ,follow these steps

New module > gradle > kotlin (Javascript) > [next,next,next...finish]

You'll have to configure gradle ofcourse (based how you like it).

I configured mine as shown below:-

buildscript {
    ext.kotlin_version = '1.2.41'
    ext.kotlinx_html_version = "0.6.4"
    ext.kotlin_frontend_version = "0.0.30"
    ext.react_version = "16.4.0-pre.31-kotlin-$kotlin_version"
    ext.react_dom_version = "16.4.0-pre.31-kotlin-$kotlin_version"
    repositories {
        mavenCentral()
        maven {
            url "https://dl.bintray.com/kotlin/kotlin-eap"
        }
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:$kotlin_frontend_version"
    }
}
apply plugin: 'org.jetbrains.kotlin.frontend'
apply plugin: 'kotlin2js'
sourceCompatibility = 1.8
repositories {
    mavenLocal()
    mavenCentral()
    jcenter()
    maven { url "http://dl.bintray.com/kotlin/kotlin-dev" }
    maven { url "http://dl.bintray.com/kotlinx/kotlinx" }
    maven { url "http://dl.bintray.com/kotlin/kotlin-js-wrappers" }
}
dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    compile "org.jetbrains.kotlinx:kotlinx-html-js:$kotlinx_html_version"
    compile "org.jetbrains:kotlin-react:$react_version"
    compile "org.jetbrains:kotlin-react-dom:$react_dom_version"
}
kotlinFrontend {
    npm {
        dependency "style-loader" // production dependency
        dependency "react"
        dependency "react-dom"
        dependency "kotlin"
        dependency "@jetbrains/kotlin-extensions"
        dependency "@jetbrains/kotlin-react"
    }
    webpackBundle {
        bundleName = "main"
        sourceMapEnabled = false   // enable/disable source maps
        contentPath = file("${projectDir}/public") // a file that represents a directory to be served by dev server)
        publicPath = "/"  // web prefix
        host = "localhost" // dev server host
        port = 8088   // dev server port
        stats = "errors-only"  // log level
    }
}
task copyDocs(type: Copy) {
    println ":md-react:copyDocs: Copying to public directory"
    from("${projectDir}/build/bundle") {
        include "**/*.js"
        include "*.js"
    }
    into "${projectDir}/public/static"
    println ":md-react:copyDocs: Done copying"
}
task assembleWeb(type: Sync) {
    configurations.compile.each { File file ->
        from(zipTree(file.absolutePath), {
            includeEmptyDirs = false
            include { fileTreeElement ->
                def path = fileTreeElement.path
                (path.endsWith(".js") || path.endsWith(".map")) && (path.startsWith("META-INF/resources/") ||
                        !path.startsWith("META-INF/"))
            }
        })
    }
    from compileKotlin2Js.destinationDir
    into "${projectDir}/build/classes/main"
    dependsOn classes
}
//run.dependsOn copyDocs
assemble.dependsOn assembleWeb
copyDocs.dependsOn bundle
//assemble.finalizedBy(copyDocs)
compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/build/classes/main/web.js"
    kotlinOptions.moduleKind = "umd"
    kotlinOptions.sourceMap = true
}

Hope this helps you.

Happy Hacking

Thanks for this, could you please give a fresh example for a new versions of Kotlin libs? — Pavel Krizhanovskiy, Jul 04 '18 at 13:12
please specify the libs. are you asking bout kotlinx? coroutines? wrappers? which libs? — andylamax, Jul 10 '18 at 11:20
All libs. I'm trying to build kotlin fullstack app (with embedded Netty webserver), but most of examples are too old or not working with new versions of Kotlin, Gradle, kotlin-jdk (instead of kotlin-jre), etc. I even can't make this example work. Never faced such problems earlier when making webapps (Java, Spring, Tomcat, Maven) — Pavel Krizhanovskiy, Jul 12 '18 at 04:27
@PavelKrizhanovskly can you please share your project structure? I am new to Kotlin (4 months in development), I know they have changed somethings, so I don't really know how the old examples where. — andylamax, Jul 16 '18 at 10:24
@PavelKrizhanovskly What I can tell is that, you can easily do everything in gradle, Just make sure the comon modules go with common liblaries and the platform specific module goes together with the platform liblaries — andylamax, Jul 16 '18 at 10:27
Appreciate the answer from @andylamax and I've used this to create a template project https://gitlab.com/rossdanderson/kotlin-react-bootstrap with up to date dependencies. Please feel free to extend upon this! — Ross Anderson, Aug 05 '18 at 11:08
@RossAnderson thank you for the great initiative! It would be nice if you can add licence so everyone can extend it — ruX, Feb 06 '19 at 18:15

score 1 · Answer 2 · answered Jun 05 '20 at 07:45

1

For anyone looking for more recent solution: with the release of kotlin 1.4-M2 you can use Intellij Idea's experimental project wizard to create a fullstack web app with ktor backend and kotlin-react frontend

answered Jun 05 '20 at 07:45

jaro2gw

133
8

Creating a Kotlin React App using gradle

Initial Intentions

Alternative Approach

2 Answers2