1. Home
2. Solutions
3. Starter kits

Platform:

Fastly Compute

Language:

JavaScript

Repo:

https://github.com/fastly/compute-starter-kit-typescript-hono

Use this starter

Using the Fastly CLI, create a new project using this starter somewhere on your computer:

$ fastly compute init --from=https://github.com/fastly/compute-starter-kit-typescript-hono

Or click the button below to create a GitHub repository, provision a Fastly service, and set up continuous deployment:

Features

• TypeScript source with tsconfig.json pre-configured for Compute
• Usage of the @fastly/hono-fastly-compute helper library
• Restrict allowed HTTP methods
• Route matching with Hono
• Static file embedding via includeBytes
• Logging to a Fastly endpoint
• Backend fetch with CacheOverride

Code Walkthrough

The entry point src/index.ts includes several common patterns you'll use when building Compute apps with Hono:

• Defining environment context bindings

  const fire = buildFire({
    httpme: 'Backend:http-me',        // I have a backend named `http-me`
    myEndpoint: 'Logger:my_endpoint', // I have a logging endpoint named `my_endpoint`
  });
  type Env = {
    Bindings: typeof fire.Bindings,
  };
  const app = new Hono<Env>();
  
  // set up routes...
  
  fire(app);

  Defined environment resources are available on c.env within handlers and middleware (env on Hono), for example:

  c.env.myEndpoint.log('Hello from the edge!');

  For more details on context bindings, see @fastly/compute-js-context (typed environment bindings).

• Static file response

  const welcomePage = includeBytes('./src/welcome-to-compute.html');
  return c.body(welcomePage, 200, { 'Content-Type': 'text/html' });

• Streaming log endpoint

  c.env.myEndpoint.log('Hello from the edge!');

• Method filtering

  app.use(createMiddleware(async (c, next) => {
    if (!["HEAD", "GET", "PURGE"].includes(c.req.method)) {
      return c.text("This method is not allowed", 405);
    }
    await next();
  }));

• Backend fetch with cache override

  const cacheOverride = new CacheOverride('override', { ttl: 60 });
  const beresp = await fetch(bereq, { backend: c.env.httpme, cacheOverride });

Getting Started

Create a new app from this starter kit:

npm create @fastly/compute@latest -- --language=typescript --starter-kit=hono

Run locally with the local development environment:

npm run start

Deploy to Fastly (you'll be prompted to create a new service if you don't have one yet):

npm run deploy

Next Steps

• Try adding a new route in index.ts, e.g. app.get('/hello', ...)
• Configure a real backend in fastly.toml and call it from your code
• Explore @fastly/compute-js-context for richer typed bindings
• Add middleware from the Hono ecosystem

Security

Please see our SECURITY.md for guidance on reporting security-related issues.

Next steps

Starters are a good way to bootstrap a project. For more specific use cases, and answers to common problems, try our library of code examples.