Cloudflare Pages ​

Cloudflare Pages is a JAMstack platform for front-end developers to collaborate and deploy websites.

It supports many frameworks and it is usually suited for distributing static files. But with Pages Functions, you can build a full-stack application. Hono works on it.

1. Setup ​

A starter for Cloudflare Pages is available. Start your project with "create-hono" command.

npm create hono@latest my-app

npm create hono@latest my-app

Move into my-app and install the dependencies.

cd my-app
npm i

cd my-app
npm i

Below is a basic directory structure that the script in the /functions will work dynamically. Naming the file with [[]] like [[route]].ts, it can handle all requests to /api/*.

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

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

2. Hello World ​

You can make the API whose path is /api/hello by editing functions/api/[[route]].ts

import { Hono } from 'hono'
import { handle } from 'hono/cloudflare-pages'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello, Cloudflare Pages!',
  })
})

export const onRequest = handle(app)

import { Hono } from 'hono'
import { handle } from 'hono/cloudflare-pages'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello, Cloudflare Pages!',
  })
})

export const onRequest = handle(app)

3. Run ​

Run the development server locally. Then, access http://localhost:8788 in your Web browser.

npm run dev

npm run dev

/api/hello just returns JSON, but this can be leveraged to create a full-stack application with APIs and user-interfaces.

4. Deploy ​

If you have a Cloudflare account, you can deploy to Cloudflare.

npm run deploy

npm run deploy