Előző

Következő

Gyakorlat – Első lépések

Befejeződött

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 sablonadattár Létrehozás sablonból lapjára. 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. Az adattárnak adja a my-static-web-app nevet.

4. Válassza a Create repository from template button (Adattár létrehozása sablonból ) gombot.

Futtassa az alkalmazást

Ezzel létrehozott egy my-static-web-app nevű GitHub-adattárat 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
   

   Megjegyzés:

   Ha a Path nem található hibaüzenetet kap, győződjön meg arról, hogy telepítette a Node.js-t.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.

   

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.

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

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

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

Megjegyzé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 úgy, hogy lenyomja a CTRL+C billentyűkombinációt a terminálban.

További 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.

Folytatás