Å distribuere Angular-applikasjoner til GitHub-sider er en fin måte å være vert for dem gratis. Angular er et populært JavaScript-rammeverk for å bygge enkeltsideapplikasjoner.

Angular har et omfattende kommandolinjegrensesnitt som støtter rask oppbygging og oppsett av JavaScript-applikasjoner. Angular CLI har flere kommandoer for å lage, bygge, betjene og generere applikasjonskomponenter.

Du kan også bruke CLI til å distribuere Angular-applikasjoner til forskjellige mål, inkludert GitHub-sider.

Hva trenger du

For å få mest mulig ut av denne veiledningen, må du ha følgende ferdigheter og verktøy:

  • Du bør være kjent med det grunnleggende om Angular, for eksempel konseptet med apper, innstillinger, URL-er osv.
  • du er kjent med det grunnleggende om GitHub og Git, som å lage en GitHub-konto, lage et git-depot (repo) og GitHub-sider (GH-sider).
  • Du har en Angular-applikasjon klar til å distribueres.
  • Grunnadressen din er på riktig bane. Distribusjoner til GH-sider mislykkes på grunn av innstilling av feil base-href (base-url).
  • En GitHub-konto.
  • Et GitHub-depot (repo) med applikasjonskode.

Nå som du har alle disse på plass, la oss starte distribusjonsprosessen.

Implementeringsprosess

For å begynne, bør du ha opprettet et GitHub-depot for prosjektet ditt og presset koden til hoved/master gren.

Deretter oppretter du en GH-sider-gren.

1. Opprett en GH-pages-gren

Dette er et hack som vil hjelpe deg å få GH-sider-lenken for å hjelpe deg med å sette base-href.

Først oppretter du GH-sider i ditt lokale depot med følgende kommando:

git branch gh-sider

Sjekk deretter ut fra hovedgrenen til GH-sider for å overføre all kode.

git checkout gh-sider

Deretter skyver du GH-pages til GitHub for å lage en ekstern GH-pages-gren.

git push origin gh-sider

Klikk på verktøylinjen under reponavnet Innstillinger > Sider.

Under Bygg og distribusjon, plukke ut Distribuer fra en gren. Velg deretter gh-sider som navnet på grenen, og klikk deretter Lagre. Dette vil opprette en GH-sider-lenke øverst til høyre under GH-sider-etiketten.

Deretter kopierer du denne lenken til det publiserte nettstedet som illustrert nedenfor. Du vil bruke lenken til å sette opp base-ref under distribusjon.

3. Installer Angular-CLI-GHpages

Angular-cli-ghpages-pakken er et verktøy som Angular CLI bruker til distribusjonsformål.

Naviger tilbake til ditt lokale prosjektlager. Installer og kjør deretter angular-cli-ghpages med denne kommandoen:

ng legg til angular-cli-ghpages

4. Distribuer appen

For å bygge appen i produksjon må du koble den til en ekstern server på GitHub.

Konfigurer appen din til en ekstern server ved å kjøre følgende kommando:

ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/

Husk å erstatte lenken ovenfor med lenken direkte fra GH-sider

Et vellykket bygg vil se ut som illustrasjonen nedenfor:

Deretter navigerer du til GitHub og klikker på GH-sider-lenken for å se det distribuerte prosjektet ditt.

Gratulerer, du har implementert Angular-appen din!

Hvis koblingen bare viser README-filen, gå tilbake til GitHub GH-siders innstillinger. Sørg for at den valgte grenen er gh-pages og ikke hoved- eller hovedgrenen. Gi den deretter fem minutter og last inn på nytt. Noen ganger tar GitHub tid å reflektere endringer.

For å lære mer om hvordan du kan bruke Angular CLI i distribusjon, besøk Vinkeldokumentasjon.

Hvordan distribuere en Angular-app til GitHub-sider

Det er flere måter å distribuere Angular-apper til GH-sider, men denne metoden er den enkleste. Du setter opp GH-siders repo-kobling og bruker den med Angular-CLI for å distribuere appen din til GitHub-sider.

Det er mye mer du kan gjøre med Angular og Angular CLI. Utforsk gjerne. Bruk CLI til å distribuere apper til GH-sider for gratis synlighet og hosting for applikasjonene dine.