kotlin / kotlin-fullstack-sample

Kotlin Full-stack Application Example

Warning

This sample uses plugins, which will be deprecated. There is a new repository with actual Kotlin version and Kotlin/JS Gradle plugin.

Thinkter: A Kotlin Full-stack Application Example

Thinkter is an example of a full-stack Web application built with Kotlin. The backend runs on the JVM, and the browser front-end uses React. The example implements a very simple microblogging application.

Backend

The backend of Thinkter is built using Ktor, a Web framework built by the Kotlin team. For data persistence, it uses H2, allowing you to run the example without the need to configure an external SQL server. The HTTP server implementation is provided by Jetty.

To run the backend, use ./gradlew backend:run, or open Thinkter as a project in IntelliJ IDEA and execute the shared run configuration Backend :: Jetty. This will start serving the REST API of the backend on port 9090.

Frontend

The frontend of Thinkter is built using React. To adapt the React APIs to Kotlin, it incorporates a set of wrappers, which you can also use in your projects and adapt to your needs.

The project is built using webpack and the Kotlin frontend plugin.

To run the frontend, use ./gradlew frontend:run. This will start a webpack server on port 8080. Navigate to http://localhost:8080 to start using the application.

kotlin-fullstack-sample's Issues

Cannot run sample

I cloned the repo and ran both services (./gradlew backend:run and ./gradlew frontend:run)

Both servers start successfully but it seems the backend is unable to load the resource : /frontend/frontend.bundle.js

22:26:40.615 [ktor-pool-1-thread-1] TRACE Thinkter - Unhandled: GET - /frontend/frontend.bundle.js

kotlin 1.1.4 crap

Compiler from kotlin 1.1.4 generates crap like ReactBuilder$invoke.f which later in browser cannot be resolved.

Add example of a functional component

In React, we have functional components that look like this:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

It would be nice to include one of those (in Kotlin of course) in this kotlin-fullstack-sample

custom header fields not coming thru via fetch when NO_CORS set

https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/demo/thinkter/Rpc.kt#L101

if you also add:

override var mode: RequestMode? = RequestMode.Companion.NO_CORS

and then If you add some custom header to line 101 like:

override var headers: dynamic = json("Accept" to "application/json", "Anything" to "blah")

they do not come thru. I need "Anything" to be in the headers with value "blah" but something is limiting the headers to just certain keys.

Need update and a guide to run this project on idea

This is a very great project for pepole want to use kotlin to develop frontend and backend, but two major problem must be sloved to satisfy those pepole:

1. update this project to working with ktor 0.9
2. a guide to how to config this to run on idea

Thanks for the open source effort again, learn so much

Plz help non-Intellj experts open, run, and investigate this project

This is a poster child for Kotlin webserver development. So, you want us as quickly as possible be able to compile, run and investigate the two projects. I expect to be able do proper find-usage etc in both frontend and backend project. However, I can only get the gradle compilation working. Inside Intellj, it just says I need to select the right JDK in yet another place :-)

After a while, I manage with a lot of trial and error go to the Rpc.kt and do find usage of the login function. Nice!

Next step is to check if the static typing really works.

Is there a video, or article somewhere that describes how to use Intellj in the best way to develop an application like this?

Add example of sharing code between both frontend and backend

Add some common module, or common code somewhere, that both frontend and backend has a dependency on.

I have read these two discussions:
https://discuss.kotlinlang.org/t/kotlin-to-javascript-and-kotlin-to-jvm-servlets-in-one-project/2600
https://discuss.kotlinlang.org/t/compiling-kotlin-to-both-java-and-javascript-from-the-same-module/1944

The second one contained a link to a project which modifies the main.kotlin.srcDirs by adding project(':').file('src/main/kotlin'), this however lead me to an issue with compiler errors in IntelliJ, which can be seen here: C06A/KUrlet#1

So a clear example of how to actually share code between JS and JVM is appreciated.

How would we use 3rd party ReactJS components?

I'm wondering how 3rd party ReactJS component libraries, such as Semantic-UI-React might be integrated into a project using your React wrappers code?

I'm new to both Kotlin and ReactJS (I'm a Java dev, so I can work my way round a Gradle build script).

I'm aware of both Kotlin's @native and the possibility of transpiling TypeScript definitions to Kotlin (using the 'ts2kt' tool), but, basically, I'd like your thoughts on how best to accomplish such an integration.

JFYI, I dread dynamic typing and using yet ANOTHER Editor for coding, I like the idea of sticking to Intellij/Android Studio for the majority of my development, so all hail Kotlin!

ReactExtensions.kt needs more work for componentDidUpdate

https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/react/ReactExtensions.kt

error is: 'componentDidUpdate' overrides nothing

