Your first app#

This page takes you from nothing to a running Kyln app with live reload.

Scaffold#

Install the kyln CLI once, then use preheat to scaffold a new project from the webapp template:

bun add -g @kyln/cli
kyln preheat webapp my-app
cd my-app

preheat writes the project, installs dependencies, and leaves you with a complete full-stack app: file-based routes, a layout, a couple of components, services, and API endpoints. The webapp template is one of several project shapes; Scaffolding covers the others and when to reach for them.

Run#

Start the dev server:

bun run dev

Open http://localhost:2500. You'll see the starter app. The dev server watches src/ and reloads on change.

The shape of a project#

my-app/
├── kyln.config.ts        # server + router configuration
├── public/               # static assets, served as-is
└── src/
    ├── routes/           # pages; the filesystem is the router
    │   ├── _layout.ts    # wraps every page
    │   └── index.route.ts
    ├── components/       # reusable view pieces
    ├── services/         # injectable classes (data, auth, ...)
    └── api/              # JSON endpoints under /api

Make a change#

Open src/routes/index.route.ts. A route is a class that extends Route and returns markup from render():

import { Route, html } from "@kyln/core";

export default class Index extends Route {
  render() {
    return html`
      <div>
        <h1>Hello from Kyln</h1>
        <p>Edit src/routes/index.route.ts and save.</p>
      </div>
    `;
  }
}

Change the heading, save, and the browser updates without a full reload.

Add a page#

Create src/routes/about.route.ts:

import { Route, html } from "@kyln/core";

export default class About extends Route {
  render() {
    return html`<h1>About</h1>`;
  }
}

Visit http://localhost:2500/about. The file's location determined its URL, with no route table to register.

Scaffold individual files#

Once a project exists, make generates the boilerplate for a new component, service, or route:

kyln make route dashboard
kyln make component user-badge
kyln make service billing

Next#

Now that you have an app running, learn how the filesystem maps to URLs in Routing & layouts.