h3 v2 beta on Bunny edge

A quick demo on how to use h3 v2 beta on Bunny’s edge scripting.

[!NOTE]
I’m focusing more on the Deploy and edit on Bunny.net DX, meaning that these scripts are just manually copy-paste for the dashboard. But yes, you can also use their GitHub integration.

Types of edge scripts

There are two main types of edge scripting, standalone and middleware, both running on Deno.

[!WARNING]
Currently onlystandalone examples are available, as middleware scripts require separating request middlewares from response ones.

As stated in the official docs:

undefinedStandalone scripts:

Standalone scripts are designed to run independently to perform specific tasks without the need for external intervention. They are particularly useful in scenarios where complete control over the execution and state is crucial. Standalone scripts are versatile and can be employed in various applications such as:

• REST services: Building RESTful APIs that handle client requests and return responses directly from the edge, reducing latency and offloading traffic from central servers.
• UI applications: Delivering user interfaces from the edge, which can dynamically generate and serve content based on user interactions and geolocation.
• Data processing services: Executing data transformations and computations close to the data source, minimizing data transfer times and improving performance.

By executing directly at the network’s edge, these scripts reduce latency significantly, enabling faster data processing and response times which greatly enhance performance. Furthermore, scalability is a hallmark of standalone scripts; they are inherently capable of handling multiple requests simultaneously without straining resources, facilitating smooth scalability as user demands increase.

undefinedMiddleware scripts:

Middleware scripts act as intermediaries within the CDN request workflow, allowing developers to insert custom logic that modifies requests or responses as they pass through the CDN. Common use-cases include:

• User Authentication: Verifying user credentials and managing session tokens to control access to content at the edge.
• Error Handling: Customizing error responses based on the request attributes and specific user needs.
• Logging and Monitoring: Implementing real-time logging and monitoring to track and analyze traffic patterns and anomalies.
• Security Enhancements: Adding additional security layers such as rate limiting, IP filtering, and DDoS protection.
• A/B Testing: Dynamically routing users to different versions of a site or application to test features and user experiences.
• HTML Rewriting: Analyze, transform, optimize or filter origin generated HTML to implement different web content manipulation scenarios on the edge.

Middleware scripts provide the flexibility to integrate complex logic seamlessly into the CDN request flow without the need for modifications to backend infrastructure. This flexibility is key in deploying features like user authentication or content customization efficiently. Moreover, by processing requests and responses directly at the edge, these scripts improve the overall speed and efficiency of content delivery. Additionally, they present a cost-effective solution by reducing the reliance on backend processing power and the associated costs of data transfer and server maintenance, which can be significant in traditional setups.

Standalone structure

This is the simpler to use, as it relies on the following internal api:

serve: (handler: (request: Request) => Response | Promise<Response>) => void,

Which simply means that we can use h3’s internal fetch to achieve a working instance:

import { H3 } from 'npm:h3@beta'

const app = new H3().get(() => '⚡️ Tadaa!')

Bunny.v1.serve(app.fetch)

Examples

• logs
• validation
• basic auth

Middleware structure

Bunny relies on two separate arrays of callbacks to handle either request or response middlewares.

The internal API requires:

middlewares: {
  onOriginRequest: Array<(
    ctx: { request: Request },
  ) => Promise<Request> | Promise<Response> | undefined>
  onOriginResponse: Array<(
    ctx: { request: Request, response: Response },
  ) => Promise<Request> | Promise<Response> | undefined>
}

Which are registered via:

Bunny.v1.registerMiddlewares({
  onOriginRequest: requestMiddlewares,
  onOriginResponse: responseMiddlewares,
})

As of now I haven’t found a practical way to pass he’s middlewares to Bunny, ideally this will become an adapter for srvx.

Known limitations

• no websocket support
• limited Deno API