where componentWillMount works fine.

unable to start forntend

When running:
./gradlew frontend:run
I got this error:
webpack-dev-server exited with exit code 1,
...
.../kotlin-fullstack-sample/frontend/build/node_modules/webpack/lib/webpack.js:7
const Compiler = require("./Compiler");
^^^^^
SyntaxError: Use of const in strict mode.

Any help will be appreciated.

This repositiory needs documentation

The code is not commented and for someone not versed in React or node this seems puzzling. I think that some explanation in the code would help a lot.

Add instructions on how to open this project in intellij

This may sound like a stupid question, but it is not obvious how to open this project in intellij. Do we use "Import Project" or "Open".

If I choose open, I'm prompted to import gradle project. Then it asks:

Please select the modules/data to include in the project. If you accept the default (all of them) you are then prompted to remove something from the project:

Should it be this complex to open a project in IntelliJ?

XSS vulnerability

Project missing input sanitizers.

Example:
Simply adding a <img src=x onerror=alert(1) /> as a new "thought" will trigger an XSS:

webpack-bundle runs infinitely long

$ ./gradlew build 
Starting a Gradle Daemon (subsequent builds will be faster)
<==========---> 78% EXECUTING [94h 23m 48s]
> :frontend:webpack-bundle

Should I wait a little bit more? =)

Please remove or update this repository

It is very frustrating to get started with Kotlin MPP because there are many out of date samples that just do not work at all.

how to upgrade to EAP 1.1.4

between this file https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/build.gradle and https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/build.gradle there are 12 versions:

1. ext.kotlin_version
2. kotlin-gradle-plugin
3. kotlin-frontend-plugin
4. html_version
5. ktor_version
6. squash_version
7. kotlin-stdlib-js
8. kotlin-test-js
9. kotlinx-html-js
10. kotlinx-html-js (replaceVersion)
11. kotlinx-html-shared (replaceVersion)
12. kotlin-js-library (replaceVersion)

I'm trying to update to EAP 1.1.4 but it's very confusing which versions to update and get it to still build. Can anyone make a PR with this fullstack sample using the latest and greatest version?

How to use local styles?

In react we go like this:

const s = { color:"red" }
<div style={s} >Hello</div>

How to do the equivalent in Kotlin React?

Build stuck at npm-install

Hi

npm-install takes a very long time:

$> ./gradlew build
<====---------> 34% EXECUTING [2m 04s]
> :frontend:npm-install

And finally fails and says the error is loged at ~/.npm/_logs/blabla_debug.log which contains:

error path ~/kotlin-fullstack-sample/frontend/build/node_modules/.staging/babel-runtime-1f1cbe22/package.json
error code ENOENT                                                                  
error errno -2                                                                     
error syscall open                                                                 
error enoent ENOENT: no such file or directory, open '~/kotlin-fullstack-sample/frontend/build/node_modules/.staging/babel-runtime-1f1cbe22/package.json'
error enoent This is most likely not a problem with npm itself                     
error enoent and is related to npm not being able to find a file.                  
verbose exit [ -2, true ]

Any ideas?

Duplication of package org.jetbrains.demo.thinkter.model

The classes in the multi-platform package org.jetbrains.demo.thinkter.model are duplicated between backend and frontend (except PollResponse which is missing from frontend).

I suspect a full solution for this requires https://youtrack.jetbrains.com/issue/KT-6359 but see also https://github.com/jstuyts/kotlin-multiplatform-recipes

Outdated Kotlin Runtime

I'm having annoying warning in my IntelliJ Idea:

Outdated Kotlin Runtime
Your version of Kotlin runtime in 'Gradle: org.jetbrains.kotlin:kotlin-runtime:1.1.0' library is 1.1.0, while plugin version is 1.1.51-release-IJ2017.2-1.
Runtime library should be updated to avoid compatibility problems.

Where I having issue? I don't understand...

This is my gradle files:

group = 'org.jetbrains.demo.thinkter'
version = '0.0.1-SNAPSHOT'

subprojects { p ->
    p.buildscript {
        ext.kotlin_version = "1.1.51"

        repositories {
            mavenLocal()
            jcenter()
            maven { url "http://dl.bintray.com/kotlin/kotlin-eap" }
        }
        
        dependencies {
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
            classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:0.0.23"
        }
    }
}

subprojects {
    ext.kotlin_version = "1.1.51"
    ext.html_version = "0.6.4"
    ext.ktor_version = "0.3.0"
    ext.squash_version = "0.2.2"

    repositories {
        mavenLocal()
        jcenter()
        maven { url "http://dl.bintray.com/kotlin/kotlinx.html" }
        maven { url "http://dl.bintray.com/kotlin/ktor" }
        maven { url "https://dl.bintray.com/kotlin/squash" }
    }
}

