bknd/docs/content/docs/(documentation)/start.mdx

---
title: Introduction
icon: Album
tags: ["documentation"]
---

import { Icon } from "@iconify/react";
import { examples } from "@/app/_components/StackBlitz";
import { SquareMousePointer, Code, Blend, Rocket } from 'lucide-react';

## bknd is a lightweight batteries-included backend that embeds into your frontend app

<Callout type="warning" title="We are in beta">
  We're making great progress towards v1, but don't recommend production use yet.
  Follow along for updates on [GitHub Releases](https://github.com/bknd-io/bknd/releases) and in our [Discord community](https://discord.gg/952SFk8Tb8)
</Callout>

bknd includes full REST APIs, an admin dashboard, auth, media uploads, a [type-safe SDK](/usage/sdk), [React hooks](/usage/react), and plugins to extend it. Host it with your SSR app or as a standalone service. Built on Web Standards, it runs anywhere JavaScript runs.

Bring your [favorite frontend](./#start-with-a-frameworkruntime) and [favorite SQL database](./#use-your-favorite-sql-database), and we'll bring the ~~backend~~ bknd.

<Cards>
  <Card
    href="/motivation"
    title="Learn about why we built bknd"
    icon={<Rocket />}
  >
    Why another backend system?
  </Card>
</Cards>

## Quickstart

<Callout type="info" title="This demo bknd instance is for playing and learning">
Don't worry about messing anything up in this stage since you're learning the ropes of bknd. If you want to start over, please delete the generated `data.db` database file and follow this tutorial again.
</Callout>

Spin up a bknd instance via the [bknd CLI](/usage/cli):

<Tabs groupId='package-manager' persist items={[ 'npm','bun' ]}>

```bash tab="npm"
npx bknd run
```

```bash tab="bun"
bunx bknd run
```

</Tabs>

This creates a local `data.db` SQLite database and starts the bknd web server at http://localhost:1337.

By default, the admin dashboard is open and not guarded. This is intentional — bknd uses an opt-in philosophy to allow quick prototyping. Let's enable authentication and guard the dashboard to secure it.

1. Visit http://localhost:1337/auth/settings. Toggle "Authentication Enabled" to enable auth. Select "Update" to save.
2. Visit http://localhost:1337/data/entity/users. Create a user by selecting "New User" and entering an email and password.
3. Visit http://localhost:1337/auth/roles. Create an admin role by selecting "Create new". Name it "Admin" and select "Create". Then, scroll to the bottom of the page and enable "Implicit allow missing permissions?". Select "Update" to save.
4. Visit http://localhost:1337/data/entity/users. Select on your newly created user, select the "Admin" role, and select "Update".
5. It's time to guard your admin dashboard. Visit http://localhost:1337/settings/auth. Select "Edit". Scroll to "Guard" and enable it. Then, select "Save". _(This should log you out!)_
6. Now, log in to your secured admin dashboard at http://localhost:1337/auth/login.

You did it! You've started the bknd server, created an admin user, and protected your app by enabling the guard.

## Modes

What you just experienced is **UI-only mode** — bknd's data and configuration is managed entirely via the admin dashboard. But that's not the only way to use bknd:

<Cards className="grid-cols-3">
  <Card title="UI-only" href="/usage/setup#ui-only-mode" icon={<SquareMousePointer className="text-fd-primary !size-6" />}>
     Configure your backend and manage your data visually with the built-in Admin UI.
  </Card>
  <Card title="Code-only" href="/usage/setup#code-only-mode" icon={<Code className="text-fd-primary !size-6" />}>
    Configure your backend programmatically with a Drizzle-like API, manage your data with the Admin UI.
  </Card>
  <Card title="Hybrid" href="/usage/setup#hybrid-mode" icon={<Blend className="text-fd-primary !size-6" />}>
    Configure your backend visually while in development, use a read-only configuration in production.
  </Card>
</Cards>

Learn more about each mode and the underlying configuration in [Setup & Modes](/usage/setup).

## Try bknd in the browser

<Card className="p-0 pb-1">
  <StackBlitz path="github/bknd-io/bknd-demo" initialPath="/" />
  <Accordions className="m-1">
    <Accordion title="What's going on?">
      The example shown is starting a [node server](/integration/node) using an [in-memory database](/usage/database#sqlite-in-memory). To ensure there are a few entities defined, it is using an [initial structure](/usage/database#initial-structure) using the prototype methods. Furthermore it uses the [seed option](/usage/database#seeding-the-database) to seed some data in the structure created.

      To ensure there are users defined on first boot, it hooks into the `App.Events.AppFirstBoot` event to create them (documentation pending).

    </Accordion>
  </Accordions>
</Card>

## Start with a Framework/Runtime

Pick your framework or runtime to get started.

<Cards>
  <Card icon={<Icon icon="tabler:brand-nextjs" className="text-fd-primary !size-6" />} title="NextJS" href="/integration/nextjs" />

<Card
  icon={
    <Icon icon="simple-icons:reactrouter" className="text-fd-primary !size-6" />
  }
  title="React Router"
  href="/integration/react-router"
/>

<Card
  icon={<Icon icon="simple-icons:astro" className="text-fd-primary !size-6" />}
  title="Astro"
  href="/integration/astro"
/>

<Card
  icon={<Icon icon="tabler:brand-nodejs" className="text-fd-primary !size-6" />}
  title="NodeJS"
  href="/integration/node"
/>

<Card
  icon={
    <Icon
      icon="devicon-plain:cloudflareworkers"
      className="text-fd-primary !size-6"
    />
  }
  title="Cloudflare"
  href="/integration/cloudflare"
/>

<Card
  icon={<Icon icon="simple-icons:bun" className="text-fd-primary !size-6" />}
  title="Bun"
  href="/integration/bun"
/>

<Card
  icon={<Icon icon="simple-icons:deno" className="text-fd-primary !size-6" />}
  title="Deno"
  href="/integration/deno"
/>

<Card
  icon={<Icon icon="simple-icons:svelte" className="text-fd-primary !size-6" />}
  title="SvelteKit"
  href="/integration/sveltekit"
/>

<Card
  icon={<Icon icon="tabler:lambda" className="text-fd-primary !size-6" />}
  title="AWS Lambda"
  href="/integration/aws"
/>

<Card
  icon={<Icon icon="simple-icons:vite" className="text-fd-primary !size-6" />}
  title="Vite"
  href="/integration/vite"
/>

<Card
  icon={
    <Icon
      icon="streamline-logos:docker-logo-solid"
      className="text-fd-primary !size-6"
    />
  }
  title="Docker"
  href="/integration/docker"
/>

  <Card title="Yours missing?" href="https://github.com/bknd-io/bknd/issues/new">
     Create a new issue to request a guide for your runtime or framework.
  </Card>
</Cards>

## Use your favorite SQL Database

The following databases are currently supported. Request a new integration if your favorite is missing.

<Cards>
  <Card icon={<Icon icon="simple-icons:sqlite" className="text-fd-primary !size-6" />} title="SQLite" href="/usage/database#database" />

<Card
  icon={<Icon icon="simple-icons:turso" className="text-fd-primary !size-6" />}
  title="Turso/LibSQL"
  href="/usage/database#sqlite-using-libsql-on-turso"
/>

<Card
  icon={
    <Icon icon="lineicons:postgresql" className="text-fd-primary !size-6" />
  }
  title="PostgreSQL"
  href="/usage/database#postgresql"
/>

<Card
  icon={
    <Icon
      icon="streamline-plump:database"
      className="text-fd-primary !size-6"
    />
  }
  title="Cloudflare D1"
  href="/usage/database#cloudflare-d1"
/>

  <Card title="Yours missing?" href="https://github.com/bknd-io/bknd/issues/new">
    Create a new issue to request a new database integration.
  </Card>
</Cards>