Øvelse – Kom i gang

  • 3 minutter

Azure Static Web Apps publicerer websteder til et produktionsmiljø ved at bygge apps fra et GitHub-lager. I denne øvelse skal du bygge et webprogram ved hjælp af din foretrukne frontendstruktur fra et GitHub-lager.

Opret et lager

Dette modul gør det nemt for dig at oprette et nyt lager ved hjælp af et GitHub-skabelonlager. Der findes en række skabeloner, hvor de hver især indeholder en startapp, der er bygget med forskellige frontend-strukturer.

  1. Gå til det oprette fra skabelonsiden for skabelonlageret. Hvis du får vist en 404: Siden blev ikke fundet fejl, skal du logge på GitHub og prøve igen.

  2. Vælg en af dine GitHub-konti på rullelisten Owner.

  3. Navngiv dit lager my-static-web-app.

  4. Vælg knappen Opret lager fra skabelon.

Kør din app

Du har lige oprettet et GitHub-lager med navnet my-static-web-app- på din GitHub-konto. Derefter kloner du lageret og kører koden lokalt på computeren.

  1. Åbn en terminal på computeren.

  2. Start med at klone GitHub-lageret til den ønskede mappe på din computer.

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

  3. Gå til mappen for din kildekode.

    cd my-static-web-app

  4. Derefter skal du gå til mappen i din foretrukne frontend-struktur på følgende måde.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Installér nu programafhængighederne.

    npm install

    Seddel

    Hvis du får vist en FEJLEN PATH ikke blev fundet, skal du kontrollere, at du har installeret Node.js fra https://nodejs.org. Du skal muligvis foretage en brugerdefineret installation, der omfatter installation af indstillingen Føj til PATH.

    Skærmbillede, der viser den brugerdefinerede installation af Node.js indstillinger i guiden.

  6. Kør til sidst frontend-klientprogrammet.

    npm start

    npm start

    npm run dev

    npm run serve

Gå til din app

Det er tid til at se dit program køre lokalt. Hvert frontendprogram kører på en anden port.

Vælg linket for at gå til dit program.

Gå til http://localhost:4200.

Skærmbillede af søgning i din Angular-webapp.

Gå til http://localhost:3000.

Skærmbillede af søgning i react-webappen.

Gå til http://localhost:5000.

Skærmbillede af søgning i din Svelte-webapp.

Gå til http://localhost:8080.

Skærmbillede af søgning i din Vue-webapp.

Seddel

I øvelserne i dette modul skal du installere en app uden en API. Se afsnittet Næste trin i slutningen af dette modul for at få oplysninger om det næste modul, hvor du installerer en API sammen med din app.

Stop nu din kørende app ved at trykke på Ctrl-C- i terminalen.

Næste trin

Du har bygget dit program, og nu kører det lokalt i din browser.

Derefter skal du publicere dit program til Azure Static Web Apps.