npm.io
1.5.2 • Published 46m agoCLI

rwsdk

Licence
MIT
Version
1.5.2
Deps
39
Size
1.3 MB
Vulns
0
Weekly
8.4K
RedwoodSDK logo

A React Framework for Cloudflare.

It begins as a Vite plugin that unlocks SSR, React Server Components, Server Functions, and realtime features.

Redwood Inc. logo Documentation Join the community on Discord License


RedwoodSDK

RedwoodSDK is the missing React framework for Cloudflare — bringing SSR, React Server Components, Server Functions, and Realtime APIs to the edge with the power of Vite.

It features:

  • Zero-config Vite integration
  • Realtime server functions
  • Smart, composable router with middleware and interruptors
  • Blazing-fast SSR and RSC support

Quickstart

Start a new project:

npx create-rwsdk my-project-name

Install dependencies:

cd my-project-name
pnpm install

Run the dev server:

pnpm dev
VITE v6.2.0  ready in 500 ms

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

That's it, your RedwoodSDK is up and running!

Add more routes?

As long as you return a valid Response, RedwoodSDK is happy!

// worker.tsx

import { defineApp } from "rwsdk/worker";
import { route, render } from "rwsdk/router";
import MyReactPage from "@app/pages/MyReactPage";

export default defineApp([
  render(Document, [
    route("/", () => new Response("Hello, World!")),
    route("/ping", function () {
      return <h1>Pong!</h1>;
    }),
    route("/react", MyReactPage)
    route("/docs", async () => {
      return new Response(null, {
        status: 301,
        headers: {
          "Location": "https://docs.rwsdk.com",
        },
      });
    }),
    route("/sitemap.xml", async () => {
      return new Response(sitemap, {
        status: 200,
        headers: {
          "Content-Type": "application/xml",
        },
      });
    }),
    route("/robots.txt", async () => {
      const robotsTxt = `User-agent: *
        Allow: /
        Disallow: /search
        Sitemap: https://rwsdk.com/sitemap.xml`;

      return new Response(robotsTxt, {
        status: 200,
        headers: {
          "Content-Type": "text/plain",
        },
      });
    }),
  ]),
]);

Start building immediately → Quick start guide


React Server Components

RedwoodSDK is true Javascript full-stack:

// users.ts (server function)
"use server";
import { db } from "@/db";

export async function getUsers() {
  const users = await db.users.findAll();
  return users;
}

// UserList.tsx (React server component)
import { getUsers } from "./users";

export default async function UsersPage() {
  const users = await getUsers();
  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Setup a database now → React Server Components


️ Like it? Star it!

If this project saves you time or sparks ideas, please star the repo — it really helps us grow the community.


Contributing

This is a monorepo. To contribute or explore packages:

  • Fix bugs or propose features
  • Join our community on Discord

Keywords