Workers foundations

Create the Link Vault project

Scaffold a TypeScript Worker with the current Cloudflare project generator and inspect the generated configuration and scripts.

The project we build in this course is Link Vault. It’s a small service that saves useful links, shows them in a web page, and exports backups. Small enough to finish, big enough to touch every part of the platform.

Let’s create it with Cloudflare’s project generator. Pick the “Hello World” Worker starter and TypeScript when it asks:

npm create cloudflare@latest -- link-vault
cd link-vault
npm run dev

The dev server prints a local URL, usually http://localhost:8787. Open it and you get the starter’s “Hello World!” response.

Don’t copy an old config

My advice is to always start from the generator, never from a config file pasted from a tutorial. The generator writes the current Wrangler version, the current module format, and today’s compatibility date.

That date matters more than it looks. It tells the runtime which behavior to use, and Cloudflare ships changes behind new dates. A date copied from a 2023 blog post silently opts you out of two years of fixes. Advance it on purpose, with your tests passing before and after.

What the generator gave you

Open the folder. Four files matter right now:

  • src/index.ts is the Worker. It exports an object with a fetch method.
  • wrangler.jsonc is the configuration: name, entry point, compatibility date, and later every binding.
  • worker-configuration.d.ts holds the generated types for your environment. Don’t edit it by hand.
  • test/index.spec.ts and vitest.config.mts set up tests that run inside the Workers runtime.

Look at package.json too. npm run dev runs wrangler dev, npm run deploy runs wrangler deploy, and npm run cf-typegen regenerates the types. Commit all of this together so anyone cloning the repo gets the same baseline.

Prove the baseline works

Before touching any application code, run the generated tests and a dry deployment:

npm test
npx wrangler deploy --dry-run

If either fails, fix that first. A broken baseline turns every later problem into a mystery.

Then save a known-good response. With the dev server running:

curl -i http://localhost:8787

You get HTTP/1.1 200 OK, a content-type: text/plain header, and Hello World! in the body. Keep that output somewhere. When routing or a binding breaks in a later lesson, you compare against it and know what changed.

One thing that trips people up: npm run dev can hang on a port that’s already in use. Wrangler prints a warning and picks another port, so always read the URL it prints instead of assuming 8787.

Now open the local URL once more, then find src/index.ts, wrangler.jsonc, the generated types, and the test config in your editor. Those are the files we work in for the rest of the course.

Lesson completed