-
Notifications
You must be signed in to change notification settings - Fork 10.1k
update various framework guides (hono, react etc.) #21367
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 6 commits
2425a9b
393a2da
1c0682e
d49e7ca
9801d18
b6997e2
cce882a
9bdb327
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -11,59 +11,87 @@ import { | |||||
| InlineBadge, | ||||||
| Render, | ||||||
| PackageManagers, | ||||||
| Steps, | ||||||
| Details, | ||||||
| FileTree, | ||||||
| } from "~/components"; | ||||||
|
|
||||||
| 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/)). | ||||||
|
|
||||||
| ## 1. Set up a new project | ||||||
|
|
||||||
| 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. | ||||||
|
|
||||||
| To use `create-cloudflare` to create a new Hono project with <InlineBadge preset="beta" /> Workers Assets, run the following command: | ||||||
| **Start from CLI** - scaffold a full-stack app with a Hono API, React SPA and the Cloudflare Vite plugin for lightning-fast development. | ||||||
|
|
||||||
| <PackageManagers | ||||||
| type="create" | ||||||
| pkg="cloudflare@latest my-hono-app" | ||||||
| args={"--framework=hono --platform=workers"} | ||||||
| args="--template=cloudflare/templates/vite-react-template" | ||||||
| /> | ||||||
| --- | ||||||
|
|
||||||
| <Render | ||||||
| file="c3-post-run-steps" | ||||||
| product="workers" | ||||||
| params={{ | ||||||
| category: "web-framework", | ||||||
| framework: "Hono", | ||||||
| }} | ||||||
| /> | ||||||
| **Or just deploy** - create a full-stack app using Hono, React and Vite, with CI/CD and previews all set up for you. | ||||||
|
|
||||||
| After setting up your project, change your directory by running the following command: | ||||||
| [](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/staging/vite-react-template) | ||||||
|
|
||||||
| ```sh | ||||||
| cd my-hono-app | ||||||
| ``` | ||||||
| ## What is Hono? | ||||||
|
|
||||||
| ## 2. Develop locally | ||||||
| [Hono](https://hono.dev/) 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. | ||||||
|
|
||||||
| 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. | ||||||
| ## Creating a full-stack Hono app with a React SPA | ||||||
|
|
||||||
| <PackageManagers type="run" args={"dev"} /> | ||||||
| <Steps> | ||||||
| 1. **Create a new project with the create-cloudflare CLI (C3)** | ||||||
|
|
||||||
| ## 3. Deploy your project | ||||||
| <PackageManagers | ||||||
| type="create" | ||||||
| pkg="cloudflare@latest my-hono-app" | ||||||
| args="--template=cloudflare/templates/vite-react-template" | ||||||
| /> | ||||||
| <Details header="How is this project set up?"> | ||||||
| Below is a simplified file tree of the project. | ||||||
| <FileTree> | ||||||
| - my-hono-app | ||||||
| - src | ||||||
| - worker/ | ||||||
| - index.ts | ||||||
| - react-app/ | ||||||
| - index.html | ||||||
| - vite.config.ts | ||||||
| - wrangler.jsonc | ||||||
| </FileTree> | ||||||
|
|
||||||
| 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/). | ||||||
| `wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/). | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we use "wrangler configuration file" everywhere else across the docs, unless you feel strongly about it, i'd prefer to keep it consistent. Especially since that file configures more than just your worker (e.g. resources), for better or worse 🥲
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fair enough. I used 'Worker config file' in the Vite plugin docs but we can revisit this at a later date. |
||||||
| 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](/workers/runtime-apis/bindings/). | ||||||
|
|
||||||
| 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. | ||||||
| `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. | ||||||
emily-shen marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| <PackageManagers type="run" args={"deploy"} /> | ||||||
| `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. | ||||||
| </Details> | ||||||
|
|
||||||
| --- | ||||||
| 2. **Develop locally with the Cloudflare Vite plugin** | ||||||
|
|
||||||
| ## Bindings | ||||||
| After creating your project, run the following command in your project directory to start a local development server. | ||||||
| <PackageManagers type="run" args="dev" /> | ||||||
| <Details header="What's happening in local development?"> | ||||||
| This project uses Vite for local development and build, and thus comes with all of Vite's features like hot module replacement (HMR). | ||||||
emily-shen marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| 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. | ||||||
emily-shen marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| </Details> | ||||||
|
|
||||||
| 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. | ||||||
| 3. **Deploy your project** | ||||||
|
|
||||||
| ## Static assets | ||||||
| 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/). | ||||||
|
|
||||||
| 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. | ||||||
|
|
||||||
| <PackageManagers type="run" args={"deploy"} /> | ||||||
|
|
||||||
| </Steps> | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Bindings | ||||||
|
|
||||||
| 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. | ||||||
| The [Hono documentation](https://hono.dev/docs/getting-started/cloudflare-workers#bindings) provides information on how you can access bindings in your Hono app. | ||||||
|
|
||||||
| <Render file="workers-assets-routing-summary" /> | ||||||
| <Render file="frameworks-bindings" /> | ||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -11,59 +11,92 @@ import { | |||||
| InlineBadge, | ||||||
| Render, | ||||||
| PackageManagers, | ||||||
| Details, | ||||||
| FileTree, | ||||||
| Steps, | ||||||
| } from "~/components"; | ||||||
|
|
||||||
| In this guide, you will create a new [React](https://react.dev/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)). | ||||||
|
|
||||||
| ## 1. Set up a new project | ||||||
|
|
||||||
| 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 React template, and provide the option to deploy instantly. | ||||||
|
|
||||||
| To use `create-cloudflare` to create a new React project with <InlineBadge preset="beta" /> Workers Assets, run the following command: | ||||||
| **Start from CLI** - scaffold a full-stack app with a React SPA, Cloudflare Workers API, and the Cloudflare Vite plugin for lightning-fast development. | ||||||
|
||||||
| **Start from CLI** - scaffold a full-stack app with a React SPA, Cloudflare Workers API, and the Cloudflare Vite plugin for lightning-fast development. | |
| **Start from the CLI** - scaffold a full-stack app with a React SPA, Cloudflare Workers API, and the Cloudflare Vite plugin for lightning-fast development. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.