Use Kotlin with npm, webpack and react

With Kotlin 1.1, targeting JavaScript in the Kotlin compiler has officially reached production-ready status. Of course, having compiler support is not enough to be able to solve real-life problems, so we continue our work on integrating Kotlin into the larger JavaScript ecosystem.

Today, we’d like to present two new projects: a Gradle plugin integrating Kotlin with npm, webpack and karma, and a full-stack application sample with a Kotlin/JVM backend and a Kotlin/JS frontend built with React.

Kotlin Frontend Plugin

The Kotlin frontend plugin allows you to build and deploy a Kotlin frontend application using webpack. You can use npm packages as dependencies of your application, and the plugin will take care of downloading them and bundling them into the resulting JS file. The plugin also integrates with Karma, allowing you to run the tests of your application. And for optimal workflow, the plugin supports continuous compilation and hot reload, ensuring that you always see an up-to-date version of your application in the browser.

The README file gives instructions for using the plugin, and the examples directory contains a simple example showing how you can apply it in a real project.

Kotlin React Example

Thinkter is an example of a modern full-stack application built in Kotlin. The backend runs under Jetty and uses Ktor, a Kotlin Web application framework developed by the Kotlin team. The frontend uses React; a set of React wrappers for Kotlin is provided as part of the project. You’re welcome to use the wrappers in your project and adapt them to your own needs. Note that we’re working on evolving the React wrappers internally, and we’re considering releasing them as a separate open-source library.

To see what Kotlin React code looks like, you can check out one of the components of the application.

Your feedback on these releases is very much welcome! Please file issues on GitHub, stop by the forums, or join the #javascript channel on the Kotlin Slack.

This entry was posted in JavaScript. Bookmark the permalink.

22 Responses to Use Kotlin with npm, webpack and react

  1. heguangyu says:

    The sample code is concise and power. Thank you for your great work. Using kotlin for Browser programming is very cool.

    Can you give a example which uses react && redom at the same time ?

  2. Brillig says:

    Is the Kotlin team looking into providing a similar demo for react native, or is this purely a web effort?

    • Dmitry Jemerov says:

      At this time we haven’t done any specific work around React Native, but it’s definitely something worth investigating.

      • Cris Bennett says:

        Definitely worth investigating indeed! React native has a some momentum behind it. Two projects I’m involved with have recently been switched to React native (from entirely native iOS & Android apps).

        I was a little disappointed as I was going to make a bid for Kotlin on the Android side. Being able to use Kotlin with React Native would be quite a win.

  3. ntsim says:

    I’m very new to Kotlin, but I think you guys have done a great job! I hope the interop with Javascript will keep getting better and better :)

    Do you know if there would be any problems making this work with React Native?

    • Dmitry Jemerov says:

      I’m fairly sure that making it work with Kotlin Native would require some additional effort; I don’t know how much, though.

  4. Pingback: Use Kotlin with npm, webpack and react | Ace Infoway

  5. Jakub Błaszczyk says:

    I see you have copy-pasted shared domain model in both frontend and backend module. is there a way to simply share model via an additional module?

    • Dmitry Jemerov says:

      We’re working on a solution to allow code reuse between the front-end and the back-end, and we have most of the pieces in place already, but we don’t know at this time when we’ll officially release the support.

  6. pqp says:

    damn you guys are on fire! being able to use kotlin from OS programming (kotlin native) to frontend development holy molly, wheres the limit?!

    anyway congratz, kotlin is awesome can’t wait to see its future!

  7. Misael Berrios Salas says:

    Has any one tried this on windows? Me and my friend have both win 10 and when running ‘start gradlew.bat build’ both get the error:

    [1m> Building 40% > :frontend:webpack-bundle[22m[41D:frontend:webpack-bundle[0K
    [1m> Building 40% > :frontend:webpack-bundle[22m[41D throw err;[0K

    Error: Cannot find module ‘C:\Users\Adoer\Documents\Programming\KurdishKotlin\frontend\build\node_modules\webpack\bin\webpack.js’
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:456:3
    :frontend:webpack-bundle [33mFAILED[39m

    [31mFAILURE: [39m[31mBuild failed with an exception.[39m

    What went wrong:
    Execution failed for task ‘:frontend:webpack-bundle’.
    [33m> [39mnode webpack.js failed (exit code = 1)

  8. Chris says:

    I’m seeing the same problem on Win 8.1 with both the “build” and “bundle” tasks.

  9. Ziustag says:

    With the Thinkter demo I’m having difficulties with the additional maven repositories:

    Unindexed remote maven repositories found. Disable…
    The following repositories used in your gradle projects were not indexed yet:

    I’m on Windows 10 with Intellij 17.2. If I try to manually update the missing repos, I get a strange error that only leads to some unresolved Intellij bug: does not exist

    Am I missing something? I tried quite a few things, but I don’t seem to be able to solve that issue. It’s quite a shame, since the demo seems very interesting to me.

  10. Dave Ford says:

    Is there a link to a a live running instance of the kotlin-fullstack-sample? Would be a nice touch.

  11. Dave Ford says:

    An internal DSL for CSS would be nice.

    For languages (like Kotlin) that have as their goal to help prevent runtime errors with type checking, the first goal should be to eliminate external DSLs. Obviously, any interaction with CSS will not be not checked.

Comments are closed.