framework-guides

313 notes in this subject, read out of this brain and free to use. This is page 2 of 6.

Docusaurus is a static site generator framework

Docusaurus is an open-source framework built on React for building, deploying, and maintaining documentation websites. It creates static websites with a focus on documentation and is designed to be easy to use and customizable.

Deploy Hono to Cloudflare Workers

Run 'npm run deploy' to build and deploy your Hono project. The project can be deployed to a *.workers.dev subdomain or a Custom Domain. For CI/CD systems, update the deploy command configuration in Workers Builds.

Hono local development with Cloudflare Vite plugin

Run 'npm run dev' to start a local development server. The Cloudflare Vite plugin runs the Worker in the Cloudflare Workers runtime during local development, matching production behavior. The project comes with Vite's features including hot module replacement (HMR) and local emulations of bindings.

Hono app initial setup

A new Hono project created with create-cloudflare contains a single endpoint at /api in src/worker/index.ts. The example React app at src/react-app/src/App.tsx calls this endpoint to get a message and displays it in the SPA.

Hono project structure with wrangler.jsonc

A Hono project created with create-cloudflare includes: src/worker/index.ts (the Hono app), src/react-app/ (the React SPA), vite.config.ts (configured with Cloudflare Vite plugin), and wrangler.jsonc (Wrangler configuration file). The wrangler.jsonc main field points to src/worker/index.ts, and assets.not_found_handling is set to single-page-application so SPA routes do not go to the Worker.

Create a Hono app with create-cloudflare CLI

Use the command 'npm create cloudflare@latest my-hono-app --template=cloudflare/templates/vite-react-template' to scaffold a full-stack Hono application with a React SPA and Cloudflare Vite plugin for local development.

Nuxt automatic project configuration with wrangler deploy

Running wrangler deploy in a Nuxt project without a Wrangler configuration file will automatically detect Nuxt, generate the necessary configuration, and deploy the project.

Nuxt automatic configuration details

When Wrangler automatically configures a Nuxt project, it sets the main entry point to .output/server/index.mjs, configures assets directory as .output/public, enables nodejs_compat compatibility flag, enables observability, and sets the preset in nuxt.config.ts to cloudflare.

Create new Nuxt project with create-cloudflare

Use the create-cloudflare CLI with the command 'npm create cloudflare@latest my-nuxt-app --framework=nuxt' to set up a new Nuxt project with Workers Assets support. The tool will create a new project directory, initiate Nuxt's official setup, and provide the option to deploy instantly.

Nuxt deployment targets

Nuxt projects can be deployed from a local machine or from any CI/CD system, including Cloudflare's own CI/CD service. Deployment options include *.workers.dev subdomains or Custom Domains.

Nuxt deployment with npm run deploy

Deploy a Nuxt project to Cloudflare Workers by running 'npm run deploy' in the project directory. This will build and deploy the project to a *.workers.dev subdomain or a Custom Domain. For CI/CD systems, ensure the deploy command configuration is updated appropriately.

Nuxt local development with npm run dev

After creating a Nuxt project, run 'npm run dev' in the project directory to start a local server for previewing the project during development.

Qwik local development server

Start a local development server for a Qwik application by running npm run dev in the project directory. This allows previewing the project locally during development.

Qwik deployment uses Workers Assets

Qwik applications created with create-cloudflare are deployed to Cloudflare Workers using the Workers Assets feature for static asset handling.

Deploy Qwik application to Cloudflare Workers

Deploy a Qwik project to Cloudflare Workers by running npm run deploy. The project can be deployed to a *.workers.dev subdomain or a custom domain. Deployment can occur from a local machine or from any CI/CD system, including Cloudflare's own CI/CD service.

Create new Qwik project with create-cloudflare CLI

To create a new Qwik application for deployment on Cloudflare Workers with Workers Assets, use the create-cloudflare CLI (C3) with the command: npm create cloudflare@latest my-qwik-app --framework=qwik. This command creates a new project directory and initiates Qwik's official setup tool.

SolidStart on Cloudflare Workers is beta

Support for SolidStart projects on Cloudflare Workers is currently in beta.

Deploy SolidStart project to Cloudflare Workers

Run npm run deploy in the project directory to build and deploy a SolidStart project to Cloudflare Workers. For CI/CD deployments, ensure the deploy command configuration is updated appropriately.

SolidStart local development server

After creating a SolidStart project, run npm run dev in the project directory to start a local server for previewing the project during development.

Create new SolidStart project with create-cloudflare

