Implantar aplicativos Angular em páginas do GitHub é uma ótima maneira de hospedá-los gratuitamente. Angular é uma estrutura JavaScript popular para criar aplicativos de página única.

O Angular possui uma interface de linha de comando abrangente que oferece suporte à criação e configuração rápidas de aplicativos JavaScript. A CLI Angular possui vários comandos para criar, construir, servir e gerar componentes de aplicativos.

Você também pode usar a CLI para implantar aplicativos Angular em vários destinos, incluindo páginas do GitHub.

O que você precisa

Para aproveitar ao máximo este guia, você precisa ter as seguintes habilidades e ferramentas:

  • Você deve estar familiarizado com noções básicas de angular, como o conceito de aplicativos, configurações, URLs, etc.
  • você está familiarizado com o básico do GitHub e Git, como criar uma conta GitHub, criar um repositório git (repo) e páginas GitHub (páginas GH).
  • Você tem um aplicativo Angular pronto para implantar.
  • Sua URL base está no caminho correto. As implantações nas páginas GH falham devido à configuração do base-href errado (base-url).
  • Uma conta do GitHub.
  • Um repositório GitHub (repo) com o código do aplicativo.

Agora que você tem tudo isso pronto, vamos iniciar o processo de implantação.

Processo de implantação

Para começar, você deve ter criado um repositório GitHub para seu projeto e enviado o código para o principal/mestre filial.

Em seguida, crie uma ramificação de páginas GH.

1. Criar uma ramificação de páginas GH

Este é um hack que o ajudará a obter o link das páginas GH para ajudar a definir o base-href.

Primeiro, crie páginas GH em seu repositório local com o seguinte comando:

git branch gh-pages

Em seguida, faça check-out da ramificação principal para as páginas GH para transferir todo o código.

git checkout gh-pages

Em seguida, envie GH-pages para o GitHub para criar uma ramificação remota de GH-pages.

git push origin gh-pages

Na barra de ferramentas abaixo do nome do repositório, clique em Configurações > Páginas.

Sob Criação e implantação, selecione Implantar de uma ramificação. Em seguida, selecione páginas gh como o nome da ramificação e clique em Salvar. Isso criará um link de páginas GH no canto superior direito sob o rótulo de páginas GH.

Em seguida, copie este link para o site publicado conforme ilustrado abaixo. Você usará o link para configurar o base-ref durante a implantação.

3. Instalar Angular-CLI-GHpages

O pacote angular-cli-ghpages é uma ferramenta que o Angular CLI usa para fins de implantação.

Navegue de volta ao seu repositório de projeto local. Em seguida, instale e execute angular-cli-ghpages com este comando:

ng add angular-cli-ghpages

4. Implantar o aplicativo

Para construir o aplicativo em produção, você deve conectá-lo a um servidor remoto no GitHub.

Configure seu aplicativo para um servidor remoto executando o seguinte comando:

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

Lembre-se de substituir o link acima pelo link ao vivo das páginas do GH

Uma compilação bem-sucedida se parecerá com a ilustração abaixo:

Em seguida, navegue até o GitHub e clique no link GH-pages para ver seu projeto implantado.

Parabéns, você implantou seu aplicativo Angular!

Se o link exibir apenas o arquivo README, volte para as configurações do GitHub GH-pages. Assegure-se de que a ramificação selecionada seja gh-pages e não a ramificação principal ou mestre. Em seguida, dê cinco minutos e recarregue. Às vezes, o GitHub leva tempo para refletir as alterações.

Para saber mais sobre como você pode usar o Angular CLI na implantação, visite o documentação angular.

Como implantar um aplicativo Angular nas páginas do GitHub

Existem várias maneiras de implantar aplicativos Angular em páginas GH, mas esse método é o mais fácil. Você configura o link do repositório GH-pages e o usa com o Angular-CLI para implantar seu aplicativo nas páginas do GitHub.

Há muito mais que você pode fazer com Angular e Angular CLI. Sinta-se à vontade para explorar. Use a CLI para implantar aplicativos em páginas GH para visibilidade e hospedagem gratuitas para seus aplicativos.