Cloudflare Pages Step by Step
- Yusuke Wada https://github.com/yusukebe
- 2023-03-01 Serverless Meetup Japan Virtual #26
Me:)
- Yusuke Wada
- https://github.com/yusukebe
- https://twitter.com/yusukebe
- Creator of Hono
Agenda
Creating a full-stack application on 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.
- 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.
The frameworks
- Gatsby
- Jekyll
- Next.js
- Nuxt.js
- Preact
- Qwik
- Svelte
- …
Also Hono!
Three ways to set up a Pages project:
- Git
- Direct Uploads
- 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 - …
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