{
"$type": "site.standard.document",
"content": {
"$type": "pub.leaflet.content",
"pages": [
{
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Prerequisites"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.unorderedList",
"children": [
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://bunny.net"
}
],
"index": {
"byteEnd": 11,
"byteStart": 2
}
}
],
"plaintext": "a bunny.net account"
}
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "a GitHub repository (Bunny currently natively only integrates with GitHub for automatic deployments)*"
}
}
]
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#italic"
}
],
"index": {
"byteEnd": 1,
"byteStart": 0
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#italic"
},
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://docs.bunny.net/reference/uploadedgescriptcodeendpoint_setcode"
}
],
"index": {
"byteEnd": 48,
"byteStart": 1
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#italic"
}
],
"index": {
"byteEnd": 118,
"byteStart": 48
}
}
],
"plaintext": "*You can also deploy using a single POST request. However you will have to write the CI integration for that yourself."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Adding the fetchRequestHandler"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://www.npmjs.com/package/@bunny.net/edgescript-sdk"
}
],
"index": {
"byteEnd": 27,
"byteStart": 18
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://trpc.io/docs/server/adapters/fetch#how-to-use-trpc-server-with-an-edge-runtime"
}
],
"index": {
"byteEnd": 99,
"byteStart": 73
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 143,
"byteStart": 127
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/bcye/mapvoyage/blob/2f768cd58bcef2e4d1c72692612bf58bcf14c435/server/dev.ts"
}
],
"index": {
"byteEnd": 271,
"byteStart": 252
}
}
],
"plaintext": "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."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "typescript",
"plaintext": "import * as BunnySDK from \"@bunny.net/edgescript-sdk\";\nimport { fetchRequestHandler } from \"@trpc/server/adapters/fetch\";\nimport { appRouter } from \"./router.js\";\n\nBunnySDK.net.http.serve((req) => {\n return fetchRequestHandler({\n endpoint: \"/\",\n req,\n router: appRouter,\n createContext: () => ({}),\n });\n});"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Bundling your code"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/egoist/tsup"
}
],
"index": {
"byteEnd": 146,
"byteStart": 142
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/evanw/esbuild"
}
],
"index": {
"byteEnd": 165,
"byteStart": 158
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 219,
"byteStart": 200
}
}
],
"plaintext": "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:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "typescript",
"plaintext": "import { defineConfig } from \"tsup\";\n\nexport default defineConfig({\n entry: [\"index.ts\"],\n format: [\"cjs\"],\n target: \"node16\",\n minify: true,\n bundle: true,\n external: [],\n noExternal: [/.*/],\n plugins: [],\n});\n"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 102,
"byteStart": 94
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 117,
"byteStart": 107
}
}
],
"plaintext": "We define the entryfile and some output settings and crucially include dependencies using the external and noExternal settings"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Setting up deployments"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://dash.bunny.net/scripts/add"
}
],
"index": {
"byteEnd": 116,
"byteStart": 62
}
}
],
"plaintext": "Now we are ready to set up deployments. Add a script from the scripting tab in the Bunny dashboard and choose GitHub."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "Choose existing repository, otherwise it will create a new one on GitHub:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.image",
"aspectRatio": {
"height": 461,
"width": 1222
},
"image": {
"$type": "blob",
"ref": {
"$link": "bafkreigw6zxqk5hh274scac3n3t5eni3b543wyhiybl4atcqddhvdw3s6u"
},
"mimeType": "image/webp",
"size": 30920
}
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "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."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.image",
"aspectRatio": {
"height": 1021,
"width": 1218
},
"image": {
"$type": "blob",
"ref": {
"$link": "bafkreibbm472rpui4aabiwgailolr2ubrbgy4otfktn7tnbzjoqg2jzwum"
},
"mimeType": "image/webp",
"size": 52996
}
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "The GitHub workflow"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "The GitHub workflow Bunny creates for you seems a bit off, edit it using the following workflow instead:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "yaml",
"plaintext": "name: Deploy Bunny Scripting Script\n\non:\n push:\n branches:\n - main\n\npermissions:\n id-token: write\n contents: read\n\njobs:\n update-script:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v3\n\n - uses: actions/setup-node@v3\n with:\n node-version: '22'\n\n - name: Install\n run: \"npm i\"\n\n - name: Build\n run: \"npm run bundle\"\n\n - name: Publish the script to Bunny\n uses: \"BunnyWay/actions/deploy-script@main\"\n with:\n script_id: <your-script-id>\n file: \"server/dist/index.cjs\""
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "Of note:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.orderedList",
"children": [
{
"$type": "pub.leaflet.blocks.orderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 34,
"byteStart": 25
}
}
],
"plaintext": "Remember to use your own script_id in the last step, it should be preconfigured in the existing workflow"
}
},
{
"$type": "pub.leaflet.blocks.orderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 86,
"byteStart": 82
}
}
],
"plaintext": "If you changed your entrypoint or other tsup settings, you may need to update the file option to your actual bundled file"
}
}
],
"startIndex": 1
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "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."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Complete Implementation"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "Refer to the mapvoyage repository for a complete implementation and all examples for this blog post:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.website",
"description": "A map-based React Native client for wikivoyage. Contribute to bcye/mapvoyage development by creating an account on GitHub.",
"previewImage": {
"$type": "blob",
"ref": {
"$link": "bafkreieczk23pfkyrgjpouaipd7ysznf5tzglcojgx2cbbemzqtrshw2py"
},
"mimeType": "image/png",
"size": 26385
},
"src": "https://github.com/bcye/mapvoyage",
"title": "GitHub - bcye/mapvoyage: A map-based React Native client for wikivoyage"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": ""
}
}
],
"id": "019e6e6b-1973-7bb8-8680-dd833dee9270"
}
]
},
"description": "How you can deploy your tRPC project to the Bunny Edge Scripting platform",
"path": "/3mmvzspxd222x",
"publishedAt": "2025-03-23T13:33:00.000Z",
"site": "at://did:plc:z4yzhhsdetqfkq6hneiwc3cv/site.standard.publication/3m5k5jw2onk2h",
"tags": [
"bunny",
"deployments",
"mapvoyage"
],
"title": "Deploying a tRPC Backend to Bunny Edge Scripting"
}