Kuinka kulmainen sovellus otetaan käyttöön

Etuosa: Kulma & GitHub

Olen hiljattain työskennellyt hauskassa henkilökohtaisessa projektissa, luomalla verkkopohjaisen työkalun asiakashallintaan ja rakentaa käyttöliittymäsovellukseni kulmikkaalla. Nyt, jos olet uusi Anular-tapainen kuin minä, se on melko hämmentävää eikä ole monia direktiivejä siitä, kuinka saada sovelluksesi muille käyttäjille (kulma-sovelluksen ottaminen dev-ympäristöstä elävään ympäristöön, jota käyttäjät voivat käyttää) pääsy ja käyttö).

Joten tutkimme tämän artikkelin tarkoituksia varten kuinka asentaa tai julkaista Kulmainen sovellus GitHub-sivuilla.

Oletan, että olet jo luonut kulmasovelluksen tai työskentelet parhaillaan yhdessä ja tunnet kulman CLI, Git ja Github. Kulma-CLI: n avulla on helppo luoda jo toimiva sovellus heti laatikosta. Se seuraa jo parhaita käytäntöjämme. Jos sinulla ei ole sitä asennettuna, suosittelen, että teet sen.

  • Kulma-CLI-asennus
npm asenna -g @ kulma / cli

Jos sinulla ei ole kulmaprojektia, jota voit ottaa käyttöön, voit yksinkertaisesti luoda esittelyprojektin ja seurata sitä suorittamalla komennon “ng new”, jota seuraa sovelluksesi nimi. Päätin nimetä kaivokseni “oma sovellus-demo”. Sinulla on toinen nimi tai voit nimetä sen mitä haluat:

uusi oma sovellus -demo

Kun se on luotu, vaihda työhakemisto sovellushakemistoisi ja suorita se varmistaaksesi, että kaikki toimii oikein:

cd my-app-demo
palvele - avaa

Ng “palvella” ja seuraa “- avaa” -lippu avaa ja avaa verkkoselaimen automaattisesti. Jos kirjoitit vain "palvella" ja kun sovelluksesi on käynnissä, käy sivulla http: // localhost: 4200 varmistaaksesi, että kaikki toimii hyvin. Sovelluksen esittely näyttää tältä:

kuvakaappaus terminaalista - mac

Seuraava vaihe on varmistaa, että tietokoneellesi on asennettu ghpages-paketti. Ghpages-pakettia käytetään rakennustiedoston siirtämiseen GitHub-sivuille. suorita seuraava komento asentaaksesi se globaalisti:

npm asenna -g kulma-cli-sivut
  • Luo GitHub-arkisto
  • Siirrä sisältö GitHub-arkistoosi

Seuraa alla olevia pika-asennusvaiheita. Kun asetat etävarastoa, muista korvata polku oikealla etävarastoon liittyvällä polulla:

echo "# my-app-demo" >> README.md
git init
git lisätä.
git activ -m "ensimmäinen sitoutuminen"
git etälähetys alkuperä https://github.com/githubusername/reponame.git
git push -u alkuperäismestari

Nyt, suorittamalla “ng build”, luo jakelukansio, joka sisältää kaikki tiedostot, joita projektisi tarvitsevat suorittamiseen tuotantoympäristössä tai palvelinisäntässä.

rakentaa - tuotetta

Tuotantolipun ”- prod” lisääminen ng buildiin pienentää merkittävästi kimpputiedostojesi kokoa. Jos sovellukseesi ei ole integroitu minkäänlaista taustaa, voit vain ottaa dist-kansiosi sisällön ja ladata sen palvelimelle FTP: n kautta, ja sovelluksesi toimii hienosti.

Voit myös määrittää rakennustiedostojen perustiedot seuraavalla komennolla:

rakentaa --prod --base-href // urlOfYourSubfolderDomain

Ota sovellus käyttöön Github-sivuille

Jotta voimme ottaa käyttöön Github-sivuja, meidän on suoritettava ”ng build” base-href-lipulla ja se näyttää tältä:

rakentaa --prod --base-href https://yourGithub-username.github.io/reponame/

Varmista, että lisäät Github-käyttäjänimesi ja etävarastosi nimi, jonka olet liittänyt kulmasovelluksesi paikallisiin arkistoihin. Kaivokseni näyttää tältä:

Näyttökuva terminaalista - mac

On erittäin tärkeää lisätä viiva ”/” arkiston nimen jälkeen polun loppuun, muuten se ei toimi.

Nyt kun se on valmis, voit suorittaa ngh: n käynnistääksesi aikaisemmin asentamasi hgpage-komentoriviliittymätyökalun.

Näyttää, että kulma 6 muutti angular.jsonin "outputPath": "dist /" "outputPath": "dist / [PROJECTNAME]", joka sijoitti kaiken dist-kansioon alikansioon, mikä rikkoa ngh: n toiminnallisuuden.
NGH

Jos käytät Agular 6 tai uudempi, suorita:

ngh --dir dist / [PROJECTNAME]

Tässä on kuvakaappaus, kun juoksin ngh: n pilatessaan rakentaa projektiprojektini demo:

Tässä on kuvakaappaus, kun juoksin ngh-projektille, joka rakennettiin äskettäin Angular 6 -versiolla:

Kun olet julkaissut onnistuneesti, mene vain eteenpäin käymällä base-href-lipussa määrittämässäsi URL-osoitteessa nähdäksesi käyttöönotto ja julkaisemasi kulmasovellus käynnissä. tässä on kuvakaappaus:

Joten se siitä! Nyt voit siirtyä eteenpäin ja tehdä muutoksia sovellukseesi, toista vain rakennus- ja käyttöönottoprosessit aina, kun haluat jakaa sen organisaation muiden kanssa tai jos haluat yksinkertaisesti laittaa sen sinne.

Jos pidit tästä artikkelista, saatat myös pitää “Kuinka rakentaa kaksisuuntainen sovellus esineiden internetiin / jutella Pythonin kanssa”
Kippis!!!