Ako hostiť Angular web pomocou Netlify a GitHub

Pri hosťovaní webovej stránky Angular online si môžete vybrať z mnohých dostupných platforiem. Jedným z nich, ktorý môžete používať zadarmo, je Netlify.

Ak uložíte kópiu zdrojového kódu svojej webovej lokality do úložiska GitHub, môžete použiť službu Netlify na hosťovanie tejto lokality.

Netlify tiež automaticky premiestni vašu stránku, keď vložíte akékoľvek nové zmeny do vetvy úložiska, ktorú hosťujete.

Ako vytvoriť základnú ukážkovú aplikáciu Angular App

Môžete vytvoriť jednoduchú aplikáciu Angular pomocou editora, ako je Visual Studio Code. Potom môžete túto webovú stránku hostiť pomocou služby Netlify.

1. Vytvor nová aplikácia Angular.
2. Vytvorte si jednoduchú domovskú stránku. Nahraďte kód v app.component.html
   instagram viewer
   súbor s nasledujúcim obsahom vstupnej stránky:

   <trieda div="kontajner-tmavá hlavička">
   <h2>Naša obchodná webová stránka</h2>
   </div>
   <trieda div="nádoba-biela">
   <trieda div="obsahu">
   <h2>Naša obchodná webová stránka</h2>
   <p>Naučte sa, ako rýchlo navrhnúť, vyvinúť a udržiavať svoju profesionálnu webovú stránku.</str>
   </div>
   </div>
   <trieda div="nádoba-oranžová">
   <trieda div="obsahu">
   <h2>Čo robíme</h2>
   <p>Dáme vám nástroje na vývoj webových stránok a jedinečných riešení pre vašich zákazníkov. Poskytujeme aj školenia pre
    údržba a ďalšie témy súvisiace s webovou stránkou.</str>
   </div>
   </div>
   <trieda div="nádoba-biela">
   <trieda div="obsahu">
   <h2>O nás</h2>
   <p>Sme malá firma pôsobiaca z Melbourne v Austrálii. Naše priestory sú jedinečne spracované, takže môžu aj klienti
    navštívte nás osobne.</str>
   </div>
   </div>
   <trieda div="nádoba-tmavá päta">
   <p>Copyright 2022</str>
   </div>

3. Pridajte nejaký štýl do aplikácie Angular pridaním nejakého CSS do aplikácie app.component.css súbor:

   * {
    rodina písiem: "Arial", bezpätkové;
   }
   .hlavička {
    padding: 30px 50px;
   }
   .päta {
    padding: 5px 50px;
    text-align: center;
   }
   .nádoba-tmavá {
    farba pozadia: #202C39;
    farba: biela;
    displej: flex;
    align-items: center;
   }
   .nádoba-oranžová {
    farba pozadia: #FFD091;
    farba: #202C39;
   }
   .nádoba-biela {
    farba pozadia: whitesmoke;
    farba: #202C39;
   }
   .obsah {
    padding: 100px 25%;
    displej: flex;
    smer ohybu: stĺpec;
    výška čiary: 2rem;
   veľkosť písma: 1.2em;
    align-items: center;
    text-align: center;
   }

4. Pridajte nejaký štýl pre celkovú aplikáciu Angular styles.css:

   telo {
    okraj: 0;
    výplň: 0;
   }

5. Ak chcete aplikáciu otestovať, prejdite do jej koreňového priečinka pomocou terminálu alebo príkazového riadka. Napíšte ng slúžiť príkaz:

   ng slúžiť

6. Počkajte, kým sa váš kód skompiluje, a navštívte http://localhost: 4200/ vo webovom prehliadači na zobrazenie vašej aplikácie.
7. V .browserslistrc odstráňte súbor iOS safari verzie 15.2-15.3. To zabráni zobrazeniu chýb kompatibility v konzole pri zostavovaní projektu.

   posledná 1 verzia prehliadača Chrome
   posledná 1 verzia Firefoxu
   posledné 2 hlavné verzie Edge
   posledné 2 hlavné verzie Safari
   posledné 2 hlavné verzie systému iOS
   Firefox ESR
   nieios_saf 15.2-15.3
   niesafari 15.2-15.3

8. Vytvorte si kód pomocou stavať príkaz v termináli:

   stavať

9. V .gitignore súbor, odstráňte alebo komentujte súbor /dist riadok. Jeho odstránením sa zabezpečí dist priečinok je v sade súborov, ktoré odošlete do svojho úložiska GitHub.

   # /vzd

Ako preniesť svoj uhlový kód na GitHub