group = 'org.jetbrains.demo.thinkter'
version = '0.0.1-SNAPSHOT'

apply plugin: 'kotlin'
apply plugin: 'application'

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    compile "org.jetbrains.kotlin:kotlin-reflect:$kotlin_version"

    compile "org.jetbrains.ktor:ktor-locations:$ktor_version"
    compile "org.jetbrains.ktor:ktor-html-builder:$ktor_version"
    compile "org.ehcache:ehcache:3.0.0.m4"

    compile "org.jetbrains.squash:squash-h2:$squash_version"

    testCompile("org.jetbrains.kotlin:kotlin-test-junit:$kotlin_version")
    testCompile "org.jetbrains.ktor:ktor-test-host:$ktor_version"
    testCompile "org.jsoup:jsoup:1.9.1"

    compile "org.jetbrains.ktor:ktor-jetty:$ktor_version"
    compile group: 'com.google.code.gson', name: 'gson', version: '2.8.0'
}

sourceSets {
    main.java.srcDirs += "src"
    main.resources.srcDirs += "resources"
    main.kotlin.srcDirs += "src"
    test.java.srcDirs += "test"
    test.kotlin.srcDirs += "test"
    test.resources.srcDirs += "testResources"
}

compileKotlin {
    kotlinOptions.jvmTarget = "1.8"
}

kotlin {
    experimental {
        coroutines "enable"
    }
}

mainClassName = 'org.jetbrains.ktor.jetty.DevelopmentHost'

group = 'org.jetbrains.elemental'
version = '0.0.1-SNAPSHOT'

apply plugin: 'kotlin2js'
apply plugin: 'kotlin-dce-js'
apply plugin: 'org.jetbrains.kotlin.frontend'

repositories {
    jcenter()
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
    compile("org.jetbrains.kotlinx:kotlinx-html-js:$html_version")
}

kotlinFrontend {
// uncomment this to specify exact nodejs version (bundle will be downloaded)
//    downloadNodeJsVersion = "8.7.0"

    sourceMaps = false

    npm {
        replaceVersion("kotlinx-html-js", "1.1.51")
        replaceVersion("kotlinx-html-shared", "1.1.51")
        replaceVersion("kotlin-js-library", "1.1.51")

        dependency("react")
        dependency("react-dom")
        dependency("react-router")
        dependency("jquery")
        dependency("react-markdown")

        devDependency("css-loader")
        devDependency("style-loader")
        devDependency("babel-loader")
        devDependency("babel-core")
        devDependency("karma")
    }

    webpackBundle {
        publicPath = "/frontend/"
        port = 8080
        proxyUrl = "http://localhost:9090"
    }
}

compileKotlin2Js {
    kotlinOptions.metaInfo = true
    kotlinOptions.outputFile = "$project.buildDir.path/js/${project.name}.js"
    kotlinOptions.sourceMap = true
    kotlinOptions.moduleKind = 'commonjs'
    kotlinOptions.main = "call"
}

sourceSets {
    main {
        kotlin.srcDirs += "src"
        resources.srcDirs += "resources"
        output.resourcesDir = "build/js/resources"
    }
    test {
        kotlin.srcDirs += "test"
        resources.srcDirs += "testResources"
    }
}

kotlin {
    experimental {
        coroutines "enable"
    }
}

Not able to load source map

Cannot find resource with the requested URI: /frontend/kotlinx-html-js.js.map

ktor 0.9.0

This is good and very useful example, may be update it to ktor 0.9.0?

Commit ab03c835d1fcb2e13b896f54797e9007ed3de838 broke frontend compilation (previous commit works fine)

✘-1 ~/Downloads/kotlin-fullstack-sample [master|✚ 1…5]
18:54 $ ./gradlew frontend:run
:frontend:npm-preunpack UP-TO-DATE
:frontend:npm-configure UP-TO-DATE
:frontend:npm-install
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'frontend'
npm ERR! notarget

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alex/.npm/_logs/2017-06-12T16_54_58_426Z-debug.log
:frontend:npm-install FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':frontend:npm-install'.

npm install failed (exit code = 1)

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 5.496 secs

how to reference a div inside ReactDOMBuilder.render()

I've been converting this code:

https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/demo/thinkter/HomeView.kt

to my own needs and got to a point where inside the render method I need to do:

val div = document.getElementById("map")
kotlinGoogleMap(div)

this comes from https://blog.frankel.ch/kotlin-front-end-developers/ so the actual line I'm trying to call is line 33 here https://github.com/nfrankel/kotlin-frontend/blob/master/src/script.kt#L33

Is there a good way to do this from my HomeView.kt render method?