···11+# Default Starter Kit For TypeScript
22+33+[](https://deploy.edgecompute.app/deploy)
44+55+Get to know the Fastly Compute environment with a basic starter in TypeScript that demonstrates routing, simple synthetic responses and code comments that cover common patterns.
66+77+**For more details about other starter kits for Compute, see the [Fastly Documentation Hub](https://www.fastly.com/documentation/solutions/starters)**
88+99+## Features
1010+* TypeScript source files
1111+* `tsconfig.json` file to use as a starting point
1212+* Allow only requests with particular HTTP methods
1313+* Match request URL path and methods for routing
1414+* Build synthetic responses at the edge
1515+1616+## Understanding the code
1717+1818+This starter kit is written in TypeScript and illustrates the same features as the [Compute JavaScript default starter kit](https://github.com/fastly/compute-starter-kit-typescript-default). It is intentionally lightweight, and requires no dependencies aside from the [`@fastly/js-compute`](https://www.npmjs.com/package/@fastly/js-compute) npm package. It will help you understand the basics of processing requests at the edge using Fastly. This starter includes implementations of common patterns explained in our [using Compute](https://www.fastly.com/documentation/guides/compute/javascript/) and [VCL migration](https://www.fastly.com/documentation/guides/compute/migrate/) guides. The starter doesn't require the use of any backends. Once deployed, you will have a Fastly service running on Compute that can generate synthetic responses at the edge.
1919+2020+The Compute JavaScript SDK [has built-in support](https://www.fastly.com/documentation/guides/compute/developer-guides/javascript/#built-in-typescript) for executing TypeScript source files that contain only erasable TypeScript syntax. In this mode, type checking is not performed.
2121+2222+The SDK does not directly refer to the `tsconfig.json` file, but one is included to aid your IDE in coding support as well as to illustrate the recommended practice of running `tsc --noEmit` in a `prebuild` script to check for TypeScript errors, since the SDK does not perform type checking.
2323+2424+## Running the application
2525+2626+To create an application using this starter kit, create a new directory for your application and switch to it, and then type the following command:
2727+2828+```shell
2929+npm create @fastly/compute@latest -- --language=typescript --default-starter-kit
3030+```
3131+3232+To build and run your new application in the local development environment, type the following command:
3333+3434+```shell
3535+npm run start
3636+```
3737+3838+To build and deploy your application to your Fastly account, type the following command. The first time you deploy the application, you will be prompted to create a new service in your account.
3939+4040+```shell
4141+npm run deploy
4242+```
4343+4444+## Security issues
4545+4646+Please see our [SECURITY.md](SECURITY.md) for guidance on reporting security-related issues.
+16
services/fastly/express-basic/fastly.toml
···11+# This file describes a Fastly Compute package. To learn more visit:
22+# https://www.fastly.com/documentation/reference/compute/fastly-toml
33+44+authors = [""]
55+cloned_from = "https://github.com/fastly/compute-starter-kit-typescript"
66+description = ""
77+language = "javascript"
88+manifest_version = 3
99+name = "express-basic"
1010+service_id = ""
1111+1212+[local_server]
1313+1414+[scripts]
1515+ build = "npm run build"
1616+ post_init = "npm install"
···11+//! Default Compute template program.
22+33+/// <reference types="@fastly/js-compute" />
44+// import { CacheOverride } from "fastly:cache-override";
55+// import { Logger } from "fastly:logger";
66+import { env } from "fastly:env";
77+import { includeBytes } from "fastly:experimental";
88+99+// Load a static file as a Uint8Array at compile time.
1010+// File path is relative to root of project, not to this file
1111+const welcomePage = includeBytes("./src/welcome-to-compute.html");
1212+1313+// The entry point for your application.
1414+//
1515+// Use this fetch event listener to define your main request handling logic. It
1616+// could be used to route based on the request properties (such as method or
1717+// path), send the request to a backend, make completely new requests, and/or
1818+// generate synthetic responses.
1919+2020+addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));
2121+2222+async function handleRequest(event: FetchEvent) {
2323+ // Log service version
2424+ console.log("FASTLY_SERVICE_VERSION:", env('FASTLY_SERVICE_VERSION') || 'local');
2525+2626+ // Get the client request.
2727+ let req = event.request;
2828+2929+ // Filter requests that have unexpected methods.
3030+ if (!["HEAD", "GET", "PURGE"].includes(req.method)) {
3131+ return new Response("This method is not allowed", {
3232+ status: 405,
3333+ });
3434+ }
3535+3636+ let url = new URL(req.url);
3737+3838+ // If request is to the `/` path...
3939+ if (url.pathname == "/") {
4040+ // Below are some common patterns for Fastly Compute services using JavaScript.
4141+ // Head to https://developer.fastly.com/learning/compute/javascript/ to discover more.
4242+4343+ // Create a new request.
4444+ // let bereq = new Request("http://example.com");
4545+4646+ // Add request headers.
4747+ // req.headers.set("X-Custom-Header", "Welcome to Fastly Compute!");
4848+ // req.headers.set(
4949+ // "X-Another-Custom-Header",
5050+ // "Recommended reading: https://developer.fastly.com/learning/compute"
5151+ // );
5252+5353+ // Create a cache override.
5454+ // To use this, uncomment the import statement at the top of this file for CacheOverride.
5555+ // let cacheOverride = new CacheOverride("override", { ttl: 60 });
5656+5757+ // Forward the request to a backend.
5858+ // let beresp = await fetch(req, {
5959+ // backend: "backend_name",
6060+ // cacheOverride,
6161+ // });
6262+6363+ // Remove response headers.
6464+ // beresp.headers.delete("X-Another-Custom-Header");
6565+6666+ // Log to a Fastly endpoint.
6767+ // To use this, uncomment the import statement at the top of this file for Logger.
6868+ // const logger = new Logger("my_endpoint");
6969+ // logger.log("Hello from the edge!");
7070+7171+ // Send a default synthetic response.
7272+ return new Response(welcomePage, {
7373+ status: 200,
7474+ headers: new Headers({ "Content-Type": "text/html; charset=utf-8" }),
7575+ });
7676+ }
7777+7878+ // Catch all other requests and return a 404.
7979+ return new Response("The page you requested could not be found", {
8080+ status: 404,
8181+ });
8282+}