Existem dois métodos principais de desenvolvimento de aplicativos da web: páginas múltiplas e página única. A abordagem de várias páginas geralmente funciona com uma tecnologia de back-end fortemente acoplada, como PHP ou.NET MVC.

Um aplicativo da web típico de uma única página tem um back-end fracamente acoplado. Em outras palavras, os aplicativos da web de página única dividiram o código do lado do cliente e do lado do servidor.

Hoje em dia, a abordagem de desenvolvimento de página única é popular porque traz fatores de maior capacidade de manutenção, uma experiência de usuário impressionante e bom suporte de cache. Estruturas de front-end como Angular, React, Svelte e Vue.js podem ser usadas para o desenvolvimento de aplicativos da Web em uma única página.

No entanto, precisamos ter um servidor de arquivos estático para publicar o código do lado do cliente de um determinado aplicativo de página única na Internet. Você pode criar seu próprio servidor de arquivos estáticos em um serviço de nuvem ou usar um serviço de hospedagem de arquivos estáticos como o GitHub Pages, que é um serviço gratuito com muitos benefícios.

Neste tutorial, vou mostrar como você pode implantar seu aplicativo Angular nas páginas do GitHub.

Benefícios das páginas GitHub

GitHub Pages é um serviço gratuito que permite aos desenvolvedores implantar seus repositórios de código como estáticos sites. Em outras palavras, você pode expor seu HTML, JavaScript e conteúdo da web semelhante a CSS como um site por meio de um repositório GitHub ao usar as páginas do GitHub e também pode acessar todos os outros benefícios e serviços do GitHub. Por exemplo, você pode integrar as Ações GitHub para executar alguns testes de unidade Angular para seu aplicativo de página única.

Além disso, o GitHub Pages oferece um subdomínio github.io gratuito. Se você já tem um nome de domínio, também pode usá-lo facilmente.

Criação de um aplicativo de página única com Angular

Se você já tem um aplicativo Angular que deseja usar neste tutorial, você pode pular para a próxima seção .

O Angular oferece uma CLI que podemos usar para criar e gerenciar aplicativos Angular. O Angular CLI também gera códigos iniciais automaticamente para os esquemas fornecidos. Digite o seguinte comando para instalar o CLI.

 $ npm install-g @ angular/cli

Em seguida, insira o seguinte comando para criar um novo aplicativo.

 $ ng novo nome do seu aplicativo

Depois que os arquivos iniciais forem criados, você pode iniciar o servidor de desenvolvimento local para ver seu aplicativo recém-criado.

 $ cd nome do seu aplicativo
$ ng serve--aberto

Depois disso, implemente seu aplicativo da web criando componentes como desejar. Você pode testar a lógica do aplicativo sem nem mesmo recarregá-lo totalmente, porque o Angular oferece suporte para recarregamento de módulo dinâmico.

Implantar seu aplicativo Angular nas páginas do GitHub

Para começar, você precisará criar um repositório GitHub para seu site estático. Se você ainda não armazenou seu código no GitHub, crie um novo repositório. Se você precisa ter seu site funcionando na raiz de seu subdomínio github.io , nomeie seu repositório como .github.io . Caso contrário, seu site será publicado em .github.io/ . Você também pode usar um domínio personalizado como nome para o repositório GitHub.

Por padrão, o Angular CLI inicializa um repositório Git para você. Portanto, você precisa adicionar uma nova referência remota apontando para seu novo repositório GitHub para enviar seu código e arquivos estáticos.

Insira o código a seguir para definir uma nova referência remota.

 $ git remote add origin https://github.com//.git

Como o Angular CLI sozinho não oferece suporte para as implantações do GitHub Pages, você precisará adicionar a biblioteca externa do Angular GitHub Pages digitando o seguinte comando:

 $ ng add angular-cli-ghpages

O comando acima estenderá a CLI adicionando o suporte à implantação do GitHub Pages.

Agora a CLI está pronta para implantar seu aplicativo nas páginas do GitHub. Você pode usar o comando implantar para implantar seu aplicativo Angular atual, conforme mostrado abaixo.

 $ ng deploy--base-href=//

O comando acima irá construir seu aplicativo e enviar os arquivos estáticos finais para o branch gh-pages . Após a primeira implantação bem-sucedida, o GitHub ativará automaticamente o recurso GitHub Pages para o novo repositório. Mais informações estão disponíveis na guia Configurações , na seção Páginas do GitHub, conforme mostrado abaixo.

Guia Configurações nas páginas GitHub

Seu site deve estar acessível através de https://;.github.io/ . Você pode ver que o aplicativo de exemplo que criei está ativo:

Exemplo de aplicativo está ativo

Quando passar um URL base

A opção --base-href no comando deploy definirá a tag HTML com o href propriedade. Se você estiver publicando seu aplicativo na raiz de seu subdomínio github.io ou em um domínio personalizado, não precisa passar esse valor porque, por padrão, o navegador tentará carregar recursos de o diretório raiz. No entanto, se você precisar publicar um aplicativo Angular em um local sem raiz, como nos exemplos a seguir, deverá mencionar explicitamente o URL base. Caso contrário, o navegador não será capaz de carregar os recursos do seu aplicativo corretamente.

  • Para yourcustomdomain.com/angularapp , o URL base deve ser /angularapp/
  • Para seunomedeusuario.github.io/myapp , o URL base deve ser /myapp/

Conforme mencionado acima, se você estiver implantando seu aplicativo em um subdiretório de domínio personalizado, deverá usar o subdiretório como URL base.

Construindo seu fluxo de trabalho de desenvolvimento

Os aplicativos da web geralmente precisam de atualizações, melhorias e extensões frequentes, o que exige a alteração dos códigos-fonte dos nossos aplicativos de vez em quando. Depois de concluir nossas atualizações, temos que implantar nossas alterações nas páginas do GitHub. Podemos usar a ramificação principal para manter a fonte de seu aplicativo. Como de costume, o branch gh-pages é revertido para os arquivos estáticos finais.

Alternando branches no GitHub Pages

Como toda equipe de desenvolvimento faz, podemos configurar diferentes branches para nossos requisitos de desenvolvimento.

Limitações e conclusões

Como um serviço gratuito, o GitHub Pages vem com algumas pequenas limitações. O tamanho do conteúdo estático é limitado a 1 GB, então você não poderá fazer upload de arquivos de mídia enormes. As páginas do GitHub também têm um limite de largura de banda mensal de 100 GB.

Páginas do GitHub não recomenda seu serviço para hospedagem de sites de comércio eletrônico, mas a ferramenta ainda é ótima para desenvolvedores que desejam publicar aplicativos da web de código aberto, como serviços para desenvolvedores, documentações, jogos, páginas de destino, blogs e outros tipos de conteúdo. Se você está procurando uma pilha de soluções um pouco mais robusta, LAMG pode ajudá-lo a implantar um aplicativo completo de uma única página no GitHub Pages com back-end de graça.

A postagem Como implantar aplicativos angulares de página única para As páginas do GitHub apareceram primeiro no LogRocket Blog .