Cloudflare Workers Typescript Server & Client Template

A perfect* template for a Cloudflare Workers project, using Workers Sites (React although can be easily swapped for Gatsby or another static builder), TypeScript, Jest and Prettier.

And now, with end-to-end tests thanks to the new wrangler dev command and Playwright! ✨

Prerequisites

• Node.js

• cloudflared

  (On MacOS with Homebrew: brew install cloudflare/cloudflare/cloudflared)

Getting Started

Automatic

Click the button below and follow the setup instructions.

Manual

1. Fork repository:

   1. Click the Use this template button.

   2. Add GitHub Actions secret for CF_ACCOUNT_ID and CF_API_TOKEN using Edit Cloudflare Workers template permissions.

   3. Enable the CodeClimate, Codecov, LGTM, and Synk apps.

2. (Optionally) Update .nvmrc:

   • Find available versions with nvm ls-remote
   • Use the current Node.js version with node -v > .nvmrc

3. Update wrangler.toml:

   1. Replace script-name and script-name-dev with new-script-name and new-script-name-dev respectively.

   2. Add KV Namespaces. For example:

      kv-namespaces = [
        { binding = "NAMESPACENAME", id = "86bbce2f10524d33a5f26517e8dee123" }
      ]

      • Find existing namespaces with wrangler kv:namespace list
      • Create a new namespace with wrangler kv:namespace create NAMESPACENAME

   3. Update account_id.

4. Update package.json:

   1. Replace script-name with new-script-name.

   2. Replace repositoryname with newrepositoryname.

   3. Update GitHub account name in the following locations:

      1. repository.url

      2. bugs.url

      3. homepage

   4. Update homepage and author.

5. npm i

6. (Optionally) Update npm packages: npm run updatePackages

7. Update README.md, (don't forget the badges!).

8. Follow additional instructions in /packages/*/README.md

Scripts

These should all be self-explanatory:

• npm run lint

  • npm run lint:fix

• npm run test

  • npm run test:client
  • npm run test:server
  • npm run test:e2e

• npm run deploy

To start a local version:

1. In one terminal window, run npm run start:client.

2. In another, run npm run start and navigate to http://localhost:8787.

About

• /packages/client is simply a CRA created with npx create-react-app . --template typescript --use-npm.

• /packages/server an function which intercepts a request to the client. If it returns a 404, the request is passed through to the client.

• /packages/worker attempts to fetch from the server first, falling back on the client.

• /packages/e2e runs end-to-end tests on the full-stack Worker.

---

* May not be perfect