Back to all labs
LAB 01

Developer Platform

Workers & KV Edge Expense Tracker

45 minutes Level 1 3 Captains
Access Lab Guide
WorkersKV

Summary

This hands-on lab introduces participants to serverless development on Cloudflare by building a lightweight, one-page expense tracker application. Participants will learn how to serve a dynamic UI directly from the edge using Cloudflare Workers and persist user data globally with low latency using Workers KV.

Objectives

  • Deploy a serverless application using Cloudflare Workers.
  • Serve a custom HTML interface directly from the edge.
  • Implement a RESTful API to read and write data.
  • Persist application state globally using Workers KV.

Lab Authors

AZZ
Amirul Zharfan Zalid Digital Solutions Engineer
KFC
Kai Foong Chow Digital Solutions Engineer
TYT
T. Y. Tan Digital Solutions Engineer

Lab Modules

Step-by-step hands-on modules

1

Serving with Workers

15 min

Initialize a new Cloudflare Worker project and configure it to serve a static HTML/CSS one-page application. Focus on the fetch event handler to return the UI assets directly from the edge, replacing the default "Hello World" response.

Objective: Successfully run a Cloudflare Worker that renders the visual interface of the Expense Tracker app to the browser.

Key Steps:

  • Initialize a new Cloudflare Worker project using Wrangler CLI
  • Replace the default response with a custom HTML/CSS interface
  • Configure the fetch event handler to serve UI assets
  • Test the Worker locally using wrangler dev
2

Persisting Data with Workers KV

20 min

Integrate Workers KV into the application. Write the serverless functions (within the Worker) to handle PUT, GET, and DELETE requests for expense data, and bind the Worker to a local KV namespace.

Objective: Successfully configure a Workers KV binding in the Worker project, implement the necessary logic to persist expense data (read, write, delete) to the KV namespace, and verify functionality in the local development environment.

Key Steps:

  • Create and bind a KV namespace to the Worker project
  • Implement PUT endpoint to write expense data to KV
  • Implement GET endpoint to read expense data from KV
  • Implement DELETE endpoint to remove expense entries
  • Test CRUD operations in the local development environment
3

Deploying to the Edge

10 min

Move from local development (wrangler dev) to multiple environments such as staging and production. Deploy the Worker and KV bindings to Cloudflare's global network using Wrangler. Verify the live URL, test data persistence in the production environment, and briefly review usage logs in the Cloudflare dashboard.

Objective: Execute the deployment command (wrangler deploy), verify the live application is accessible publicly, and confirm that expense data persists in the production KV namespace.

Key Steps:

  • Configure staging and production environments
  • Deploy the Worker and KV bindings with wrangler deploy
  • Verify the live application URL is accessible
  • Test data persistence in the production KV namespace
  • Review usage logs in the Cloudflare dashboard

Ready to start this lab?

Join the hands-on session and build something real.

Access Lab Guide View All Labs