---
title: 'Vite'
description: 'Run bknd inside Vite'
---
import InstallBknd from '/snippets/install-bknd.mdx';

Vite is a powerful toolkit to accelerate your local development.

## Installation
Create a new vite project by following the [official guide](https://vite.dev/guide/#scaffolding-your-first-vite-project)
and then install bknd as a dependency:
<InstallBknd />

Additionally, install required dependencies:
```bash
npm install @hono/vite-dev-server
```

## Serve the API
To serve the **bknd** API, you first have to create a local server file for you vite environment.
Create a `server.ts` file:
```ts
import { serve } from "bknd/adapter/vite";

// the configuration given is optional
export default serve({
   mode: "cached", // that's the default
   connection: {
      url: ":memory:"
   }
})
```
For more information about the connection object, refer to the [Database](/usage/database) guide.

You can also run your vite server in `mode: "fresh"`, this will re-create the app on every fetch.
This is only useful for when working on the `bknd` repository directly.

Next, adjust your `vite.config.ts` to look like the following:
```ts
import { devServer } from "bknd/adapter/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
     react(),
     tsconfigPaths(),
     devServer({
        // point to your previously created server file
        entry: "./server.ts"
     })
  ]
});
```

Now you can start your application using `npm run dev`. Now opening http://localhost:5174/
looks like an empty project. That's because we only registered the API, head over to
http://localhost:5174/api/system/config to see **bknd** respond.

## Serve the Admin UI
After adding the API, you can easily add the Admin UI by simply returning it in your `App.tsx`.
Replace all of its content with the following:

```tsx
import { Admin } from "bknd/ui";
import "bknd/dist/styles.css";

export default function App() {
   return <Admin withProvider />
}
```

Now http://localhost:5174/ should give you the Admin UI.

## Customizations
This is just the bare minimum and may not always fulfill your requirements. There are a few
options you can make use of to adjust it according to your setup.

### Use custom HTML to serve the Admin UI
There might be cases you want to be sure to be in control over the HTML that is being used.
`bknd` generates it automatically, but you use your own one as follows:

```ts server.ts
import { serve, addViteScript } from "bknd/adapter/vite";
import { readFile } from "node:fs/promises"

let html = await readFile("./index.html", "utf-8");

// add vite scripts
html = addViteScript(html);

// then add it as an option
export default serve({ html })
```

The vite scripts has to be added manually currently, as adding them automatically with
`@hono/vite-dev-server` is buggy. This may change in the future.

### Use a custom entry point
By default, the entry point `/src/main.tsx` is used and should fit most cases. If that's not you,
you can supply a different one like so:
```ts server.ts
import { serve } from "bknd/adapter/vite";

// the configuration given is optional
export default serve({
  forceDev: {
     mainPath: "/src/special.tsx"
  }
});
```