RedwoodSDK Docs — The React Framework for Cloudflare

In this quick start you'll go from zero to request/response in seconds and deploy to production in minutes!

System requirements

Node.js

Create a new project by running the following command, replacing my-project-name with your project name:

npx create-rwsdk my-project-name

yarn dlx create-rwsdk my-project-name

pnpx create-rwsdk my-project-name

bunx create-rwsdk my-project-name

Start developing

Install the dependencies

cd my-project-name

npm install

yarn install

pnpm install

bun install

Run the development server

RedwoodSDK is just a plugin for Vite, so you can use the same commands to run the development server as you would with any other Vite project.

npm run dev

yarn run dev

pnpm run dev

bun run dev

VITE v6.2.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Access the development server in your browser, by default it's available at http://localhost:5173, where you should see the RedwoodSDK welcome page displayed.

How exciting, your first request/response in RedwoodSDK!

Your first route

The entry point of your webapp is src/worker.tsx, open that file in your favorite editor.

Here you'll see the defineApp function, this is the main function that "defines your webapp," where the purpose is to handle requests by returning responses to the client.

src/worker.tsx

import { defineApp } from "rwsdk/worker";
import { route, render } from "rwsdk/router";

import { Document } from "@/app/document";
import { Home } from "@/app/pages/home";

export default defineApp([
  render(Document, [route("/", () => new Response("Hello, World!"))]),
]);

You're going to add your own route, insert the "/ping" route handler:

src/worker.tsx

import { defineApp } from "rwsdk/worker";
import { route, render } from "rwsdk/router";

export default defineApp([
  render(Document, [
    route("/", () => new Response("Hello, World!")),
    route("/ping", function () {
      return <h1>Pong!</h1>;
    }),
  ]),
]);

Now when you navigate to http://localhost:5173/ping you should see "Pong!" displayed on the page.

You might have noticed that we returned JSX instead of a Response object. This is because RedwoodSDK has built-in support for React Server Components, allowing you to return JSX directly from your routes. The JSX will be rendered on the server and sent to the client as HTML.

Deploy to production

RedwoodSDK is built for the Cloudflare Development Platform. You can deploy your webapp to Cloudflare with a single command:

npm run release

yarn run release

pnpm run release

bun run release

The first time you run the command it might fail and ask you to create a workers.dev subdomain. Do as indicated and go to the dashboard and open the Workers menu. Opening the Workers landing page for the first time will create a workers.dev subdomain automatically

What's next?

Learn everything you need to know to build webapps with RedwoodSDK!

Quick Start