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.