Kotlin Scripts

$ yarn create react-app my-app -- --scripts-version kotlin-scripts

Kotlin Scripts provides a JS-like development environment for developing web apps with the Kotlin programming language and React. It bootstraps an environment to automatically compile all Kotlin code to JS, provide features like reloading and bundling, and seamlessly use JS code from Kotlin.

Getting Started

Using Yarn

Note that using yarn create requires Yarn 0.25 or later

To create a new app using Kotlin and React, run:

$ npm install -g bs-platform
$ yarn create react-app <app-name> -- --scripts-version reason-scripts
$ cd <app-name>
$ yarn start

Using npm

$ npm install -g bs-platform create-react-app
$ create-react-app <app-name> --scripts-version reason-scripts
$ cd <app-name>
$ npm start

Directory Layout

Creating a new app makes an <app-name> directory with the following layout:

<app-name>/
  README.md
  node_modules/
  package.json
  build.gradle
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    main/
      kotlin/
        index.kt
        app.kt
    style/
      index.css
      app.css
    img/
      logo.svg

Features

Everything from Create React App

• Highly-optimized build configuration
• Pre-configured test runner
• Friendly developer environment
• "eject" Webpack config
• Environment variable configuration
• Automatic PWA configuration
• Low configuration builds

Kotlin Entrypoint

The entry point to the app is src/main/kotlin/index.kt. From the start your new app will be based on Kotlin, but can seamlessly interop with existing JS files and projects!

Automatic Compilation of Kotlin files

Any Kotlin file will be automatically compiled to a JS file. Once the bundle is compiled, any Kotlin code can be called from JavaScript. For example, to call a method from a specific Kotlin module:

import { add } from 'main'

const sum = add(1, 4)

Importing non-Kotlin files

You can require CSS files with:

runtime.wrapper.require("./App.css")

or any other kind of file (like SVG's) with:

var logo : string = runtime.wrapper.require("./logo.svg")

Help, Tips, and Tricks

My editor isn't autocompleting

In order to get all the benefits of the Kotlin tool-system, use the Intellij IDE with the Kotlin plugin.

Kotlin is awesome! Where can I learn more?

Checkout the Kotlin website: https://kotlinlang.org/ !

There's also Slack to come talk about Reason, and ask for help: https://slack.kotlinlang.org

Contributing

This project was conceived by Carey Janecka and was in large part inspired by the reason-scripts project. If you wish to contribute, please start by submitting an issue for documentation. If you have the requisite skills to tackle the problem, please fork this repository and submit a pull request.