INTEGRITY Dokumentace

← Cloudflare Workers / workers / framework-guides / web-apps

React Router (dříve Remix)

Začít z CLI: Vytvořte základ fullstack aplikace s React Router v8 ↗ a Cloudflare Vite plugin pro bleskově rychlý vývoj.

npm create cloudflare@latest -- my-react-router-app --framework=react-router

Nebo jen nasaďte: Vytvořte fullstack aplikaci pomocí React Router v8, včetně předem nastaveného CI/CD a náhledů.

Nasaďte na Workers

React RouterRozpoznáno
Konektor: Framework to Config
položky konfigurace
Vygenerovaná konfigurace
wrangler.jsonc
main:build/server/index.js
wrangler.jsonc
assets:adresář: build/client
wrangler.jsonc
compatibility_flags:nodejs_compat
wrangler.jsonc
observabilita:enabled: true
Konektor: Config to Workers
Workers uzlu
WorkersNasazeno
Ukazatel stavu
Wrangler zpracovává konfiguraci automaticky

Co je React Router?

React Router v8 ↗ je full-stack framework React pro tvorbu webových aplikací. Kombinuje se s Cloudflare Vite plugin pro poskytnutí prvotřídního zážitku při vývoji, sestavování a nasazování vašich aplikací na Cloudflare.

Vytvoření full-stack aplikace React Router

  1. Vytvořte nový projekt pomocí create-cloudflare CLI (C3)

    npm create cloudflare@latest -- my-react-router-app --framework=react-router

    Jak je tento projekt nastaven?

    Níže je zjednodušený strom souborů projektu.

    • my-react-router-app
      • app
        • trasy
          • ...
        • entry.server.ts
        • root.tsx
        • routes.ts
      • workers
        • app.ts
      • react-router.config.ts
      • vite.config.ts
      • wrangler.jsonc

    react-router.config.ts je vaše Konfigurační soubor React Router ↗. V tomto souboru:

    • ssr je nastaveno na true, což znamená, že vaše aplikace bude používat vykreslování na straně serveru.

    vite.config.ts je vaše Konfigurační soubor Vite ↗. Pluginy React Router a Cloudflare jsou součástí plugins pole. Cloudflare Vite plugin spouští kód vašeho serveru v runtime Workers, díky čemuž je vaše lokální vývojové prostředí co nejblíže produkčnímu.

    wrangler.jsonc je vaše Konfigurační soubor Workeru. V tomto souboru:

    • main odkazuje na ./workers/app.ts. Toto je vstupní soubor vašeho Workeru. Výchozí export obsahuje fetch handler, který deleguje požadavek na React Router.
    • Pokud chcete přidat vazby ke zdrojům na vývojářské platformě Cloudflare, konfigurujete je zde.

  2. Vývoj lokálně

    Po vytvoření projektu spusťte v adresáři projektu následující příkaz, který spustí lokální vývojový server.

    npm run dev

    Co se děje při lokálním vývoji?

    Tento projekt používá React Router v kombinaci s Cloudflare Vite plugin. Znamená to, že vaše aplikace běží v runtime Cloudflare Workers stejně jako v produkci a umožňuje přístup k lokálním emulacím vazeb.

  3. Nasaďte svůj projekt

    Váš projekt lze nasadit na *.workers.dev subdoména nebo Custom Domain z vlastního počítače nebo z libovolného systému CI/CD, včetně toho od samotného Cloudflare Workers Builds.

    Následující příkaz sestaví a nasadí váš projekt. Pokud používáte CI, nezapomeňte aktualizovat "deploy command" konfiguraci podle potřeby.

    npm run deploy

Použijte bindings s React Router

Díky bindings lze vaši aplikaci plně integrovat s Cloudflare Developer Platform a získat tak přístup k výpočetnímu výkonu, úložišti, AI a dalším službám.

Jakmile nakonfigurujete bindings v konfiguračním souboru Wrangleru, budou dostupné v context.cloudflare ve vašich funkcích loader nebo action:

app/routes/home.tsx
export function loader({ context }: Route.LoaderArgs) {
	return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
}

export default function Home({ loaderData }: Route.ComponentProps) {
	return <Welcome message={loaderData.message} />;
}

Jelikož máte přímý přístup ke vstupnímu souboru Workeru (workers/app.ts), můžete také přidat další exporty, například Durable Objects a Workflows

Příklad: použití Workflows

Následující příklad ukazuje, jak nastavit jednoduchý Workflow ve vstupním souboru vašeho Workeru.

workers/app.ts
import { createRequestHandler } from "react-router";
import { WorkflowEntrypoint, type WorkflowStep, type WorkflowEvent } from 'cloudflare:workers';

declare global {
	interface CloudflareEnvironment extends Env {}
}

type Env = {
	MY_WORKFLOW: Workflow;
};

export class MyWorkflow extends WorkflowEntrypoint<Env> {
	override async run(event: WorkflowEvent<{ hello: string }>, step: WorkflowStep) {
		await step.do("first step", async () => {
			return { output: "First step result" };
		});

		await step.sleep("sleep", "1 second");

		await step.do("second step", async () => {
			return { output: "Second step result" };
		});

		return "Workflow output";
	}
}

const requestHandler = createRequestHandler(
	() => import("virtual:react-router/server-build"),
	import.meta.env.MODE
);

export default {
	async fetch(request, env, ctx) {
		return requestHandler(request, {
			cloudflare: { env, ctx },
		});
	},
} satisfies ExportedHandler<CloudflareEnvironment>;

Nakonfigurujte to v konfiguračním souboru Wrangleru:

{
  "workflows": [
    {
      "name": "my-workflow",
      "binding": "MY_WORKFLOW",
      "class_name": "MyWorkflow"
    }
  ]
}
[[workflows]]
name = "my-workflow"
binding = "MY_WORKFLOW"
class_name = "MyWorkflow"

A poté jej použijte ve své aplikaci:

app/routes/home.tsx
export async function action({ context }: Route.ActionArgs) {
	const env = context.cloudflare.env;
	const instance = await env.MY_WORKFLOW.create({ params: { "hello": "world" } })
	return { id: instance.id, details: await instance.status() };
}

Díky bindings lze vaši aplikaci plně integrovat s Cloudflare Developer Platform a získat tak přístup k výpočetnímu výkonu, úložišti, AI a dalším službám.

Bindings

Přístup k výpočetnímu výkonu, úložišti, AI a dalším službám.