Cvičení – začínáme

  • 3 min

Služba Azure Static Web Apps publikuje weby do produkčního prostředí po sestavení aplikací z úložiště GitHub. V tomto cvičení vytvoříte webovou aplikaci na bázi své preferované front-endové platformy z úložiště GitHub.

Vytvoření úložiště

Tento modul usnadňuje vytvoření nového úložiště pomocí úložiště šablon GitHubu. K dispozici je řada šablon, z nichž každá obsahuje úvodní aplikaci sestavenou na jiné front-endové platformě.

  1. Přejděte na stránku pro vytvoření úložiště ze šablony. Pokud se zobrazí chyba 404: Stránka nebyla nalezena , přihlaste se k GitHubu a zkuste to znovu.

  2. V rozevíracím seznamu Vlastník zvolte jeden ze svých účtů GitHubu.

  3. Pojmenujte své úložiště my-static-web-app.

  4. Vyberte tlačítko Vytvořit úložiště ze šablony .

Spusťte aplikaci

Právě jste na svém účtu GitHub vytvořili úložiště GitHub s názvem my-static-web-app. Teď úložiště naklonujte a spusťte kód místně na svém počítači.

  1. Na počítači si otevřete terminál.

  2. Začněte klonováním úložiště GitHub do požadovaného adresáře ve vašem počítači.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app

  3. Přejděte do složky s vaším zdrojovým kódem.

    cd my-static-web-app

  4. Pak přejděte do složky pro front-endovou platformu, kterou preferujete, jak je znázorněno níže.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Teď nainstalujte závislosti aplikace.

    npm install

    Poznámka:

    Pokud se zobrazí chyba Cesta nejde najít, ujistěte se, že jste nainstalovali Node.js z https://nodejs.org. Možná budete muset provést vlastní instalaci , která zahrnuje instalaci možnosti Přidat do cesty .

    Snímek obrazovky zobrazující vlastní instalaci možností Node.js v průvodci

  6. Nakonec spusťte front-endovou klientskou aplikaci.

    npm start

    npm start

    npm run dev

    npm run serve

Přejděte do aplikace

Je čas podívat se, jak vaše aplikace běží místně. Každá front-endová aplikace běží na jiném portu.

Výběrem odkazu přejděte k aplikaci.

Přejděte na http://localhost:4200.

Snímek obrazovky s přechodem na webovou aplikaci Angular

Přejděte na http://localhost:3000.

Snímek obrazovky s přechodem na webovou aplikaci React

Přejděte na http://localhost:5000.

Snímek obrazovky s přechodem na webovou aplikaci Svelte

Přejděte na http://localhost:8080.

Snímek obrazovky s přechodem na webovou aplikaci Vue

Poznámka:

Ve cvičeních tohoto modulu nasadíte aplikaci bez rozhraní API. V části Další kroky na konci tohoto modulu najdete informace o dalším modulu, kde společně s aplikací nasadíte rozhraní API.

Stisknutím CTRL-C na terminálu teď můžete spuštěnou aplikaci zastavit.

Další kroky

Vytvořili jste aplikaci a teď je spuštěná místně v prohlížeči.

Teď aplikaci publikujete do Azure Static Web Apps.