iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🍖

Building a simple page with Cloudflare Pages + Functions + Workers KV + Vite + Preact

に公開
Cloudflare
Vite
Preact
workerskv
tech

The page I created this time is below.

A simple roulette app. It saves the results of the roulette to Workers KV. It updates and displays the saved text periodically (not in real-time). If the results exceed 1,000 items, they are cleared.

Development Flow

  • Workers KV configuration
  • App development with vite + preact
  • Deploying to Cloudflare Pages/Functions

Workers KV Configuration

What is Workers KV?

A Key-Value store that can be called from Pages and Functions. As you can see here, the capacity limits and other restrictions are quite strict, so it's not really intended for use as a full-fledged database.

Setup Method

  • First, from the GUI, configure a namespace (something like a database name) on the Workers page.
  • To access KV from Pages, you also need to set up the namespace binding (this is easy to forget).
  • Now you can call the KV from the Pages code.

Usage (Roughly)

Detailed information is available in the KV · Cloudflare Workers docs, but it might be faster to actually try using it.

  • get
    • NAMESPACE.get(key, {type: "text|json|arrayBuffer|stream", cacheTtl: 3600})
    • Everything except the key is optional.
  • put
  • delete
    • NAMESPACE.delete(key)
  • list
    • NAMESPACE.list({prefix?: string, limit?: number, cursor?: string})
    • You can retrieve keys in a list. Up to 1,000 at a time.
    • If list_completed is false, you can make further requests using a cursor.
    • As mentioned here, "Changes may take up to 60 seconds to be visible when listing keys," so it takes up to about 60 seconds for the KV to reflect updates in the list. It might not be suitable for cases where you want to display something immediately after a put operation.

App development with vite + preact

Project creation

yarn create vite haropuro-shuffle --template preact-ts

Launch for now

cd haropuro-shuffle
yarn install
yarn dev

Code

The basic frontend code is in src/app.tsx.

As for the API, it's in functions/api/shuffle_data.ts.

Simply creating a directory named functions under the app directory will turn it into an API on the Cloudflare side. From within this API, I access the Workers KV and perform get/post operations. Since the API is generated under the same URL as the Pages app, I can perform POST requests without needing to configure CORS.

Deploying to Cloudflare Pages/Functions

Regarding deployment to Cloudflare Pages/Functions, basically you just need to do the initial setup, and after that, just deploy to GitHub.

Cloudflare Pages Configuration

What is Cloudflare Pages?

A hosting service for static pages. It's like Vercel or Firebase Hosting where the app is deployed when you push to GitHub.

Configuration Method

  • Go to the Pages site and connect it with GitHub.
    • Note that the project name will be used in the form https://<project name>.pages.dev/.
  • Choose the build settings appropriate for your environment.
    • I used Vite + preact, so I selected dist for the Build output directory.
  • Then, just wait for about 3 minutes.

Functions Configuration

What is Functions?

A feature that allows you to create endpoints that can be called from Pages.

Configuration Method

Create a functions/ directory in the root directory of the app, and the file and directory names created under it will directly become endpoints. It's the same as Next.js. There is nothing specific to do from the GUI.

Usage

Basically, you just need to create the functions below as appropriate and return a Response object.

  • onRequestPost
  • onRequestPut
  • onRequestPatch
  • onRequestDelete
  • onRequestHead
  • onRequestOptions

There are several other ways to set it up, such as defining multiple handlers in an array. For more details, read here, which includes sample code.

Others

Local Development

wrangler2 is useful when you want to incrementally reproduce the behavior of Pages, KV, and Functions in a local environment. The command below starts the entire environment for Pages, Functions, and KV locally.

$ wrangler pages dev --kv HAROPURO_SHUFFLE -- npx vite

Incidentally, I installed it globally because including it as a package within the app caused an error during deployment to Cloudflare.

yarn global add wrangler@beta

Security

As it stands, anyone can call the API and perform a PUT to Workers KV, so countermeasures would be necessary if used in production.

Deployment

I changed the tsc & vite build part of yarn build in package.json to vite build. This was because a build error occurred when running tsc while using @cloudflare/wrangler-typed.

This repository covers most of the usage for Cloudflare Pages, Functions, and Workers KV, so I recommend giving it a read.

https://github.com/cloudflare/images.pages.dev

Discussion