Cloudflare Pages Step by Step

Me:)

Agenda

Creating a full-stack application on Cloudflare Pages

Step-by-Step

github.com/yusukebe/cloudflare-pages-step-by-step

TOC

  • 01 Basic
  • 02 Vite
  • 03 React
  • 04 Functions
  • 05 Hono
  • 06 D1
  • 07 RPC
  • 08 Testing

What is a Cloudflare Pages

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.

https://pages.cloudflare.com

  • Developer-focused with effortless Git integration.
  • Advanced collaboration built-in with unlimited seats.
  • Unmatched performance on Cloudflare’s edge network.
  • Dynamic functionality through integration with Cloudflare Workers.

https://pages.cloudflare.com

The frameworks

  • Gatsby
  • Jekyll
  • Next.js
  • Nuxt.js
  • Preact
  • Qwik
  • Svelte

Also Hono!

SS

Three ways to set up a Pages project:

  1. Git
  2. Direct Uploads
  3. Wrangler

Develop with Wrangler

wrangler pages dev <directory | command>

Deploy with Wrangler

wrangler pages publish <directory>

01 Basic

.
├── package.json
└── pages
    └── index.html
wrangler pages dev ./pages

02 Vite

.
├── index.html
├── package.json
└── vite.config.ts
wrangler pages dev -- vite

What is Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

  • A dev server - …
  • A build command - …

vitejs.dev/guide/

03 React

.
├── index.html
├── package.json
├── src
│   ├── App.tsx
│   └── main.tsx
├── tsconfig.json
└── vite.config.ts

04 Functions

.
├── functions
│   └── hello.ts
├── package.json
└── pages
    └── index.html

05 Hono

.
├── functions
│   └── api
│       └── [[route]].ts
├── package.json
└── pages
    └── index.html

06 D1

.
├── functions
│   └── api
│       └── [[route]].ts
├── package.json
├── pages
│   └── index.html
├── posts.sql
└── wrangler.toml

07 RPC

.
├── functions
│   └── api
│       └── [[route]].ts
├── index.html
├── package.json
├── src
│   ├── App.tsx
│   └── main.tsx
├── tsconfig.json
└── vite.config.ts

08 Testing

.
├── functions
│   └── api
│       └── [[route]].ts
├── jest.config.js
├── package.json
├── pages
│   └── index.html
└── server
    ├── index.test.ts
    └── index.ts

Full-stack “TODO

.
├── common
│   └── types.ts
├── front
│   ├── App.tsx
│   ├── client.ts
│   ├── components
│   │   ├── AddTaskForm.tsx
│   │   ├── TaskItem.tsx
│   │   └── TaskList.tsx
│   └── main.tsx
├── functions
│   └── api
│       └── [[route]].ts
├── index.html
├── package.json
├── server
│   └── index.ts
├── todo.sql
├── tsconfig.json
├── vite.config.ts
└── wrangler.toml

Wrap-up

  • Create a full-stack application on Cloudflare Pages
  • Web API with Cloudflare Functions
  • Database with Cloudflare D1
  • React SPA in pages