INTEGRITY Dokumentace

← Cloudflare Pages / pages / framework-guides

Preact

Preact ↗ je oblíbený open-source framework pro tvorbu moderních webových aplikací. Preact lze také použít jako odlehčenou alternativu k Reactu, protože oba sdílejí stejné API a stejný komponentový model.

V tomto průvodci vytvoříte novou aplikaci Preact a nasadíte ji pomocí Cloudflare Pages. Použijete create-preact ↗, odlehčený nástroj pro vytvoření kostry projektu, který za pár sekund nastaví novou aplikaci Preact.

Nastavení nového projektu

Vytvořte nový projekt spuštěním npm init ↗ příkaz v terminálu a zadejte mu název:

npm init preact
cd your-project-name

Než budete pokračovat

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 repozitář GitHub

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

Nasadit pomocí Cloudflare Pages

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:

Konfigurační možnost Hodnota
Produkční větev main
Příkaz sestavení npm run build
Adresář sestavení dist

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 vyberte Save and Deploy.

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

Jakmile nasadíte web, získáte pro svůj projekt jedinečnou subdoménu na *.pages.dev.

Cloudflare Pages při každém novém odeslaném commitu automaticky znovu sestaví váš projekt 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.

Zjistit více

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