You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**Or just deploy** - create a full-stack app with Hono, React and
28
+
Vite, with CI/CD and previews all set up for you.
29
+
30
+
[](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/staging/vite-react-template)
23
31
24
32
## What is Hono?
25
33
26
-
Lightweight backend, great with Cloudflare Workers.
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.
27
36
28
-
With Workers Assets, you can easily combine a Hono backend with a SPA to create a full-stack app.
37
+
## Creating a full-stack Hono app with a React SPA
29
38
30
-
## Adding a React SPA to a Hono project
39
+
<Steps>
40
+
1.**Create a new project with the create-cloudflare CLI (C3)**
<Detailsheader="What's happening behind the scenes?">
48
+
Hi
49
+
</Details>
36
50
37
-
## 1. Set up a new project
51
+
2.**Develop locally with the Cloudflare Vite plugin**
38
52
39
-
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.
53
+
After creating your project, run the following command in your project directory to start a local development server.
54
+
<PackageManagerstype="run"args="dev" />
55
+
<Detailsheader="What's happening behind the scenes?">
56
+
Hi
57
+
</Details>
40
58
41
-
To use `create-cloudflare` to create a new Hono project with <InlineBadgepreset="beta" /> Workers Assets, run the following command:
59
+
3.**Deploy your project**
42
60
43
-
<PackageManagers
44
-
type="create"
45
-
pkg="cloudflare@latest my-hono-app"
46
-
args={"--framework=hono --platform=workers"}
47
-
/>
61
+
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/).
48
62
49
-
<Render
50
-
file="c3-post-run-steps"
51
-
product="workers"
52
-
params={{
53
-
category: "web-framework",
54
-
framework: "Hono",
55
-
}}
56
-
/>
63
+
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.
57
64
58
-
After setting up your project, change your directory by running the following command:
65
+
<PackageManagerstype="run"args={"deploy"} />
59
66
60
-
```sh
61
-
cd my-hono-app
62
-
```
67
+
</Steps>
63
68
64
-
## 2. Develop locally
69
+
## Adding a SPA to an existing Hono project
65
70
66
-
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.
71
+
While you could use whatever framework you like, this guide will use [React](https://reactjs.org/) with the Cloudflare Vite plugin as an example.
67
72
68
-
<PackageManagerstype="run"args={"dev"} />
73
+
<Steps>
74
+
1. Install React , vite (dev), plugin-react-swc,
75
+
@cloudflare/vite-plugin-cloudflare
69
76
70
-
## 3. Deploy your project
77
+
2. sett up vite config with react plugin +
78
+
cloudflare
79
+
80
+
3. set up wrangler config so that assets point to the right
81
+
directory
82
+
83
+
4. create index.html and main.tsx
84
+
85
+
5. add something in main.tsx that
86
+
calls a hono endpoint
87
+
88
+
</Steps>
71
89
72
90
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/).
73
91
74
92
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.
75
93
76
94
<PackageManagerstype="run"args={"deploy"} />
77
95
96
+
## Adding a Hono backend to an existing SPA
97
+
98
+
If you've got a static app that you r
99
+
78
100
---
79
101
80
102
## Bindings
81
103
82
104
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.
83
-
84
-
## Static assets
85
-
86
-
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.
0 commit comments