Skip to content

Halaskommm/WRG

Repository files navigation

Cloudflare Workers Typescript Server & Client Template

GitHub Actions Test GitHub Actions Deploy LGTM Alerts LGTM Code Quality Code Climate Maintainability Codecov License GitHub Last Commit Lerna

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.

Deploy to Cloudflare Workers

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