To create a new SolidStart project with Workers Assets, run: npm create cloudflare@latest my-solid-app --framework=solid --experimental

SolidStart auto-configuration settings

Wrangler automatically configures SolidStart projects with: main pointing to .output/server/index.mjs, assets directory set to .output/public, compatibility_flags set to nodejs_compat, and observability enabled.

Automatic SolidStart detection and deployment with wrangler

Running wrangler deploy in a SolidStart project without a Wrangler configuration file will automatically detect SolidStart, generate the necessary configuration, and deploy the project.

Waku local development server

Run 'npm run dev' in the project directory to start a local server and preview the Waku project locally during development.

Waku project deployment

Run 'npm run deploy' to build and deploy a Waku project to a *.workers.dev subdomain or a Custom Domain. The project can be deployed from your own machine or from any CI/CD system, including Cloudflare's own.

Waku framework overview and capabilities

Waku is a minimal React framework built for React 19 and React Server Components. It is built on top of Hono and Vite. 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.

Waku automatic project configuration

Run 'wrangler deploy' in a Waku project without a Wrangler configuration file and Wrangler will automatically detect Waku, generate the necessary configuration, and deploy the project. Learn more about automatic project configuration in the workers/framework-guides/automatic-configuration documentation.

Create new Waku project with create-cloudflare

Use the create-cloudflare CLI (C3) to set up a new Waku project with Workers Assets. Run 'npm create cloudflare@latest my-waku-app -- --framework=waku' to create a new project directory, initiate Waku's official setup tool, and provide the option to deploy instantly.

Waku static assets in public directory

Serve static assets in a Waku application by adding them to the ./public/ directory. Common examples include images, stylesheets, fonts, and web manifests. 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.

Required packages for Next.js on Cloudflare Workers

Install @opennextjs/cloudflare@latest and wrangler@latest (as a devDependency) to deploy Next.js applications to Cloudflare Workers.

Next.js local development server

Run npm run dev to start the Next.js development server locally. This server runs in Node.js and offers the best developer experience with quick reloading on source code changes.

Workers Builds environment variables for Next.js

When using Workers Builds to deploy a Next.js application, configure environment variables in the Build Variables and secrets section. This ensures the Next build has access to both public NEXT_PUBLIC_... variables and non-NEXT_PUBLIC_... variables, which are essential for inlining and building SSG pages.

Next.js package.json scripts for Cloudflare

Add the following scripts to package.json: preview script runs "opennextjs-cloudflare build && opennextjs-cloudflare preview" to build and serve locally in the Workers runtime; deploy script runs "opennextjs-cloudflare build && opennextjs-cloudflare deploy" to build and deploy to Cloudflare; cf-typegen script runs "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts" to generate type definitions for the Cloudflare environment.

Deploy Next.js to Cloudflare

Run npm run deploy to build and deploy a Next.js application to Cloudflare Workers. The application can be deployed to a *.workers.dev subdomain or a custom domain from a local machine or CI/CD system (including Workers Builds).

Next.js dev and preview commands differ

The dev command uses the Next.js development server running in Node.js, which offers quick reloading but does not match production. The preview command uses wrangler dev to run the application in the workerd runtime, matching the production Cloudflare Workers environment. Use preview for integration tests and verification before deployment.

OpenNext configuration file

Create an open-next.config.ts file in the project root with the following content: import { defineCloudflareConfig } from "@opennextjs/cloudflare"; export default defineCloudflareConfig(); This file is where you configure caching for the OpenNext adapter.

Automatic Next.js configuration with wrangler

Running wrangler deploy in a Next.js project directory without an existing Wrangler configuration file will automatically detect Next.js, generate the necessary configuration, and deploy the project.

Next.js supported features on Cloudflare adapter

The Cloudflare OpenNext adapter supports the following Next.js features: App Router, Pages Router, Route Handlers, React Server Components, Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), Server Actions, Response streaming, asynchronous work with next/after, Middleware, Image optimization (via Cloudflare Images), Partial Prerendering (PPR, experimental), and Composable Caching (use cache, experimental). Node.js in Middleware (introduced in 15.2) is not yet supported.

Next.js scaffolding command

Create a new Next.js project on Cloudflare Workers by running: npm create cloudflare@latest my-next-app --framework=next

Deploy React Router app from CLI or CI/CD

React Router projects can be deployed to a *.workers.dev subdomain or a Custom Domain from a local machine or any CI/CD system including Cloudflare Workers Builds using npm run deploy.

React Router SPA mode and prerendering not supported with Vite plugin

