Hono

Start from CLI - scaffold a full-stack app with a Hono API, React SPA and the Cloudflare Vite plugin for lightning-fast development.

npm

yarn

pnpm

npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template

yarn create cloudflare my-hono-app --template=cloudflare/templates/vite-react-template

pnpm create cloudflare@latest my-hono-app --template=cloudflare/templates/vite-react-template

Or just deploy - create a full-stack app using Hono, React and Vite, with CI/CD and previews all set up for you.

What is Hono?

Hono is an ultra-fast, lightweight framework for building web applications, and works fantastically with Cloudflare Workers. With Workers Assets, you can easily combine a Hono API running on Workers with a SPA to create a full-stack app.

Creating a full-stack Hono app with a React SPA

Create a new project with the create-cloudflare CLI (C3)
npm
yarn
pnpm
npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template
yarn create cloudflare my-hono-app --template=cloudflare/templates/vite-react-template
pnpm create cloudflare@latest my-hono-app --template=cloudflare/templates/vite-react-template
Below is a simplified file tree of the project.
my-hono-app
src
worker/
index.ts
react-app/
index.html
vite.config.ts
wrangler.jsonc
wrangler.jsonc is your Wrangler configuration file. In this file:

main points to src/worker/index.ts. This is your Hono app, which will run in a Worker.

assets.not_found_handling is set to single-page-application, which means that routes that are handled by your SPA do not go to the Worker, and are thus free.

If you want to add bindings to resources on Cloudflare's developer platform, you configure them here. Read more about bindings.

vite.config.ts is set up to use the Cloudflare Vite plugin. This runs your Worker in the Cloudflare Workers runtime, ensuring your local development environment is as close to production as possible.
src/worker/index.ts is your Hono app, which contains a single endpoint to begin with, /api. At src/react-app/src/App.tsx, your React app calls this endpoint to get a message back and displays this in your SPA.
Develop locally with the Cloudflare Vite plugin

After creating your project, run the following command in your project directory to start a local development server.
npm
yarn
pnpm
npm run dev
yarn run dev
pnpm run dev
Deploy your project

Your project can be deployed to a *.workers.dev subdomain or a Custom Domain, from your own machine or from any CI/CD system, including Cloudflare's own Workers Builds.

The following command will build and deploy your project. If you are using CI, ensure you update your "deploy command" configuration appropriately.
npm
yarn
pnpm
npm run deploy
yarn run deploy
pnpm run deploy

Bindings

The Hono documentation provides information on how you can access bindings in your Hono app.

With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more.

What is Hono?

Creating a full-stack Hono app with a React SPA

How is this project set up?

What's happening in local development?

Bindings