shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

added fallback route to server, created extensive setup instructions in docs

Browse Source
This commit is contained in:
dswbx
2024-12-24 16:01:42 +01:00
parent 8ef11aa382
commit 06125f1afe
20 changed files with 564 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/integration/astro.mdx
View File

@@ -45,12 +45,14 @@ export const ALL = serve({
connection: {
type: "libsql",
config: {
url: "file:data.db"
// location of your local Astro DB
// make sure to use a remote URL in production
url: "file:.astro/content.db"
}
}
});
```
For more information about the connection object, refer to the [Setup](/setup) guide. In the
For more information about the connection object, refer to the [Setup](/setup/introduction) guide. In the
special case of astro, you may also use your Astro DB credentials since it's also using LibSQL
under the hood. Refer to the [Astro DB documentation](https://docs.astro.build/en/guides/astro-db/) for more information.
@@ -73,7 +75,11 @@ export const prerender = false;
<body>
<Admin
withProvider={{ user }}
config={{ basepath: "/admin", color_scheme: "dark" }}
config={{
basepath: "/admin",
color_scheme: "dark",
logo_return_path: "/../"
}}
client:only
/>
</body>

2
docs/integration/bun.mdx
View File

@@ -27,7 +27,7 @@ serve({
}
});
```
For more information about the connection object, refer to the [Setup](/setup) guide.
For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
Run the application using Bun by executing:
```bash

43
docs/integration/cloudflare.mdx
View File

@@ -31,7 +31,7 @@ export default serve({
})
});
```
For more information about the connection object, refer to the [Setup](/setup) guide.
For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
Now run the worker:
```bash
@@ -64,8 +64,9 @@ export default serve({
}
}
}),
manifest,
setAdminHtml: true
}, manifest);
});
```
## Adding custom routes
@@ -87,8 +88,9 @@ export default serve({
onBuilt: async (app) => {
app.modules.server.get("/hello", (c) => c.json({ hello: "world" }));
},
manifest,
setAdminHtml: true
}, manifest);
});
```
## Using a different mode
@@ -109,11 +111,8 @@ mode`, like so:
import { serve } from "bknd/adapter/cloudflare";
export default serve({
app: (env: Env) => ({ /* ... */ }),
cloudflare: {
mode: "fresh"
// mode: "warm"
}
/* ... */,
mode: "fresh" // mode: "fresh" | "warm" | "cache" | "durable"
});
```
@@ -124,11 +123,9 @@ For the cache mode to work, you also need to specify the KV to be used. For this
import { serve } from "bknd/adapter/cloudflare";
export default serve({
app: (env: Env) => ({ /* ... */ }),
cloudflare: {
mode: "cache",
bindings: (env: Env) => ({ kv: env.KV })
}
/* ... */,
mode: "cache",
bindings: (env: Env) => ({ kv: env.KV })
});
```
@@ -140,12 +137,10 @@ import { serve, DurableBkndApp } from "bknd/adapter/cloudflare";
export { DurableBkndApp };
export default serve({
app: (env: Env) => ({ /* ... */ }),
cloudflare: {
mode: "durable",
bindings: (env: Env) => ({ dobj: env.DOBJ }),
keepAliveSeconds: 60 // optional
}
/* ... */,
mode: "durable",
bindings: (env: Env) => ({ dobj: env.DOBJ }),
keepAliveSeconds: 60 // optional
});
```
@@ -169,12 +164,10 @@ import type { App } from "bknd";
import { serve, DurableBkndApp } from "bknd/adapter/cloudflare";
export default serve({
app: (env: Env) => ({ /* ... */ }),
cloudflare: {
mode: "durable",
bindings: (env: Env) => ({ dobj: env.DOBJ }),
keepAliveSeconds: 60 // optional
}
/* ... */,
mode: "durable",
bindings: (env: Env) => ({ dobj: env.DOBJ }),
keepAliveSeconds: 60 // optional
});
export class CustomDurableBkndApp extends DurableBkndApp {

12
docs/integration/nextjs.mdx
View File

@@ -14,7 +14,7 @@ Install bknd as a dependency:
import { serve } from "bknd/adapter/nextjs";
export const config = {
runtime: "experimental-edge",
runtime: "experimental-edge", // or "edge", depending on your nextjs version
unstable_allowDynamic: ["**/*.js"]
};
@@ -28,12 +28,13 @@ export default serve({
}
});
```
For more information about the connection object, refer to the [Setup](/setup) guide.
For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
## Enabling the Admin UI
Create a file `[[...admin]].tsx` inside the `pages/admin` folder:
```tsx
// pages/admin/[[...admin]].tsx
import type { InferGetServerSidePropsType as InferProps } from "next";
import { withApi } from "bknd/adapter/nextjs";
import dynamic from "next/dynamic";
import "bknd/dist/styles.css";
@@ -50,9 +51,12 @@ export const getServerSideProps = withApi(async (context) => {
};
});
export default function AdminPage() {
export default function AdminPage({ user }: InferProps<typeof getServerSideProps>) {
if (typeof document === "undefined") return null;
return <Admin withProvider config={{ basepath: "/admin" }} />;
return <Admin
withProvider={{ user }}
config={{ basepath: "/admin", logo_return_path: "/../" }}
/>;
}
```

