kotlin-typescript-websocket-api

A demonstration of a tight WebSocket integration between a React Typescript frontend and a Kotlin backend

Diagram describing how the system works

Installation

First, ensure you have modern Java, Maven, and npm installed (tested with Java 18, Maven 3.5, and npm 8.18.0).

  1. mvn package to build the TypeScript client
  2. cd frontend && npm install to pull frontend dependencies (React and TypeScript)
  3. npm run build to generate the CSS and JS, or npm run watch to monitor for changes
  4. Run the server in your IDE, or at the command line: mvn compile exec:java -Dexec.mainClass="com.malcolmcrum.typescriptwebsocketapi.demo.ServerKt"
  5. Visit http://localhost:8080 in multiple tabs to demonstrate the chat app.

Modifying the interface

After adding an additional method to ChatApi.kt or ChatEvents.kt, you can use these immediately in your Kotlin code, and after running mvn package you can see the updated target/ts/websocket-services.ts code and use the calls from your frontend.

Technology used

The backend is written in Kotlin with the lovely to use Javalin web framework to handle WebSockets. Pebble renders our TypeScript client from a twig template, and typescript-generator turns our Kotlin data classes into TypeScript interfaces.

The frontend is written in TypeScript with React, using esbuild to transpile JS and Tailwind for CSS.

GitHub

View Github