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-28 12:59:44Z

10

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

edited Aug 28, 2018 at 12:59

answered Jun 14, 2018 at 0:29

andylamax

2,0921 gold badge17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Pavel Krizhanovskiy Over a year ago

Thanks for this, could you please give a fresh example for a new versions of Kotlin libs?

andylamax Over a year ago

please specify the libs. are you asking bout kotlinx? coroutines? wrappers? which libs?

Pavel Krizhanovskiy Over a year ago

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)

Ross Anderson Over a year ago

Appreciate the answer from @andylamax and I've used this to create a template project gitlab.com/rossdanderson/kotlin-react-bootstrap with up to date dependencies. Please feel free to extend upon this!

ruX Over a year ago

@RossAnderson thank you for the great initiative! It would be nice if you can add licence so everyone can extend it

|

jaro2gw · Accepted Answer · 2020-06-05 07:45:34Z

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 5, 2020 at 7:45

jaro2gw

1339 bronze badges

Collectives™ on Stack Overflow

Creating a Kotlin React App using gradle

Initial Intentions

Alternative Approach

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Initial Intentions

Alternative Approach

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related