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

replaced remix with react-router

Browse Source
This commit is contained in:
dswbx
2025-03-14 15:32:43 +01:00
parent b3a0ecbe6d
commit b763826754
49 changed files with 562 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/integration/introduction.mdx
View File

@@ -3,7 +3,7 @@ title: 'Introduction'
description: 'Integrate bknd into your runtime/framework of choice'
---
import { cloudflare, nextjs, remix, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
import { cloudflare, nextjs, reactRouter, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
## Start with a Framework
bknd seamlessly integrates with popular frameworks, allowing you to use what you're already familar with. The following guides will help you get started with your framework of choice.
@@ -15,9 +15,9 @@ bknd seamlessly integrates with popular frameworks, allowing you to use what you
href="/integration/nextjs"
/>
<Card
title="Remix"
icon={<div className="text-primary-light">{remix}</div>}
href="/integration/remix"
title="React Router"
icon={<div className="text-primary-light">{reactRouter}</div>}
href="/integration/react-router"
/>
<Card
title="Astro"

129
docs/integration/react-router.mdx Normal file
View File

@@ -0,0 +1,129 @@
---
title: 'React Router'
description: 'Run bknd inside React Router'
---
import InstallBknd from '/snippets/install-bknd.mdx';
## Installation
To get started with React Router and bknd you can either install the package manually, and follow the descriptions below, or use the CLI starter:
<Tabs>
<Tab title="CLI Starter">
Create a new React Router CLI starter project by running the following command:
```sh
npx bknd create -i react-router
```
</Tab>
<Tab title="Manual">
Create a new React Router project by following the [official guide](https://reactrouter.com/start/framework/installation), and then install bknd as a dependency:
<InstallBknd />
</Tab>
</Tabs>
## Serve the API
Create a helper file to instantiate the bknd instance and retrieve the API:
```ts app/bknd.ts
import { type ReactRouterBkndConfig, getApp as getBkndApp } from "bknd/adapter/react-router";
const config = {
connection: {
url: "file:data.db"
}
} as const satisfies ReactRouterBkndConfig;
export async function getApp(args?: { request: Request }) {
return await getBkndApp(config, args);
}
export async function getApi(
args?: { request: Request },
opts?: { verify?: boolean }
) {
const app = await getApp();
if (opts?.verify) {
const api = app.getApi({ headers: args?.request.headers });
await api.verifyAuth();
return api;
}
return app.getApi();
}
```
For more information about the connection object, refer to the [Database](/usage/database) guide.
Create a new api splat route file at `app/routes/api.$.ts`:
```ts app/routes/api.$.ts
import { getApp } from "~/bknd";
const handler = async (args: { request: Request }) => {
const app = await getApp(args);
return app.fetch(args.request);
};
export const loader = handler;
export const action = handler;
```
## Enabling the Admin UI
Create a new splat route file at `app/routes/admin.$.tsx`:
```tsx app/routes/admin.$.tsx
import { lazy, Suspense, useSyncExternalStore } from "react";
import { type LoaderFunctionArgs, useLoaderData } from "react-router";
import { getApi } from "~/bknd";
const Admin = lazy(() => import("bknd/ui").then((mod) => ({ default: mod.Admin })));
import "bknd/dist/styles.css";
export const loader = async (args: LoaderFunctionArgs) => {
const api = await getApi(args, { verify: true });
return {
user: api.getUser(),
};
};
export default function AdminPage() {
const { user } = useLoaderData<typeof loader>();
// derived from https://github.com/sergiodxa/remix-utils
// @ts-ignore
const hydrated = useSyncExternalStore(() => {}, () => true, () => false);
if (!hydrated) return null;
return (
<Suspense>
<Admin withProvider={{ user }} config={{ basepath: "/admin", logo_return_path: "/../" }} />
</Suspense>
);
}
```
## Example usage of the API
You can use the `getApi` helper function we've already set up to fetch and mutate:
```tsx app/routes/_index.tsx
import { useLoaderData, type LoaderFunctionArgs } from "react-router";
import { getApi } from "~/bknd";
export const loader = async (args: LoaderFunctionArgs) => {
// use authentication from request
const api = await getApi(args, { verify: true });
const { data } = await api.data.readMany("todos");
return { data, user: api.getUser() };
};
export default function Index() {
const { data, user } = useLoaderData<typeof loader>();
return (
<div>
<h1>Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
<h1>User</h1>
<pre>{JSON.stringify(user, null, 2)}</pre>
</div>
);
}
```

140
docs/integration/remix.mdx
View File

@@ -1,140 +0,0 @@
---
title: 'Remix'
description: 'Run bknd inside Remix'
---
import InstallBknd from '/snippets/install-bknd.mdx';
## Installation
To get started with Remix and bknd you can either install the package manually, and follow the descriptions below, or use the CLI starter:
<Tabs>
<Tab title="CLI Starter">
Create a new Remix CLI starter project by running the following command:
```sh
npx bknd create -i remix
```
</Tab>
<Tab title="Manual">
Create a new Remix project by following the [official guide](https://remix.run/docs/en/main/other-api/create-remix), and then install bknd as a dependency:
<InstallBknd />
</Tab>
</Tabs>
## Serve the API
Create a helper file to instantiate the bknd instance and retrieve the API:
```ts app/bknd.ts
import { type RemixBkndConfig, getApp as getBkndApp } from "bknd/adapter/remix";
const config = {
connection: {
url: "file:data.db"
}
} as const satisfies RemixBkndConfig;
export async function getApp(args?: { request: Request }) {
return await getBkndApp(config, args);
}
export async function getApi(args?: { request: Request }) {
const app = await getApp(args);
if (args) {
const api = app.getApi(args.request);
await api.verifyAuth();
return api;
}
return app.getApi();
}
```
For more information about the connection object, refer to the [Database](/usage/database) guide.
Create a new api splat route file at `app/routes/api.$.ts`:
```ts app/routes/api.$.ts
import { getApp } from "~/bknd";
const handler = async (args: { request: Request }) => {
const app = await getApp(args);
return app.fetch(args.request);
};
export const loader = handler;
export const action = handler;
```
Now make sure that you wrap your root layout with the `ClientProvider` so that all components share the same context. Also add the user context to both the `Outlet` and the provider:
```tsx app/root.tsx
import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
import { useLoaderData, Outlet } from "@remix-run/react";
import { ClientProvider } from "bknd/client";
import { getApi } from "~/bknd";
export function Layout(props) {
// nothing to change here, just for orientation
return (
<html>{/* ... */}</html>
);
}
export const loader = async (args: LoaderFunctionArgs) => {
const api = await getApi(args);
return {
user: api.getUser()
};
};
export default function App() {
const data = useLoaderData<typeof loader>();
return (
<ClientProvider user={data.user}>
<Outlet context={data} />
</ClientProvider>
);
}
```
## Enabling the Admin UI
Create a new splat route file at `app/routes/admin.$.tsx`:
```tsx app/routes/admin.$.tsx
import { adminPage } from "bknd/adapter/remix";
import "bknd/dist/styles.css";
export default adminPage({
config: {
basepath: "/admin",
logo_return_path: "/../",
color_scheme: "system"
}
});
```
## Example usage of the API
Since the API has already been constructed in the root layout, you can now use it in any page:
```tsx app/routes/_index.tsx
import { useLoaderData } from "@remix-run/react";
import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
import { getApi } from "~/bknd";
export const loader = async (args: LoaderFunctionArgs) => {
// use authentication from request
const api = await getApi(args);
const { data } = await api.data.readMany("todos");
return { data, user: api.getUser() };
};
export default function Index() {
const { data, user } = useLoaderData<typeof loader>();
return (
<div>
<h1>Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
<h1>User</h1>
<pre>{JSON.stringify(user, null, 2)}</pre>
</div>
);
}
```

8
docs/introduction.mdx
View File

@@ -2,7 +2,7 @@
title: Introduction
---
import { cloudflare, nextjs, remix, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
import { cloudflare, nextjs, reactRouter, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
import { Stackblitz, examples } from "/snippets/stackblitz.mdx"
Glad you're here! This is about **bknd**, a feature-rich backend that is so lightweight it could
@@ -44,9 +44,9 @@ in the future, so stay tuned!
href="/integration/nextjs"
/>
<Card
title="Remix"
icon={<div className="text-primary-light">{remix}</div>}
href="/integration/remix"
title="React Router"
icon={<div className="text-primary-light">{reactRouter}</div>}
href="/integration/react-router"
/>
<Card
title="Astro"

2
docs/mint.json
View File

@@ -82,7 +82,7 @@
"group": "Frameworks",
"pages": [
"integration/nextjs",
"integration/remix",
"integration/react-router",
"integration/astro",
"integration/vite"
]

5
docs/snippets/integration-icons.mdx
View File

@@ -3,9 +3,8 @@ export const nextjs = <svg xmlns="http://www.w3.org/2000/svg" width="28px" heigh
stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M9 15V9l7.745 10.65A9 9 0 1 1 19 17.657M15 12V9"/></svg>
export const remix = <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M19.932
17.424c.18 2.31.18 3.394.18 4.576h-5.35c0-.258.004-.493.009-.732c.014-.743.03-1.517-.09-3.081c-.16-2.29-1.147-2.799-2.961-2.799H3.305v-4.166h8.67c2.291 0 3.437-.696 3.437-2.54c0-1.623-1.146-2.605-3.437-2.605h-8.67V2h9.624c5.189 0 7.767 2.449 7.767 6.36c0 2.926-1.814 4.834-4.265 5.152c2.069.413 3.278 1.59 3.501 3.912" clip-rule="evenodd"/><path fill="currentColor" d="M3.305 22v-3.106h5.657c.945 0 1.15.7 1.15 1.118V22z"/></svg>;
export const reactRouter = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 140"><path d="M78.066 92.588c12.818 0 23.209-10.391 23.209-23.21c0-12.817-10.391-23.208-23.21-23.208c-12.817 0-23.208 10.39-23.208 23.209s10.391 23.209 23.209 23.209m-54.857 46.417c12.818 0 23.209-10.39 23.209-23.209c0-12.817-10.391-23.208-23.21-23.208C10.392 92.588 0 102.978 0 115.796s10.39 23.21 23.209 23.21m209.582 0c12.818 0 23.209-10.39 23.209-23.209c0-12.817-10.39-23.208-23.209-23.208s-23.209 10.39-23.209 23.208s10.391 23.21 23.21 23.21"/><path fill="currentColor" d="M156.565 70.357c-.742-7.754-1.12-14.208-7.06-18.744c-7.522-5.744-16.044-2.017-26.54-5.806C112.65 43.312 105 34.155 105 23.24C105 10.405 115.578 0 128.626 0c9.665 0 17.974 5.707 21.634 13.883c5.601 10.64 1.96 21.467 8.998 26.921c8.333 6.458 19.568 1.729 32.104 7.848a23.6 23.6 0 0 1 9.84 8.425A22.86 22.86 0 0 1 205 69.718c0 10.915-7.65 20.073-17.964 22.568c-10.497 3.789-19.019.062-26.541 5.806c-8.46 6.46-3.931 17.
267-10.826 28.682c-3.913 7.518-11.867 12.663-21.043 12.663c-13.048 0-23.626-10.405-23.626-23.24c0-9.323 5.582-17.364 13.638-21.066c12.536-6.12 23.77-1.39 32.104-7.848c4.807-3.726 5.823-9.473 5.823-16.926"/></svg>;
export const astro = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<rect width="24" height="24" fill="none"/><path fill="currentColor" d="M9.24 19.035c-.901-.826-1.164-2.561-.789-3.819c.65.793 1.552 1.044 2.486 1.186c1.44.218 2.856.137 4.195-.524c.153-.076.295-.177.462-.278c.126.365.159.734.115 1.11c-.107.915-.56 1.622-1.283 2.158c-.289.215-.594.406-.892.608c-.916.622-1.164 1.35-.82 2.41l.034.114a2.4 2.4 0 0 1-1.07-.918a2.6 2.6 0 0 1-.412-1.401c-.003-.248-.003-.497-.036-.74c-.081-.595-.36-.86-.883-.876a1.034 1.034 0 0 0-1.075.843q-.013.058-.033.126M4.1 15.007s2.666-1.303 5.34-1.303l2.016-6.26c.075-.304.296-.51.544-.51c.25 0 .47.206.545.51l2.016 6.26c3.167 0 5.34 1.303 5.34 1.303L15.363 2.602c-.13-.366-.35-.602-.645-.602H9.283c-.296 0-.506.236-.645.602c-.01.024-4.538 12.405-4.538 12.405"/>