Kotlin TodoMVC – full-stack Kotlin application demo

Last update: Oct 3, 2022

Overview

Kotlin full stack TodoMVC

This project is an example implementation of the TodoMVC app written in Kotlin. More specifically, it's the Kotlin port of the Vanilla JS version of TodoMVC (hence it doesn't use any JavaScript frameworks like Angular or React). The code intentionally follows closely the structure and conventions of the original, so you should be able to compare the two versions easily.

Note: I haven't implemented local storage yet. All items are stored in-memory for now.

Modules

The code is a full stack Kotlin example, so it consists of two modules: backend and frontend.

Backend

It is a very simple HTTP server serving requests on a single route (localhost:9000/). The response is an index page with minimal HTML DOM: html, head, empty body and a script tag referencing the compiled JavaScript app. It uses ktor, a web framework developed by JetBrains.

Frontend

All of the application logic is implemented in Kotlin and compiled to JavaScript with a tool called kotlinc-js. The app uses Gradle as a build tool and relies on the kotlin-frontend-plugin. This plugin takes care of a lot of things, so you don't have to interact with kotlinc-js directly. Once the page loaded and the docuemnt is ready, all HTML elements are rendered by JavaScript. For creating the DOM it uses kotlinx.html, a cross-platform library (works both on the JVM and in the browser) that provides a DSL for building/appending HTML elements in a type-safe manner.

Gradle kotlin-dsl

Being a full stack Kotlin example project, the build scripts are also written in Kotlin (build.gradle.kts). They are mostly in line with the ones from the reference kotlin-fullstack-sample.

Requirements

~~The kotlin-frontend-plugin is picky when it comes to version numbers and it's not really documented.~~

~~Make sure that you use the latest LTS version of Node.js (v6.11.2 as of writing) and the matching npm release (3.10.10).~~

As of kotlin-frontend-plugin version 0.0.20 you can use the latest node and npm versions.

How to run

First, you have to start the backend:

./gradlew backend:run

Note: ktor supports automatic reloading, which is configured in the project. This means that you don't have to restart the running application when you make changes, it's enough to recompile the files that you are editing. You have to run compile by hand though (e.g. from IntelliJ), Gradle doesn't pick up changes automatically for now.

Then you can run the frontend with:

./gradlew -t frontend:run

The kotlin-frontend-plugin will compile/assemble all resources into a module and start a webpack server running on: http://localhost:8080/.

As kotlin-frontend-plugin uses webpack under the hood Hot Module Replacement is available, so as you are editing the Kotlin code Gradle will automatically recompile changes and the plugin will replace modules in the background.

A demo project which demonstrates the work of javax.servlet.Filter capable of escaping / modifying / removing a part of JSON request based on specified criteria.

Replace Filter Demo A demo project which demonstrates the work of javax.servlet.Filter capable of escaping / modifying / removing a part of JSON reque

1 Jan 17, 2022

Kafka-hot-and-cold-retries - Demo project for elaborating how hot and cold retries can be applied in Kafka

Apache Kafka® - Hot and Cold Retries A demo project for elaborating how hot and

11 Jun 10, 2022

Comments

Error: webpack.optimize.UglifyJsPlugin has been removed

After i cloned this repo I started the backend and the frontend as shown in the README file:

$ ./gradlew backend:run
$ ./gradlew -t frontend:run

While the backend runs fine, the frontend raises an exception:

> Task :frontend:webpack-run 
webpack-dev-server exited with exit code 1, see /Users/mcpringle/GitHub/other/kotlin-todomvc/frontend/build/logs/webpack-dev-server.log
/Users/mcpringle/GitHub/other/kotlin-todomvc/frontend/build/node_modules/webpack/lib/webpack.js:162
                        throw new RemovedPluginError(errorMessage);
                        ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/mcpringle/GitHub/other/kotlin-todomvc/frontend/build/node_modules/webpack/lib/webpack.js:162:10)
    at Object.<anonymous> (/Users/mcpringle/GitHub/other/kotlin-todomvc/frontend/build/webpack.config.js:42:44)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/mcpringle/GitHub/other/kotlin-todomvc/frontend/build/webpack-dev-server-run.js:22:14)


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':frontend:webpack-run'.
> webpack-dev-server startup failed

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 5s
16 actionable tasks: 2 executed, 14 up-to-date

I run macOS High Sierra 10.13.3 and tried Java 8u152 and 9.0.4.

opened by McPringle 1