Cloudflare SE Lab
Lab 3

Cloudflare Pages and Pages Functions

Lab 3 demonstrates static frontend delivery with lightweight dynamic edge functionality in one Cloudflare Pages project.

Scenario

A customer wants to deploy a static marketing or application site with a lightweight API without managing traditional web servers.

Objective

Deploy the website using Cloudflare Pages, serve the landing and app pages as static assets, and provide dynamic functionality through Pages Functions. The goal is to show that Pages is not only static hosting; it can pair frontend delivery with server-side logic running on Cloudflare's network.

Outcomes

  • Moved the polished landing page to Cloudflare Pages.
  • Served the application page from the /app/ route.
  • Created a Pages Function endpoint at /api/info.
  • Preserved useful dynamic utility behavior through Pages-compatible routes.
  • Demonstrated a cleaner full-stack pattern using Pages plus Functions.

Environment / Build

  • Cloudflare Pages project: cf-pages-lab
  • Static site directory: public/
  • Landing page: /
  • Application page: /app/
  • Dynamic API endpoint: /api/info
  • Deployment command: npx wrangler pages deploy public --project-name cf-pages-lab

Demonstrable Content

curl -I https://www.ybarra-cflab.com/

curl -I https://www.ybarra-cflab.com/app/

curl https://www.ybarra-cflab.com/api/info

What Was Completed

  • Deployed the site to Cloudflare Pages.
  • Created a beautified landing page.
  • Created a beautified app page at /app/.
  • Created a dynamic Pages Function at /api/info.
  • Validated static and dynamic behavior from the same Pages project.

Lab 3 Technical Summary

Lab 3 changed the routing owner for the primary website experience to Cloudflare Pages. The landing page and app page are served as static assets from the Pages project, while the API endpoint is handled by a Pages Function running on the Workers runtime. This demonstrates a common Cloudflare developer-platform pattern: static frontend delivery paired with lightweight dynamic edge logic under the same project and hostname.

Lab 3 Customer-Facing Summary

This lab shows how a customer can host a polished website and simple API on Cloudflare without managing servers. Static pages are delivered quickly from Cloudflare, and small dynamic endpoints can run at the edge. That gives the customer a simpler deployment model, faster iteration, and less infrastructure to operate.