# Build an app with Remix and Bun

Used: @types/bun@1.0.4, @remix-run/server-runtime@2.0.0, and bun@1.0.25

There are two ways to use [Bun](https://bun.sh) together with [Remix](https://remix.run), first is to use it only to install dependencies, the second is to use it as the JS runtime of the server.

## Use Bun to install dependencies

The first is quite simple, after you have Bun installed you can run the following script:

```sh
bun install
```

This will create a `bun.lockb` file, you can then remove the `package-lock.json` or `yarn.lock` or whatever lock file you had before. From that point you can use `bun add`, `bun rm` and `bun install` to work with your dependencies.

Remember to update your deployment configuration to now use Bun too, this depends on the platform you're using.

## Use Bun as JS runtime

This requires a bit more work, first we need to install Bun TS definitions.

```sh
bun add @types/bun
```

Now TS will know that `Bun` is a global object with multiple things available.

The next thing is to change the HTTP server we use, we can use the built-in HTTP server that Bun comes with:

```ts {% path="server.ts" %}
import type { ServerBuild } from "@remix-run/server-runtime";
import { createRequestHandler, logDevReady } from "@remix-run/server-runtime";
import { resolve } from "node:path";
import * as build from "./build/index";
import { type Serve } from "bun";

if (Bun.env.NODE_ENV === "development") {
  logDevReady(build as unknown as ServerBuild);
}

const remix = createRequestHandler(
  build as unknown as ServerBuild,
  Bun.env.NODE_ENV
);

export default {
  port: Bun.env.PORT || 3000,
  async fetch(request) {
    // First we need to send handle static files
    let { pathname } = new URL(request.url);
    let file = Bun.file(resolve(__dirname, "../public/", `.${pathname}`));
    if (await file.exists()) return new Response(file);
    // Only if a file doesn't exists we send the request to the Remix request handler
    return remix(request);
  },
} satisfies Serve;
```

Now, we have to update our `package.json` to run this server, for this we need these scripts.

```json {% path="package.json" %}
"build": "remix build",
"dev": "remix dev -c \"bun run start\"",
"start": "bun run server.ts"
```

If we run `bun run dev` or `bun run build && bun start` we will be running our application using Bun.

Note that the build process nd `remix dev` will still run using Node.js, it's not yet possible to use Bun for that, but even in dev the actual process of our app will use Bun.

And since we're using Bun we can also leverage other features of Bun, like the built-in SQLite database driver.

```ts {% path="app/db.server.ts" %}
import { Database } from "bun:sqlite";
export const db = new Database(":memory:");
```