Ak chcete získať prístup k zdrojovému kódu, budete musieť svoj kód uložiť do vzdialeného úložiska Netlify.

Na GitHub si môžete vytvoriť nové úložisko a vložiť kód svojho webu do tohto úložiska. Ak nepoznáte GitHub, môže byť užitočné porozumieť niektorým z nich Základné funkcie GitHubu najprv.

1. Vytvorte nové úložisko na GitHub. Môžete to urobiť tak, že sa prihlásite na GitHub a kliknete na Nový.
2. Zadajte podrobnosti o svojom novom úložisku. Dajte jej názov, napríklad „netlify-app“, a popis. Neinicializujte úložisko pomocou súboru README, súboru .gitignore alebo licencie.
3. V termináli na počítači prejdite do adresára, kde ste uložili svoju aplikáciu Angular. Spustite nasledujúce príkazy na inicializáciu priečinka ako úložiska git:

   git init
   git pridať .
   git zaviazať sa -m "najprv zaviazať sa"

4. Vložte kód do tohto priečinka do nového vzdialeného úložiska, ktoré ste vytvorili na GitHub. Nasleduj git remote pridať originál, git vetva, a git push príkazy poskytované GitHubom na stránke vzdialeného úložiska:

   git remote pridať originál <Odkaz na váš repo GitHub>
   git vetva -M main
   git push -u pôvod hlavný

5. Môžete potvrdiť, že váš kód aplikácie Angular je teraz vo vašom vzdialenom úložisku GitHub obnovením stránky úložiska GitHub.

Ako používať Netlify na hosťovanie kódu

Ak chcete hostiť svoj kód pomocou služby Netlify, budete mu musieť poskytnúť prístup k zdrojovému kódu GitHub. Netlify potom použije dist priečinok vášho projektu Angular na zverejnenie zostavenej verzie vášho kódu.

Všetky tieto nastavenia môžete nakonfigurovať podľa krokov konfigurácie pri vytváraní novej lokality:

1. Prihláste sa alebo sa zaregistrujte Netlify. Môžete tak urobiť pomocou svojich poverení GitHub.
2. Na hlavnom paneli a stránke so zoznamom lokalít rozbaľte Pridať nový weba vyberte Importujte existujúci projekt.
3. Vyberte GitHub.
4. Kliknite na Nakonfigurujte Netlify na GitHub.
5. Kliknite na Inštalácia.
6. Netlify zobrazí zoznam vašich úložísk GitHub. Vyberte ten, ktorý chcete hostiť. Ak ste napríklad pomenovali svoje úložisko „netlify-app“, vyberte zo zoznamu „netlify-app“.
7. Na konfiguračnej obrazovke ponechajte vlastník, Vetva na nasadenie, a Základný adresár polia na ich predvolených hodnotách. Ak ste publikovali konkrétnu vetvu, ako napríklad samostatnú vetvu „Výroba“, môžete ju pridať do Vetva na nasadenie lúka. Zmeniť Príkaz na zostavenie pole na "ng build". Pre Zverejniť adresár pole, napíšte dist/. Ak neviete, aký je názov projektu, môžete prejsť do priečinka dist vášho projektu a nájsť ho tam. Napríklad „dist/netlify-app“.
8. Kliknite na Nasadiť stránku.
9. Počkajte na dokončenie nasadenia. Môže to trvať niekoľko minút a možno budete musieť obnoviť stránku. Ak všetko pôjde dobre, úspešné nasadenie budete môcť vidieť v zozname nasadení. Kliknite na svoje zverejnené nasadenie, napr. Výroba: main@HEAD.
10. Klikni na Nasadenie otvorenej produkcie tlačidlo.
11. Teraz môžete svoju webovú lokalitu zobraziť na inej karte pomocou adresy URL vo formáte .netlify.app. Ak hosťujete webovú stránku s viacerými presmerovaniami, možno nebudete môcť presmerovať na iné stránky. V tomto prípade existuje spôsob, ako opraviť neúspešné presmerovanie na Netlify. Ak chcete, môžete tiež upravte svoj bezplatný názov domény.

Hosting vašich webových stránok pomocou GitHub a Netlify

Dúfajme, že teraz môžete úspešne hostiť webovú stránku pomocou GitHub a Netlify. Môžete nastaviť automatické nasadenia do určitých vetiev úložiska GitHub. Týmto spôsobom môžete automatizovať a zefektívniť nasadenie vašej webovej stránky.

Netlify však nie je jediný spôsob, ako môžete nasadiť aplikáciu Angular online. Môžete použiť aj iné platformy, ako sú stránky GitHub.