RedwoodSDK

新しいプロジェクトを作成します。

次のコマンドを実行します。my-project-name は希望するプロジェクト名に置き換えます。

npx create-rwsdk my-project-name

yarn dlx create-rwsdk my-project-name

pnpx create-rwsdk my-project-name

ディレクトリを移動します。

cd my-project-name

依存関係をインストールします。

npm install

yarn install

pnpm install

bun install

ローカルで開発します。

プロジェクトディレクトリで次のコマンドを実行し、ローカル開発サーバーを起動します。RedwoodSDK は Vite プラグインなので、ほかの Vite プロジェクトと同じ開発ワークフローを使えます。

npm run dev

yarn run dev

pnpm run dev

ブラウザーで http://localhost:5173 を開きます。「Hello, World!」がページに表示されます。

最初のルートを追加します。

アプリケーションのエントリポイントは src/worker.tsx です。エディターでそのファイルを開きます。

defineApp 関数があります。リクエストを処理し、クライアントにレスポンスを返します。

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!"))]),
]);

/ping ルートハンドラーを追加します。

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>;
    }),
  ]),
]);

http://localhost:5173/ping を開き、「Pong!」がページに表示されることを確認します。

ルートは JSX を直接返せます。RedwoodSDK は React Server Components に対応しており、JSX をサーバーで描画して HTML をクライアントに送ります。

プロジェクトをデプロイします。

*.workers.dev サブドメインまたは カスタムドメイン にデプロイできます。ローカルマシンからでも、Cloudflare Workers CI/CD を含む任意の CI/CD システムからでもデプロイできます。

ビルドとデプロイには次のコマンドを使います。CI を使う場合は、デプロイコマンド の設定も合わせて更新します。

npm run release

yarn run release

pnpm run release

初めて実行すると失敗し、workers.dev サブドメインの作成を求められることがあります。ダッシュボードで Workers メニューを開きます。Workers のランディングページを初めて開くと、workers.dev サブドメインが自動で作成されます。