|
| 1 | +--- |
| 2 | +pcx_content_type: how-to |
| 3 | +title: Waku |
| 4 | +head: [] |
| 5 | +description: Create a Waku application and deploy it to Cloudflare Workers with Workers Assets. |
| 6 | +--- |
| 7 | + |
| 8 | +import { |
| 9 | + Badge, |
| 10 | + Description, |
| 11 | + InlineBadge, |
| 12 | + Render, |
| 13 | + PackageManagers, |
| 14 | +} from "~/components"; |
| 15 | + |
| 16 | +In this guide, you will create a new [Waku](https://waku.gg/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)). Waku is a minimal React framework built for [React 19](https://react.dev/blog/2024/12/05/react-19) and [React Server Components](https://react.dev/reference/rsc/server-components). The use of Server Components is completely optional. It can be configured to run Server Components during build and output static HTML or it can be configured to run with dynamic React server rendering. It is built on top of [Hono](https://hono.dev/) and [Vite](https://vite.dev/). |
| 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, initiate Waku's official setup tool, and provide the option to deploy instantly. |
| 21 | + |
| 22 | +To use `create-cloudflare` to create a new Waku project with Workers Assets, run the following command: |
| 23 | + |
| 24 | +<PackageManagers |
| 25 | + type="create" |
| 26 | + pkg="cloudflare@latest my-waku-app" |
| 27 | + args={"--framework=waku --experimental"} |
| 28 | +/> |
| 29 | + |
| 30 | +<Render |
| 31 | + file="c3-post-run-steps" |
| 32 | + product="workers" |
| 33 | + params={{ |
| 34 | + category: "web-framework", |
| 35 | + framework: "Waku", |
| 36 | + }} |
| 37 | +/> |
| 38 | + |
| 39 | +After setting up your project, change your directory by running the following command: |
| 40 | + |
| 41 | +```sh |
| 42 | +cd my-waku-app |
| 43 | +``` |
| 44 | + |
| 45 | +## 2. Develop locally |
| 46 | + |
| 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. |
| 48 | + |
| 49 | +<PackageManagers type="run" args={"dev"} /> |
| 50 | + |
| 51 | +## 3. Deploy your project |
| 52 | + |
| 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/). |
| 54 | + |
| 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. |
| 56 | + |
| 57 | +<PackageManagers type="run" args={"deploy"} /> |
| 58 | + |
| 59 | +--- |
| 60 | + |
| 61 | +## Bindings |
| 62 | + |
| 63 | +Your Waku application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Waku Cloudflare documentation](https://waku.gg/guides/cloudflare#accessing-cloudflare-bindings-execution-context-and-request-response-objects) provides information about configuring bindings and how you can access them in your React Server Components. |
| 64 | + |
| 65 | +## Static assets |
| 66 | + |
| 67 | +You can serve static assets in your Waku application by adding them to the `./public/` directory. Common examples include images, stylesheets, fonts, and web manifests. |
| 68 | + |
| 69 | +During the build process, Waku copies `.js`, `.css`, `.html`, and `.txt` files from this directory into the final assets output. `.txt` files are used for storing data used by Server Components that are rendered at build time. |
| 70 | + |
| 71 | +<Render file="workers-assets-routing-summary" product="workers" /> |
0 commit comments