Skip to content

Commit 922d42d

Browse files
emily-shenemily-shen
committed
update hono docs
1 parent 40e9000 commit 922d42d

File tree

1 file changed

+61
-33
lines changed
  • src/content/docs/workers/frameworks/framework-guides

1 file changed

+61
-33
lines changed

‎src/content/docs/workers/frameworks/framework-guides/hono.mdx‎

Lines changed: 61 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,87 @@ import {
1111
InlineBadge,
1212
Render,
1313
PackageManagers,
14+
Steps,
15+
Details,
16+
FileTree,
1417
} from "~/components";
1518

16-
In this guide, you will create a new [Hono](https://hono.dev/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
17-
18-
## 1. Set up a new project
19-
20-
Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, use code from the official Hono template, and provide the option to deploy instantly.
21-
22-
To use `create-cloudflare` to create a new Hono project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
19+
**Start from CLI** - scaffold a full-stack app with a Hono API, React SPA and the Cloudflare Vite plugin for lightning-fast development.
2320

2421
<PackageManagers
2522
type="create"
2623
pkg="cloudflare@latest my-hono-app"
27-
args={"--framework=hono --platform=workers"}
24+
args="--template=cloudflare/templates/vite-react-template"
2825
/>
26+
---
2927

30-
<Render
31-
file="c3-post-run-steps"
32-
product="workers"
33-
params={{
34-
category: "web-framework",
35-
framework: "Hono",
36-
}}
37-
/>
28+
**Or just deploy** - create a full-stack app using Hono, React and Vite, with CI/CD and previews all set up for you.
3829

39-
After setting up your project, change your directory by running the following command:
30+
[![Deploy to Workers](https://deploy.workers.cloudflare.com/button)](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/staging/vite-react-template)
4031

41-
```sh
42-
cd my-hono-app
43-
```
32+
## What is Hono?
4433

45-
## 2. Develop locally
34+
[Hono](https://hono.dev/) is an ultra-fast, lightweight framework for building web applications, and works fantastically with Cloudflare Workers.
35+
With Workers Assets, you can easily combine a Hono API running on Workers with a SPA to create a full-stack app.
4636

47-
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
37+
## Creating a full-stack Hono app with a React SPA
4838

49-
<PackageManagers type="run" args={"dev"} />
39+
<Steps>
40+
1. **Create a new project with the create-cloudflare CLI (C3)**
5041

51-
## 3. Deploy your project
42+
<PackageManagers
43+
type="create"
44+
pkg="cloudflare@latest my-hono-app"
45+
args="--template=cloudflare/templates/vite-react-template"
46+
/>
47+
<Details header="How is this project set up?">
48+
Below is a simplified file tree of the project.
49+
<FileTree>
50+
- my-hono-app
51+
- src
52+
- worker/
53+
- index.ts
54+
- react-app/
55+
- index.html
56+
- vite.config.ts
57+
- wrangler.jsonc
58+
</FileTree>
5259

53-
Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/).
60+
`wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/).
61+
In this file:
62+
- `main` points to `src/worker/index.ts`. This is your Hono app, which will run in a Worker.
63+
- `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.
64+
- If you want to add bindings to resources on Cloudflare's developer platform, you configure them here. Read more about [bindings](/workers/runtime-apis/bindings/).
5465

55-
The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.
66+
`vite.config.ts` is set up to use the Cloudflare Vite plugin. This runs your Worker in Cloudflare's `workerd` runtime, ensuring your local development environment is as close to production as possible.
5667

57-
<PackageManagers type="run" args={"deploy"} />
68+
`src/worker/index.ts` is your Hono app, which contains a single endpoint to begin with, `/api`.
69+
At `src/react-app/src/App.tsx`, your React app calls this endpoint to get a message back and displays this in your SPA.
70+
</Details>
5871

59-
---
72+
2. **Develop locally with the Cloudflare Vite plugin**
6073

61-
## Bindings
74+
After creating your project, run the following command in your project directory to start a local development server.
75+
<PackageManagers type="run" args="dev" />
76+
<Details header="What's happening in local development?">
77+
This project uses Vite for local development and build, and thus comes with all of Vite's features like hot module replacement (HMR).
78+
In addition, `vite.config.ts` is set up to use the Cloudflare Vite plugin. This runs your application in Cloudflare's `workerd` runtime, just like in production, as well as access to local emulators of bindings.
79+
</Details>
6280

63-
Your Hono application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Hono documentation](https://hono.dev/docs/getting-started/cloudflare-workers#bindings) provides information about configuring bindings and how you can access them.
81+
3. **Deploy your project**
6482

65-
## Static assets
83+
Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including Cloudflare's own [Workers Builds](/workers/ci-cd/builds/).
84+
85+
The following command will build and deploy your project. If you are using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.
86+
87+
<PackageManagers type="run" args={"deploy"} />
88+
89+
</Steps>
90+
91+
---
92+
93+
## Bindings
6694

67-
You can serve static assets in your Hono application by [placing them in the `./public/` directory](https://hono.dev/docs/getting-started/cloudflare-workers#serve-static-files). This can be useful for resource files such as images, stylesheets, fonts, and manifests.
95+
With bindings, your Hono application can be fully integrated with the Cloudflare Developer Platform, giving you access to storage, AI, image optimization and more. Refer to the [bindings overview](/workers/runtime-apis/bindings/) for more information on what's available and how to configure them.
6896

69-
<Render file="workers-assets-routing-summary" />
97+
The [Hono documentation](https://hono.dev/docs/getting-started/cloudflare-workers#bindings) provides information on how you can access them in your Hono app.

0 commit comments

Comments
 (0)