2
docs/integration/node.mdx
View File

@@ -29,7 +29,7 @@ const config = {
serve(config);
```
For more information about the connection object, refer to the [Setup](/setup) guide.
For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
Run the application using node by executing:
```bash

2
docs/integration/remix.mdx
View File

@@ -26,7 +26,7 @@ const handler = serve({
export const loader = handler;
export const action = handler;
```
For more information about the connection object, refer to the [Setup](/setup) guide.
For more information about the connection object, refer to the [Setup](/setup/introduction) guide.
Now make sure that you wrap your root layout with the `ClientProvider` so that all components
share the same context:

28
docs/mint.json
View File

@@ -61,7 +61,11 @@
"navigation": [
{
"group": "Getting Started",
"pages": ["introduction", "setup", "sdk", "react", "cli"]
"pages": ["introduction", "sdk", "react", "cli"]
},
{
"group": "Setup",
"pages": ["setup/introduction", "setup/database"]
},
{
"group": "Modules",
@@ -74,39 +78,17 @@
"modules/flows"
]
},
{
"group": "Configuration",
"pages": [
"config/overview",
"config/migration",
{
"group": "Modules",
"pages": [
"config/modules/overview",
"config/modules/server",
"config/modules/data",
"config/modules/auth",
"config/modules/flows",
"config/modules/media"
]
}
]
},
{
"group": "Integration",
"pages": [
"integration/extending",
"integration/hono",
"integration/nextjs",
"integration/remix",
"integration/cloudflare",
"integration/bun",
"integration/vite",
"integration/express",
"integration/astro",
"integration/node",
"integration/deno",
"integration/browser",
"integration/docker"
]
},

183
docs/setup/database.mdx Normal file
View File

@@ -0,0 +1,183 @@
---
title: 'Database'
description: 'Choosing the right database configuration'
---
In order to use **bknd**, you need to prepare access information to your database and install
the dependencies.
<Note>
Connections to the database are managed using Kysely. Therefore, all its dialects are
theoretically supported. However, only the `SQLite` dialect is implemented as of now.
</Note>
## Database
### SQLite as file
The easiest to get started is using SQLite as a file. When serving the API in the "Integrations",
the function accepts an object with connection details. To use a file, use the following:
```json
{
"type": "libsql",
"config": {
"url": "file:<path/to/your/database.db>"
}
}
```
Please note that using SQLite as a file is only supported in server environments.
### SQLite using LibSQL
Turso offers a SQLite-fork called LibSQL that runs a server around your SQLite database. To
point **bknd** to a local instance of LibSQL, [install Turso's CLI](https://docs.turso.tech/cli/introduction) and run the following command:
```bash
turso dev
```
The command will yield a URL. Use it in the connection object:
```json
{
"type": "libsql",
"config": {
"url": "http://localhost:8080"
}
}
```
### SQLite using LibSQL on Turso
If you want to use LibSQL on Turso, [sign up for a free account](https://turso.tech/), create a database and point your
connection object to your new database:
```json
{
"type": "libsql",
"config": {
"url": "libsql://your-database-url.turso.io",
"authToken": "your-auth-token"
}
}
```
### Custom Connection
<Note>
Follow the progress of custom connections on its [Github Issue](https://github.com/bknd-io/bknd/issues/24).
If you're interested, make sure to upvote so it can be prioritized.
</Note>
Any bknd app instantiation accepts as connection either `undefined`, a connection object like
described above, or an class instance that extends from `Connection`:
```ts
import { createApp } from "bknd";
import { Connection } from "bknd/data";
class CustomConnection extends Connection {
constructor() {
const kysely = new Kysely(/* ... */);
super(kysely);
}
}
const connection = new CustomConnection();
// e.g. and then, create an instance
const app = createApp({ connection })
```
## Initial Structure
To provide an initial database structure, you can pass `initialConfig` to the creation of an app. This will only be used if there isn't an existing configuration found in the database given. Here is a quick example:
```ts
import { em, entity, text, number } from "bknd/data";
const schema = em({
posts: entity("posts", {
// "id" is automatically added
title: text().required(),
slug: text().required(),
content: text(),
views: number()
}),
comments: entity("comments", {
content: text()
})
// relations and indices are defined separately.
// the first argument are the helper functions, the second the entities.
}, ({ relation, index }, { posts, comments }) => {
relation(comments).manyToOne(posts);
// relation as well as index can be chained!
index(posts).on(["title"]).on(["slug"], true);
});
// to get a type from your schema, use:
type Database = (typeof schema)["DB"];
// type Database = {
// posts: {
// id: number;
// title: string;
// content: string;
// views: number;
// },
// comments: {
// id: number;
// content: string;
// }
// }
// pass the schema to the app
const app = createApp({
connection: { /* ... */ },
initialConfig: {
data: schema.toJSON()
}
});
```
Note that we didn't add relational fields directly to the entity, but instead defined them afterwards. That is because the relations are managed outside the entity scope to have an unified expierence for all kinds of relations (e.g. many-to-many).
<Note>
Defined relations are currently not part of the produced types for the structure. We're working on that, but in the meantime, you can define them manually.
</Note>
### Type completion
All entity related functions use the types defined in `DB` from `bknd/core`. To get type completion, you can extend that interface with your own schema:
```ts
import { em } from "bknd/data";
import { Api } from "bknd";
// const schema = em({ ... });
type Database = (typeof schema)["DB"];
declare module "bknd/core" {
interface DB extends Database {}
}
const api = new Api({ /* ... */ });
const { data: posts } = await api.data.readMany("posts", {})
// `posts` is now typed as Database["posts"]
```
The type completion is available for the API as well as all provided [React hooks](/react).
### Seeding the database
To seed your database with initial data, you can pass a `seed` function to the configuration. It
provides the `ModuleBuildContext` ([reference](/setup/introduction#modulebuildcontext)) as the first argument.
Note that the seed function will only be executed on app's first boot. If a configuration
already exists in the database, it will not be executed.
```ts
import { createApp, type ModuleBuildContext } from "bknd";
const app = createApp({
connection: { /* ... */ },
initialConfig: { /* ... */ },
options: {
seed: async (ctx: ModuleBuildContext) => {
await ctx.em.mutator("posts").insertMany([
{ title: "First post", slug: "first-post", content: "..." },
{ title: "Second post", slug: "second-post" }
]);
}
}
});
```

205
docs/setup/introduction.mdx Normal file
View File

@@ -0,0 +1,205 @@
---
title: 'Introduction'
description: 'Setting up bknd'
---
There are several methods to get **bknd** up and running. You can choose between these options:
1. [Run it using the CLI](/cli): That's the easiest and fastest way to get started.
2. Use a runtime like [Node](/integration/node), [Bun](/integration/bun) or
[Cloudflare](/integration/cloudflare) (workerd). This will run the API and UI in the runtime's
native server and serves the UI assets statically from `node_modules`.
3. Run it inside your React framework of choice like [Next.js](/integration/nextjs),
[Astro](/integration/astro) or [Remix](/integration/remix).
There is also a fourth option, which is running it inside a
[Docker container](/integration/docker). This is essentially a wrapper around the CLI.
## Basic setup
Regardless of the method you choose, at the end all adapters come down to the actual
instantiation of the `App`, which in raw looks like this:
```ts
import { createApp, type CreateAppConfig } from "bknd";
// create the app
const config = { /* ... */ } satisfies CreateAppConfig;
const app = createApp(config);
// build the app
await app.build();
// export for Web API compliant envs
export default app;
```
In Web API compliant environments, all you have to do is to default exporting the app, as it
implements the `Fetch` API.
## Configuration (`CreateAppConfig`)
The `CreateAppConfig` type is the main configuration object for the `createApp` function. It has
the following properties:
```ts
import type { Connection } from "bknd/data";
import type { Config } from "@libsql/client";
type AppPlugin = (app: App) => Promise<void> | void;
type LibSqlCredentials = Config;
type CreateAppConfig = {
connection?:
| Connection
| {
type: "libsql";
config: LibSqlCredentials;
};
initialConfig?: InitialModuleConfigs;
plugins?: AppPlugin[];
options?: {
basePath?: string;
trustFetched?: boolean;
onFirstBoot?: () => Promise<void>;
seed?: (ctx: ModuleBuildContext) => Promise<void>;
};
};
```
### `connection`
The `connection` property is the main connection object to the database. It can be either an
object with a type specifier (only `libsql` is supported at the moment) and the actual
`Connection` class. The `libsql` connection object looks like this:
```ts
const connection = {
type: "libsql",
config: {
url: string;
authToken?: string;
};
}
```
Alternatively, you can pass an instance of a `Connection` class directly,
see [Custom Connection](/setup/database#custom-connection) as a reference.
If the connection object is omitted, the app will try to use an in-memory database.
### `initialConfig`
As initial configuration, you can either pass a partial configuration object or a complete one
with a version number. The version number is used to automatically migrate the configuration up
to the latest version upon boot. The default configuration looks like this:
```json
{
"server": {
"admin": {
"basepath": "",
"color_scheme": "light",
"logo_return_path": "/"
},
"cors": {
"origin": "*",
"allow_methods": ["GET", "POST", "PATCH", "PUT", "DELETE" ],
"allow_headers": ["Content-Type", "Content-Length", "Authorization", "Accept"]
}
},
"data": {
"basepath": "/api/data",
"entities": {},
"relations": {},
"indices": {}
},
"auth": {
"enabled": false,
"basepath": "/api/auth",
"entity_name": "users",
"allow_register": true,
"jwt": {
"secret": "",
"alg": "HS256",
"fields": ["id", "email", "role"]
},
"cookie": {
"path": "/",
"sameSite": "lax",
"secure": true,
"httpOnly": true,
"expires": 604800,
"renew": true,
"pathSuccess": "/",
"pathLoggedOut": "/"
},
"strategies": {
"password": {
"type": "password",
"config": {
"hashing": "sha256"
}
}
},
"roles": {}
},
"media": {
"enabled": false,
"basepath": "/api/media",
"entity_name": "media",
"storage": {}
},
"flows": {
"basepath": "/api/flows",
"flows": {}
}
}
```
You can use the CLI to get the default configuration:
```sh
npx bknd config --pretty
```
To validate your configuration against a JSON schema, you can also dump the schema using the CLI:
```sh
npx bknd schema
```
To create an initial data structure, you can use helpers [described here](/setup/database#initial-structure).
### `plugins`
The `plugins` property is an array of functions that are called after the app has been built,
but before its event is emitted. This is useful for adding custom routes or other functionality.
A simple plugin that adds a custom route looks like this:
```ts
export const myPlugin: AppPlugin = (app) => {
app.server.get("/hello", (c) => c.json({ hello: "world" }));
};
```
Since each plugin has full access to the `app` instance, it can add routes, modify the database
structure, add custom middlewares, respond to or add events, etc. Plugins are very powerful, so
make sure to only run trusted ones.
### `options`
This object is passed to the `ModuleManager` which is responsible for:
- validating and maintaining configuration of all modules
- building all modules (data, auth, media, flows)
- maintaining the `ModuleBuildContext` used by the modules
The `options` object has the following properties:
- `basePath` (`string`): The base path for the Hono instance. This is used to prefix all routes.
- `trustFetched` (`boolean`): If set to `true`, the app will not perform any validity checks for
the given or fetched configuration.
- `onFirstBoot` (`() => Promise<void>`): A function that is called when the app is booted for
the first time.
- `seed` (`(ctx: ModuleBuildContext) => Promise<void>`): A function that is called when the app is
booted for the first time and an initial partial configuration is provided.
## `ModuleBuildContext`
```ts
type ModuleBuildContext = {
connection: Connection;
server: Hono;
em: EntityManager;
emgr: EventManager;
guard: Guard;
};
```