How toBuild an app with Remix and Bun

There are two ways to use Bun together with Remix, 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:

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.

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:

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.

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.

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