INTEGRITY Dokumentace

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

Hono

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

npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template

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

Nasaďte na Workers

Co je Hono?

Hono ↗ je extrémně rychlý a odlehčený framework pro tvorbu webových aplikací, který skvěle funguje s Cloudflare Workers. S Workers Assets můžete snadno zkombinovat API Hono běžící na Workers se SPA a vytvořit tak full-stack aplikaci.

Vytvoření full-stack aplikace Hono s React SPA

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

    npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template

    Jak je tento projekt nastaven?

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

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

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

    • main odkazuje na src/worker/index.ts. Toto je vaše aplikace Hono, která poběží ve Workeru.
    • assets.not_found_handling je nastaveno na single-page-application, což znamená, že trasy obsluhované vaší 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.

    src/worker/index.ts je vaše aplikace Hono, která na začátku obsahuje jediný endpoint, /api. Na src/react-app/src/App.tsx, vaše aplikace React zavolá tento endpoint, získá zprávu a zobrazí ji ve vaší SPA.

  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

Bindings

Dokumentace Hono ↗ poskytuje informace o tom, jak můžete přistupovat k vazbám ve své aplikaci Hono.

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.