Quick Start

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 <project-name> with your project name:

npx degit redwoodjs/sdk/starters/standard#main <project-name>

Start developing

Install the dependencies

pnpm

cd <project-name>
pnpm install

npm

cd <project-name>
npm install

yarn

cd <project-name>
yarn 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.

pnpm

pnpm dev

npm

npm run dev

yarn

yarn 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 “Hello World” displayed on the page.

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, ErrorResponse } from "@redwoodjs/sdk/worker";
import { route, render, prefix } from "@redwoodjs/sdk/router";
import { Document } from "@/app/Document";
import { Home } from "@/app/pages/Home";
import { setCommonHeaders } from "@/app/headers";
import { userRoutes } from "@/app/pages/user/routes";
import { sessions, setupSessionStore } from "./session/store";
import { Session } from "./session/durableObject";
import { db, setupDb } from "./db";
import type { User } from "@prisma/client";
export { SessionDurableObject } from "./session/durableObject";

export type AppContext = {
  session: Session | null;
  user: User | null;
};

export default defineApp<AppContext>([
  setCommonHeaders(),
  async ({ env, appContext, request, headers }) => {
    await setupDb(env);
    setupSessionStore(env);

    try {
      appContext.session = await sessions.load(request);
    } catch (error) {
      if (error instanceof ErrorResponse && error.code === 401) {
        await sessions.remove(request, headers);
        headers.set("Location", "/user/login");

        return new Response(null, {
          status: 302,
          headers,
        });
      }

      throw error;
    }

    if (appContext.session?.userId) {
      appContext.user = await db.user.findUnique({
        where: {
          id: appContext.session.userId,
        },
      });
    }
  },
  render(Document, [
    route("/", () => new Response("Hello, World!")),
    route("/protected", [
      ({ appContext }) => {
        if (!appContext.user) {
          return new Response(null, {
            status: 302,
            headers: { Location: "/user/login" },
          });
        }
      },
      Home,
    ]),
    prefix("/user", userRoutes),
  ]),
]);

You’re going to add your own route, insert the “/ping” route’s code to the defineApp function:

src/worker.tsx

import { defineApp } from "@redwoodjs/sdk/worker";
import { route } from "@redwoodjs/sdk/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.

Tip

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. To deploy your webapp to Cloudflare, first update the name field in wrangler.jsonc to match your project name. Then you can deploy with a single command.

wrangler.jsonc

{
  // Schema reference
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "__change_me__",
  "main": "src/worker.tsx",
  "compatibility_date": "2024-09-23",
  "compatibility_flags": ["nodejs_compat"],
  "assets": {
    "binding": "ASSETS",
  },
  "observability": {
    "enabled": true,
  },
}

Then run the following command to deploy your webapp to Cloudflare:

pnpm

pnpm release

npm

npm run release

yarn

yarn release

What's next? Learn everything you need to know to build webapps with Redwood!