Namestitev aplikacij Angular na strani GitHub je odličen način za brezplačno gostovanje. Angular je priljubljeno ogrodje JavaScript za izdelavo enostranskih aplikacij.

Angular ima obsežen vmesnik ukazne vrstice, ki podpira hitro izdelavo in nastavitev aplikacij JavaScript. Angular CLI ima več ukazov za ustvarjanje, gradnjo, streženje in generiranje aplikacijskih komponent.

CLI lahko uporabite tudi za uvajanje aplikacij Angular na različne cilje, vključno s stranmi GitHub.

Kaj rabiš

Če želite kar najbolje izkoristiti ta vodnik, morate imeti naslednje veščine in orodja:

  • Moral bi biti seznanjen s osnove Angularja, kot je koncept aplikacij, nastavitev, URL-jev itd.
  • Ste seznanjeni z osnove GitHub in Git, kot je ustvarjanje računa GitHub, ustvarjanje repozitorija git (repo) in strani GitHub (strani GH).
  • Imate aplikacijo Angular, pripravljeno za uvedbo.
  • Vaš osnovni URL je na pravi poti. Razmestitve na strani GH ne uspejo zaradi nastavitve napačne osnovne reference (osnovni URL).
  • Račun GitHub.
  • Repozitorij GitHub (repo) s kodo aplikacije.

Zdaj, ko imate vse to na mestu, začnimo postopek uvajanja.

Postopek uvajanja

Za začetek bi morali ustvariti repozitorij GitHub za svoj projekt in potisniti kodo v glavni/glavni podružnica.

Nato ustvarite vejo strani GH.

1. Ustvarite podružnico GH-pages

To je kramp, ki vam bo pomagal pridobiti povezavo do strani GH za pomoč pri nastavitvi base-href.

Najprej ustvarite strani GH v svojem lokalnem skladišču z naslednjim ukazom:

git veje gh-strani

Nato se odjavite iz glavne veje na strani GH, da prenesete vso kodo.

git checkout gh-strani

Nato potisnite GH-pages na GitHub, da ustvarite oddaljeno vejo GH-pages.

git push origin gh-strani

V orodni vrstici pod imenom skladišča kliknite Nastavitve > Strani.

Spodaj Gradnja in uvajanje, izberite Razporedite iz podružnice. Nato izberite gh-strani kot ime podružnice, nato kliknite Shrani. To bo ustvarilo povezavo GH-strani zgoraj desno pod oznako GH-strani.

Nato kopirajte to povezavo na objavljeno spletno mesto, kot je prikazano spodaj. Povezavo boste uporabili za nastavitev base-ref med uvajanjem.

3. Namestite Angular-CLI-GHpages

Paket angular-cli-ghpages je orodje, ki ga Angular CLI uporablja za namene uvajanja.

Pomaknite se nazaj do lokalnega repozitorija projektov. Nato namestite in zaženite angular-cli-ghpages s tem ukazom:

ng dodaj angular-cli-ghpages

4. Namestite aplikacijo

Če želite zgraditi aplikacijo v produkciji, jo morate povezati z oddaljenim strežnikom na GitHubu.

Konfigurirajte svojo aplikacijo za oddaljeni strežnik tako, da zaženete naslednji ukaz:

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

Ne pozabite zamenjati zgornje povezave z živo povezavo s strani GH

Uspešna izdelava bo videti kot spodnja slika:

Nato se pomaknite do GitHub in kliknite povezavo strani GH, da si ogledate svoj uvedeni projekt.

Čestitamo, namestili ste svojo aplikacijo Angular!

Če povezava prikazuje samo datoteko README, se vrnite na nastavitve strani GitHub GH. Prepričajte se, da je izbrana veja gh-pages in ne glavna ali glavna veja. Nato počakajte pet minut in znova naložite. Včasih GitHub potrebuje čas, da odrazi spremembe.

Če želite izvedeti več o tem, kako lahko uporabite Angular CLI pri uvajanju, obiščite Kotna dokumentacija.

Kako namestiti aplikacijo Angular na strani GitHub

Obstaja več načinov za namestitev aplikacij Angular na strani GH, vendar je ta metoda najlažja. Nastavite svojo repo povezavo GH-pages in jo uporabite z Angular-CLI za uvajanje vaše aplikacije na strani GitHub.

Z Angular in Angular CLI lahko naredite veliko več. Prosto raziskujte. Uporabite CLI za uvajanje aplikacij na strani GH za brezplačno vidljivost in gostovanje za vaše aplikacije.