← Cloudflare Pages / pages / framework-guides

SvelteKit

SvelteKit je oficiální framework pro tvorbu moderních webových aplikací s Svelte ↗, stále oblíbenější open-source nástroj pro tvorbu uživatelských rozhraní. Na rozdíl od většiny frameworků používá SvelteKit Svelte, kompilátor, který převádí kód vašich komponent na efektivní JavaScript, díky čemuž SvelteKit dokáže poskytovat rychlé, reaktivní aplikace, jež při změně stavu aplikace cíleně aktualizují DOM.

V tomto průvodci vytvoříte novou aplikaci SvelteKit a nasadíte ji pomocí Cloudflare Pages. Použijete SvelteKit ↗, oficiální framework Svelte pro tvorbu webových aplikací libovolné velikosti.

Použijte create-cloudflare ↗ CLI (C3) pro nastavení nového projektu. C3 vytvoří nový adresář projektu, spustí oficiální nastavovací nástroj frameworku SvelteKit a nabídne možnost okamžitého nasazení.

Chcete-li použít create-cloudflare k vytvoření nového projektu SvelteKit spusťte následující příkaz:

npm create cloudflare@latest -- my-svelte-app --framework=svelte --platform=pages

SvelteKit vás vyzve k volbě přizpůsobení. U možnosti šablony zvolte jednu z možností aplikace nebo projektu. Zbývající odpovědi nemají na zbytek tohoto průvodce vliv. Zvolte možnosti, které vyhovují vašemu projektu.

create-cloudflare poté nainstaluje závislosti, mimo jiné Wrangler CLI a SvelteKit @sveltejs/adapter-cloudflare adaptér a položí vám otázky k nastavení.

Jakmile nainstalujete závislosti projektu, spusťte aplikaci:

npm run dev

Všechny průvodce frameworky předpokládají, že již máte základní znalosti Git ↗. Pokud s Gitem začínáte, podívejte se na tento shrnutá příručka ke Gitu ↗ jak nastavit Git na svém lokálním počítači.

Pokud klonujete přes SSH, musíte vygenerujte SSH klíče ↗ na každém počítači, který používáte pro push nebo pull z GitHubu.

Viz dokumentace GitHub ↗ a Dokumentace Git ↗ s dalšími informacemi.

Vytvořte nový repozitář GitHub na repo.new ↗. Po vytvoření nového repozitáře přejděte do adresáře nově vytvořeného projektu a v terminálu spusťte následující příkazy, kterými připravíte a odešlete svou místní aplikaci na GitHub:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Chcete-li používat SvelteKit s Cloudflare Pages, musíte přidat Adaptér Cloudflare ↗ do své aplikace.

1. Cloudflare Adapter nainstalujte spuštěním npm i --save-dev @sveltejs/adapter-cloudflare ve vašem terminálu.
2. Zahrňte adaptér do svelte.config.js:

- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-cloudflare';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    // ... truncated ...
  }
};

export default config;

3. (Nutné, pokud používáte TypeScript) Zahrňte podporu proměnných prostředí. env objekt, obsahující KV namespaces a další úložné objekty, se do SvelteKitu předává prostřednictvím vlastnosti platform spolu s context a caches, takže k němu máte přístup v hooks a endpointech. Například:

declare namespace App {
    interface Locals {}

+   interface Platform {
+       env: {
+           COUNTER: DurableObjectNamespace;
+       };
+       context: {
+           waitUntil(promise: Promise<any>): void;
+       };
+       caches: CacheStorage & { default: Cache }
+   }

    interface Session {}

    interface Stuff {}
}

4. Přístup k přidaným KV nebo Durable Objects (nebo obecně k libovolné binding) ve vašem endpointu pomocí env:

export async function post(context) {
	const counter = context.platform.env.COUNTER.idFromName("A");
}

Pokud používáte create-cloudflare(C3) ↗ k vytvoření nového projektu Svelte nainstaluje C3 všechny závislosti, které projekt potřebuje, a vyzve vás k nasazení projektu přes CLI. Pokud jej nasadíte, web se zveřejní a získáte URL adresu nasazení.

Chcete-li nasadit svůj web do Pages:

1. V dashboardu Cloudflare přejděte na Workers & Pages stránce.

   Přejděte na Workers & Pages ↗

2. Vyberte Vytvoření aplikace.

3. Vyberte Pages kartě.

4. Vyberte Importujte existující repozitář Git.

5. Vyberte nově vytvořený repozitář GitHub a poté vyberte Zahájit nastavení.

6. V Nastavení sestavení sekci vyberte SvelteKit jako Přednastavení frameworku. Váš výběr poskytne následující informace:

Volitelně můžete přizpůsobit Název projektu pole. Ve výchozím stavu odpovídá názvu repozitáře GitHub, ale shodovat se nemusí. Název projektu hodnota se přiřadí jako váš *.pages.dev subdoména.

Po dokončení konfigurace klikněte na Save and Deploy tlačítko.

Uvidíte svůj první probíhající deploy pipeline. Pages nainstaluje všechny závislosti a sestaví projekt podle zadání.

Cloudflare Pages při každém novém odeslaném commitu automaticky znovu sestaví váš projekt SvelteKit a nasadí ho.

Kromě toho budete mít přístup k náhledová nasazení, které opakují proces sestavení a nasazení pro pull requesty. Díky nim můžete náhled změn ve svém projektu zobrazit na skutečné URL adrese ještě před jejich nasazením do produkce.

V SvelteKit se funkce píší jako endpointy. Funkce obsažené ve /functions adresář v kořeni projektu nebude do nasazení zahrnut, protože se kompiluje do jednoho _worker.js .

Chcete-li mít funkčnost odpovídající funkcím Pages Functions onRequests, musíte napsat standardní handlery požadavků v SvelteKit. Následující soubor TypeScript se například chová jako onRequestGet:

import type { RequestHandler } from "./$types";

export const GET = (({ url }) => {
	return new Response(String(Math.random()));
}) satisfies RequestHandler;

Dokončením tohoto návodu jste úspěšně nasadili svůj web Svelte na Cloudflare Pages. Chcete-li začít s dalšími frameworky, podívejte se na seznam návodů pro frameworky.