Deploying a tRPC Backend to Bunny Edge Scripting

Prerequisites

1. a bunny.net account
2. a GitHub repository (Bunny currently natively only integrates with GitHub for automatic deployments)¹

Adding the fetchRequestHandler

First install the Bunny SDK with npm. Then define a new entrypoint using tRPC’s fetchRequestHandler, if you’re currently using createHTTPServer for development, you can simply move that into a separate file and run that instead during development, see dev.ts in mapvoyage.

import * as BunnySDK from "@bunny.net/edgescript-sdk";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "./router.js";

BunnySDK.net.http.serve((req) => {
  return fetchRequestHandler({
    endpoint: "/",
    req,
    router: appRouter,
    createContext: () => ({}),
  });
});

Bundling your code

Bunny expects your script to be a single file, so if you aren’t bundling your server code yet you will have to. Luckily it is quite easy with tsup which uses esbuild under the hood. Install tsup with npm install -D tsup, by default it will not include dependencies in the bundle, which is necessary for Bunny. We can configure tsup to include them with the following configuration file:

import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["index.ts"],
  format: ["cjs"],
  target: "node16",
  minify: true,
  bundle: true,
  external: [],
  noExternal: [/.*/],
  plugins: [],
});

We define the entryfile and some output settings and crucially include dependencies using the external and noExternal settings

Setting up deployments

Now we are ready to set up deployments. Add a script from the scripting tab in the Bunny dashboard and choose GitHub.

Choose existing repository, otherwise it will create a new one on GitHub:

Then just select “Basic Node.js” in the deployment settings and leave the commands as they are, this will preconfigure the deployment token in GitHub, but we will change the workflow manually later. Then click add script.

The GitHub workflow

The GitHub workflow Bunny creates for you seems a bit off, edit it using the following workflow instead:

name: Deploy Bunny Scripting Script

on:
  push:
    branches:
      - main

permissions:
  id-token: write
  contents: read

jobs:
  update-script:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: '22'

      - name: Install
        run: "npm i"

      - name: Build
        run: "npm run bundle"

      - name: Publish the script to Bunny
        uses: "BunnyWay/actions/deploy-script@main"
        with:
          script_id: <your-script-id>
          file: "server/dist/index.cjs"

Of note:

1. Remember to use your own script_id in the last step, it should be preconfigured in the existing workflow
2. If you changed your entrypoint or other tsup settings, you may need to update the file option to your actual bundled file

With that you should be set. When you commit the change, your script should be deployed and work. Don’t forget to set any appropriate environment variables and secrets your app needs in the Bunny Dashboard.

Complete Implementation

Refer to the mapvoyage repository for a complete implementation and all examples for this blog post.

//notes (1)

1. You can also deploy using a single POST request. However you will have to write the CI integration for that yourself. ↑

//newsletter

Stay updated on new blog posts and projects by me; sent less than once per week.

subscribe →

//written by

Hi, I’m Bruce, a Computer Science student at ETH Zurich. I build mobile apps, websites and other products, and I write about the interesting things I run into along the way. More about me →

github//email//rss

//letters

reply by email →

Please send an email if you wish to comment on this post. I will share select replies here with the author's permission.