Gyakorlat – Első lépések

  • 3 perc

Az Azure Static Web Apps egy GitHub-adattárból származó alkalmazások létrehozásával tesz közzé webhelyeket egy éles környezetben. Ebben a gyakorlatban egy webalkalmazást fog létrehozni az Ön által választott előtér-keretrendszerrel egy GitHub-adattárból.

Adattár létrehozása

Ez a modul megkönnyíti egy új adattár létrehozását egy GitHub-sablontárház használatával. Számos sablon érhető el, és mind más és más előtér-keretrendszerrel létrehozott kezdőalkalmazást tartalmaz.

  1. Navigáljon a sablonok tárolójának sablonlapjára a létrehozáshoz. Ha a 404:Page Not Found hibaüzenetet kapja, jelentkezzen be a GitHubra, és próbálkozzon újra.

  2. Válasszon egy GitHub-fiókot a Tulajdonos legördülő listában.

  3. Nevezze el a tárházat "my-static-web-app" néven.

  4. Válassza az Adattár létrehozása gombot.

Futtassa az alkalmazást

Most hozott létre egy GitHub-adattárat my-static-web-app néven a GitHub-fiókjában. Ezután klónoznia kell az adattárat, és helyileg kell futtatnia a kódot a számítógépen.

  1. Nyisson meg egy terminált a számítógépén.

  2. Először klónozza a GitHub-adattárat a számítógép kívánt könyvtárába.

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

  3. Nyissa meg a forráskód mappáját.

    cd my-static-web-app

  4. Ezután nyissa meg az Ön által választott előtér-keretrendszer mappáját az alábbiaknak megfelelően.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Most telepítse az alkalmazás függőségeit.

    npm install

    Feljegyzés

    Ha a PATH nem található hibaüzenetet kap, győződjön meg arról, hogy telepítette Node.js a forrásból https://nodejs.org. Előfordulhat, hogy egyéni beállítást kell elvégeznie, amely magában foglalja a Hozzáadás a PATH-hoz beállítást.

    Képernyőkép a varázsló Node.js beállításainak egyéni telepítéséről.

  6. Végül futtassa az előtérbeli ügyfélalkalmazást.

    npm start

    npm start

    npm run dev

    npm run serve

Az alkalmazás megnyitása a böngészőben

Itt az ideje, hogy megtekintse a helyileg futó alkalmazást. Minden előtér-alkalmazás más és más porton fut.

Kattintson a hivatkozásra az alkalmazás böngészőben való megnyitásához.

Nyissa meg a következő címet: http://localhost:4200.

Képernyőkép az Angular-webalkalmazás böngészéséről.

Nyissa meg a következő címet: http://localhost:3000.

Képernyőkép a React-webalkalmazás böngészéséről.

Nyissa meg a következő címet: http://localhost:5000.

Képernyőkép a Svelte-webalkalmazás böngészéséről.

Nyissa meg a következő címet: http://localhost:8080.

Képernyőkép a Vue-webalkalmazás böngészéséről.

Feljegyzés

A modul gyakorlataiban API nélkül fog üzembe helyezni egy alkalmazást. A modul végén található Következő lépések szakaszban tájékozódhat a következő modulról, ahol egy API-t fog üzembe helyezni az alkalmazás mellett.

Most állítsa le a futó alkalmazást a Ctrl-C billentyűkombináció lenyomásával a terminálban.

Következő lépések

Elkészítette az alkalmazást, és most helyileg fut a böngészőben.

Következő lépésként közzé fogja tenni az alkalmazását az Azure Static Web Apps-ben.