Cloudflare

Preset: cloudflare (switch to this preset)

Login to your Cloudflare Workers account and obtain your account_id from the sidebar.

Create a wrangler.toml in your root directory:

  1. name = "playground"
  2. type = "javascript"
  3. account_id = "<the account_id you obtained>"
  4. workers_dev = true
  5. route = ""
  6. zone_id = ""
  7. compatibility_date = "2022-04-07"
  8. [site]
  9. bucket = ".output/public"
  10. entry-point = ".output"
  11. [build]
  12. command = ""
  13. upload.format = "service-worker"

Testing locally

You can use miniflare, a local Cloudflare Workers development server, to test your app locally:

  1. NITRO_PRESET=cloudflare yarn build
  2. npx miniflare .output/server/index.mjs --site .output/public

Deploy from your local machine using wrangler

Install wrangler and login to your Cloudflare account:

  1. npm i @cloudflare/wrangler -g
  2. wrangler login

Generate website with cloudflare preset:

  1. NITRO_PRESET=cloudflare yarn build

You can preview locally:

  1. wrangler dev

Publish:

  1. wrangler publish

Deploy within CI/CD using GitHub Actions

Create a token according to the wrangler action docs and set CF_API_TOKEN in your repository config on GitHub.

Create .github/workflows/cloudflare.yml:

  1. name: cloudflare
  2. on:
  3. push:
  4. branches:
  5. - main
  6. pull_request:
  7. branches:
  8. - main
  9. jobs:
  10. ci:
  11. runs-on: ${{ matrix.os }}
  12. strategy:
  13. matrix:
  14. os: [ ubuntu-latest ]
  15. node: [ 14 ]
  16. steps:
  17. - uses: actions/setup-node@v1
  18. with:
  19. node-version: ${{ matrix.node }}
  20. - name: Checkout
  21. uses: actions/checkout@master
  22. - name: Cache node_modules
  23. uses: actions/cache@v2
  24. with:
  25. path: node_modules
  26. key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
  27. - name: Install Dependencies
  28. if: steps.cache.outputs.cache-hit != 'true'
  29. run: yarn
  30. - name: Build
  31. run: yarn build
  32. env:
  33. NITRO_PRESET: cloudflare
  34. - name: Publish to Cloudflare
  35. uses: cloudflare/wrangler-action@1.3.0
  36. with:
  37. apiToken: ${{ secrets.CF_API_TOKEN }}