La distribuzione di applicazioni Angular su pagine GitHub è un ottimo modo per ospitarle gratuitamente. Angular è un popolare framework JavaScript per la creazione di applicazioni a pagina singola.

Angular ha un'interfaccia a riga di comando completa che supporta la creazione e l'impostazione rapide di applicazioni JavaScript. La CLI angolare ha diversi comandi per creare, costruire, servire e generare componenti dell'applicazione.

Puoi anche utilizzare l'interfaccia a riga di comando per distribuire le applicazioni Angular su vari target, incluse le pagine GitHub.

Quello che ti serve

Per sfruttare al meglio questa guida, è necessario disporre delle seguenti competenze e strumenti:

  • Dovresti avere familiarità con le basi di Angular, come il concetto di app, impostazioni, URL e così via.
  • Hai familiarità con le basi di GitHub e Git, come creare un account GitHub, creare un repository git (repo) e pagine GitHub (pagine GH).
  • Hai un'applicazione Angular pronta per essere distribuita.
  • Il tuo URL di base si trova nel percorso corretto. Le distribuzioni alle pagine GH non riescono a causa dell'impostazione errata di base-href (base-url).
    instagram viewer
  • Un account GitHub.
  • Un repository GitHub (repo) con il codice dell'applicazione.

Ora che hai tutto questo in atto, iniziamo il processo di distribuzione.

Processo di distribuzione

Per iniziare, dovresti aver creato un repository GitHub per il tuo progetto e aver inviato il codice al file principale/maestro ramo.

Successivamente, crea un ramo GH-pages.

1. Crea un ramo GH-pages

Questo è un hack che ti aiuterà a ottenere il collegamento alle pagine GH per aiutarti a impostare il base-href.

Innanzitutto, crea le pagine GH nel tuo repository locale con il seguente comando:

git branch gh-pages

Successivamente, effettua il check-out dal ramo principale alle pagine GH per trasferire tutto il codice.

git checkout gh-pages

Quindi, invia GH-pages a GitHub per creare un ramo remoto di GH-pages.

git push origin gh-pages

Sulla barra degli strumenti sotto il nome del repository, fare clic su Impostazioni > Pagine.

Sotto Compilazione e distribuzione, Selezionare Distribuisci da un ramo. Quindi, seleziona gh-pagine come nome del ramo, quindi fare clic su Salva. Questo creerà un link GH-pages in alto a destra sotto l'etichetta GH-pages.

Successivamente, copia questo collegamento al sito pubblicato come illustrato di seguito. Utilizzerai il collegamento per configurare il riferimento di base durante la distribuzione.

3. Installa Angular-CLI-GHpages

Il pacchetto angular-cli-ghpages è uno strumento che la CLI di Angular utilizza per scopi di distribuzione.

Torna al repository del progetto locale. Quindi installa ed esegui angular-cli-ghpages con questo comando:

ng aggiungere angular-cli-ghpages

4. Distribuisci l'app

Per creare l'app in produzione, devi connetterla a un server remoto su GitHub.

Configura la tua app su un server remoto eseguendo il seguente comando:

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

Ricorda di sostituire il link sopra con il link live dalle pagine GH

Una build di successo sarà simile all'illustrazione seguente:

Successivamente, vai su GitHub e fai clic sul link GH-pages per vedere il tuo progetto distribuito.

Congratulazioni, hai implementato la tua app Angular!

Se il collegamento visualizza solo il file README, tornare alle impostazioni delle pagine GitHub GH. Assicurati che il ramo selezionato sia gh-pages e non il ramo principale o principale. Quindi dagli cinque minuti e ricarica. A volte GitHub richiede tempo per riflettere i cambiamenti.

Per ulteriori informazioni su come utilizzare Angular CLI nella distribuzione, visita il Documentazione angolare.

Come distribuire un'app angolare alle pagine GitHub

Esistono diversi modi per distribuire le app Angular alle pagine GH, ma questo metodo è il più semplice. Imposta il tuo collegamento al repository GH-pages e lo usi con Angular-CLI per distribuire la tua app alle pagine GitHub.

C'è molto di più che puoi fare con Angular e Angular CLI. Sentiti libero di esplorare. Utilizza l'interfaccia a riga di comando per distribuire le app alle pagine GH per visibilità e hosting gratuiti per le tue applicazioni.