← Cloudflare Pages / pages / framework-guides

Qwik

Qwik ↗ je open-source webový framework orientovaný na DOM, s podporou resumability, navržený pro co nejlepší dosažitelný čas do interaktivity, a to díky zaměření na obnovitelnost ↗, vykreslování HTML na straně serveru a granulární lazy loading ↗ kódu.

V tomto průvodci vytvoříte novou aplikaci Qwik implementovanou pomocí Qwik City ↗ (metaframework Qwiku) a nasadíte ji přes Cloudflare Pages.

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

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

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

create-cloudflare nainstaluje další závislosti, mimo jiné Wrangler CLI a všechny potřebné adaptéry a položí vám otázky k nastavení.

V rámci cloudflare-pages instalaci adaptéru, functions/[[path]].ts soubor se vytvoří. Soubor [[path]] v názvu souboru znamená, že tento soubor bude zpracovávat požadavky na všechny příchozí adresy URL. Další informace najdete v Segmenty cesty a zjistěte více.

Po výběru možnosti serveru přejděte do adresáře projektu a vykreslete projekt spuštěním následujícího příkazu:

npm start

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

Pokud používáte create-cloudflare(C3) ↗ k vytvoření nového projektu Qwik 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í a nasazení sekci uveďte následující informace:

Po nakonfigurování webu můžete spustit první nasazení. Měli byste vidět, jak Cloudflare Pages instaluje npm, závislosti projektu a sestavuje web, než ho nasadí.

Po nasazení webu získáte pro svůj projekt jedinečnou subdoménu na *.pages.dev. Pokaždé, když do svého webu Qwik committnete nový kód, Cloudflare Pages automaticky znovu sestaví váš projekt a nasadí ho. Získáte také přístup k náhledová nasazení u nových pull requestů, abyste si mohli prohlédnout, jak změny na vašem webu vypadají, než je nasadíte do produkce.

A binding umožňuje vaší aplikaci komunikovat s vývojářskými produkty Cloudflare, například s KV, Durable Object, R2, a D1 ↗.

V QwikCity přidejte kód na straně serveru pomocí routeLoaders ↗ a akce ↗. Poté přistupte k vazbám nastaveným pro vaši aplikaci pomocí platform objekt poskytovaný frameworkem.

Následující blok kódu ukazuje příklad přístupu k oboru názvů KV v QwikCity.

// ...

export const useGetServerTime = routeLoader$(({ platform }) => {
  // the type `KVNamespace` comes from runtime types generated by running `wrangler types`
  const { MY_KV } = (platform.env as { MY_KV: KVNamespace }));

  return {
    // ....
  }
});

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