INTEGRITY Dokumentace

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

React + Vite

Začít z CLI - vytvořte kostru full-stack aplikace s React SPA, Cloudflare Workers API a Cloudflare Vite plugin pro bleskově rychlý vývoj.

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

Nebo jen nasaďte - vytvořte full-stack aplikaci pomocí React, Workers API a Vite, s CI/CD a náhledy již předpřipravenými.

Nasaďte na Workers

Co je React?

React ↗ je framework pro tvorbu uživatelských rozhraní. Umožňuje vytvářet znovupoužitelné komponenty UI a efektivně spravovat stav aplikace. React můžete použít k sestavení jednostránkové aplikace (SPA) a zkombinovat ji s backendovým API běžícím na Cloudflare Workers, čímž vznikne full-stack aplikace.

Vytvoření full-stack aplikace s React

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

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

    Jak je tento projekt nastaven?

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

    • my-react-app
      • src/
        • App.tsx
      • worker/
        • index.ts
      • index.html
      • vite.config.ts
      • wrangler.jsonc

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

    • main odkazuje na worker/index.ts. Toto je váš Worker, který bude sloužit jako vaše backendové API.
    • assets.not_found_handling je nastaveno na single-page-application, což znamená, že trasy obsluhované vaší React SPA aplikací se k Workeru vůbec nedostanou, a jsou tedy zdarma.
    • Pokud chcete přidat bindings k prostředkům na vývojářské platformě Cloudflare, nakonfigurujete je zde. Více informací najdete v vazby.

    vite.config.ts je nastaven tak, aby používal Cloudflare Vite plugin. Tím se váš Worker spustí v runtime Cloudflare Workers, takže lokální vývojové prostředí co nejvíce odpovídá produkci.

    worker/index.ts je vaše backendové API, které obsahuje jediný endpoint, /api/, která vrací textovou odpověď. Na src/App.tsx, vaše aplikace React zavolá tento endpoint, získá zprávu a zobrazí ji.

  2. Vyvíjejte lokálně pomocí Cloudflare Vite plugin

    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á pro lokální vývoj a build Vite, a proto obsahuje všechny funkce Vite včetně hot module replacement (HMR).

    Kromě toho vite.config.ts je nastaven tak, aby používal plugin Cloudflare Vite. Ten spouští vaši aplikaci v runtime Cloudflare Workers, stejně jako v produkci, a umožňuje přístup k lokálním emulacím bindings.

  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ě vlastního systému 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

Směrování Assets

Pokud používáte React jako SPA, budete chtít nastavit not_found_handling = "single-page-application" ve vašem konfiguračním souboru Wrangler.

Cloudflare se ve výchozím nastavení nejprve pokusí porovnat cestu požadavku s cestou ke statickému assetu, která vychází ze struktury souborů nahraného adresáře s assety. Jde buď o adresář určený assets.directory ve vaší konfiguraci Wrangler nebo, v případě Cloudflare Vite plugin, výstupní adresář sestavení klienta. Pokud takový soubor neexistuje, spustíme Worker, pokud je k dispozici. Pokud Worker není k dispozici, nebo pokud Worker následně použije asset binding, Cloudflare přejde na chování nastavené pomocí not_found_handling.

Viz dokumentace ke směrování další informace o tom, jak funguje směrování se statickými aktivy a jak toto chování přizpůsobit.

Použijte bindings s React

Váš nový projekt také obsahuje Worker na ./worker/index.ts, který můžete použít jako backendové API pro vaši aplikaci React. Vaše aplikace React nemůže přímo přistupovat k bindingům Workers, ale může s nimi komunikovat prostřednictvím tohoto Workeru. Můžete odesílat fetch() požadavky z vaší aplikace React do Workeru, který pak může požadavek zpracovat a použít vazby. Přečtěte si, jak nakonfigurujte Workers bindings.

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.