SPA mode and prerendering are not currently supported when using the Cloudflare Vite plugin with React Router. If you need SPA mode, start with the React template instead and use React Router as a library.

React Router v8 on Cloudflare Workers

React Router v8 is a full-stack React framework that combines with the Cloudflare Vite plugin to provide development, building, and deployment of applications on Cloudflare Workers.

Local development with React Router and Cloudflare Vite plugin

Running npm run dev starts a local development server using React Router with the Cloudflare Vite plugin, which runs the application in the Cloudflare Workers runtime to match production conditions and enables access to local emulations of bindings.

Worker entry file in React Router project

In wrangler.jsonc, the main field points to ./workers/app.ts, which is the entry file for the Worker. The default export includes a fetch handler that delegates the request to React Router.

React Router config file ssr setting

In react-router.config.ts, the ssr field is set to true, meaning the application will use server-side rendering.

React Router project structure with Wrangler

A generated React Router project contains: app/ directory with routes, entry.server.ts and root.tsx; workers/app.ts as the Worker entry file; react-router.config.ts for React Router configuration; vite.config.ts with React Router and Cloudflare plugins; wrangler.jsonc as the Worker config file.

Automatic React Router project detection and configuration

Running wrangler deploy in a React Router project without a Wrangler configuration file will cause Wrangler to automatically detect React Router, generate the necessary configuration, and deploy the project.

Create React Router project with C3

Scaffold a new full-stack React Router application using the create-cloudflare CLI with the command: npm create cloudflare@latest my-react-router-app --framework=react-router

React + Vite scaffolding command

Create a new React application with Cloudflare Workers using the create-cloudflare CLI by running: npm create cloudflare@latest my-react-app --framework=react

React template with deploy button

A ready-to-deploy React starter template is available at https://github.com/cloudflare/templates/tree/main/react-starter-template, which includes a full-stack app with React SPA, Workers API, Vite, and CI/CD configuration.

Deploy React + Workers project

Deploy your React + Workers project to a *.workers.dev subdomain or a Custom Domain by running: npm run deploy. This can be deployed from your local machine or from any CI/CD system, including Cloudflare's Workers Builds.

React full-stack project structure

A React + Vite + Workers full-stack project includes: src/ directory for React components (App.tsx), worker/ directory with index.ts as the backend API, index.html for the HTML entry point, vite.config.ts for build configuration, and wrangler.jsonc for Workers configuration.

SvelteKit deployment command

Run `npm run deploy` to build and deploy a SvelteKit project to Cloudflare Workers. This works from your own machine or from any CI/CD system, including Cloudflare's own.

Create new SvelteKit project with create-cloudflare CLI

To create a new SvelteKit project with Workers Assets support, run `npm create cloudflare@latest my-svelte-app --framework=svelte`. This uses the create-cloudflare (C3) CLI which sets up a new project directory, initiates SvelteKit's official setup tool, and provides the option to deploy instantly.

SvelteKit automatic project detection with wrangler deploy

Running `wrangler deploy` in a SvelteKit project without a Wrangler configuration file will automatically detect SvelteKit, generate the necessary configuration, and deploy the project.

SvelteKit Wrangler configuration for Cloudflare Workers

For SvelteKit on Cloudflare Workers, the wrangler.jsonc configuration file should specify: main set to `.svelte-kit/cloudflare/_worker.js`, assets directory set to `.svelte-kit/cloudflare`, compatibility_flags set to `nodejs_compat`, observability set to `enabled: true`, and the adapter in svelte.config.js set to `@sveltejs/adapter-cloudflare`.

SvelteKit bindings integration with Cloudflare platform

SvelteKit applications can be fully integrated with the Cloudflare Developer Platform using product bindings in both local development and production. Bindings are configured through the SvelteKit adapter and accessed in SvelteKit hooks and endpoints. Refer to the SvelteKit documentation for the @sveltejs/adapter-cloudflare for details on configuring and accessing bindings.

SvelteKit local development server

Run `npm run dev` in the project directory to start a local server and preview the SvelteKit project during development.

RedwoodSDK entry point file

The entry point of a RedwoodSDK application is `src/worker.tsx`. This file uses the `defineApp` function from `rwsdk/worker` to handle requests and return responses to the client.

RedwoodSDK local development server

Run `npm run dev` (or equivalent with other package managers) in the project directory to start the local development server. The development server runs on `http://localhost:5173` by default.

Create new RedwoodSDK project

To create a new RedwoodSDK project, run the command `create-rwsdk my-project-name`, replacing `my-project-name` with your desired project name.

Give your agent this brain