Kotlin - Koweb

Kobweb is an opinionated framework built on top of Compose HTML.

Introduction

Koweb includes everything you need to build rich, dynamic websites, as well as web applications, while being able to leverage the greater Kotlin ecosystem.

This means you get to use Compose - HTML (an elegant, reactive library which should be familiar to most Android developers) to declare your HTML structure while also leaning on the Kobweb framework for features like page routing, client/server communication, light/dark color mode support, and a modern widget set.

Getting Started

The first step for starting with Kobweb is to get the Kobweb binary. You can install it, download it, and/or build it, so we’ll include instructions for all these approaches.

When in doubt, we recommend installation via one of the package managers we support.

scoop bucket add java
scoop install java/openjdk

scoop bucket add varabyte https://github.com/varabyte/scoop-varabyte.git
scoop install varabyte/kobweb

In a terminal, run the following commands:

kobweb create app

You’ll be asked a few questions required for setting up your project.

You don’t need to create a root folder for your project ahead of time – the setup process will prompt you for one to create.

Notice that there’s no index.html or routing logic anywhere! Kobweb generate that for you automatically when you build your Kobweb project.

Run the default app site

cd project/site
kobweb run

This command spins up a web server at http://localhost:8080.

Kobweb Project

Exporting

One of Kobweb’s major additions on top of Compose HTML is the export process.

This feature elevates the framework from one that produces a single-page application to one that produces a whole, navigable site. The export process takes snapshots of every page, resulting in better SEO support and a quicker initial render.

A normal development workflow will have you using kobweb run to iterate on your site, and then when you’re ready to publish it, you’ll kobweb export a production version.

kobweb export --layout static

Once exported, you can test your site by running it locally before uploading. Y

ou run a static site with kobweb run --env prod --layout static

Deploying

A static site gets exported into .kobweb/site by default (you can configure this location in your .kobweb/conf.yaml file if you’d like). You can then upload the contents of that folder to the static web hosting provider of your choice.