Como hospedar um site Angular usando Netlify e GitHub

Ao hospedar um site Angular online, você pode escolher entre várias plataformas disponíveis. Um deles que você pode usar gratuitamente é o Netlify.

Se você armazenar uma cópia do código-fonte do seu site em um repositório GitHub, poderá usar o Netlify para hospedar esse site.

O Netlify também reimplementa automaticamente seu site quando você envia novas alterações para a ramificação do repositório que você está hospedando.

Como criar um aplicativo angular de exemplo básico

Você pode criar um aplicativo Angular simples usando um editor como o Visual Studio Code. Você pode hospedar este site usando o Netlify.

1. Criar uma novo aplicativo Angular.
2. Crie uma página inicial simples. Substitua o código no app.component.html
   instagram viewer
   arquivo com o seguinte conteúdo da página de destino:

   <classe div ="cabeçalho container-dark">
   <h2>Nosso site de negócios</h2>
   </div>
   <classe div ="recipiente branco">
   <classe div ="contente">
   <h2>Nosso site de negócios</h2>
   <p>Aprenda a projetar, desenvolver e manter seu site profissional rapidamente.</p>
   </div>
   </div>
   <classe div ="recipiente-laranja">
   <classe div ="contente">
   <h2>O que nós fazemos</h2>
   <p>Damos-lhe as ferramentas para desenvolver websites e soluções únicas para os seus clientes. Também oferecemos treinamento para
    manutenção e outros tópicos relacionados ao site.</p>
   </div>
   </div>
   <classe div ="recipiente branco">
   <classe div ="contente">
   <h2>Sobre nós</h2>
   <p>Somos uma pequena empresa operando em Melbourne, na Austrália. Nossos espaços são criados exclusivamente para que os clientes também possam
    visite-nos pessoalmente.</p>
   </div>
   </div>
   <classe div ="rodapé container-dark">
   <p>Direitos autorais 2022</p>
   </div>

3. Adicione algum estilo ao aplicativo Angular adicionando algum CSS ao app.component.css arquivo:

   * {
    família de fontes: "arial", sem serifa;
   }
   .cabeçalho {
    preenchimento: 30px 50px;
   }
   .rodapé {
    preenchimento: 5px 50px;
    alinhamento de texto: centro;
   }
   .container-dark {
    cor de fundo: #202C39;
    cor branca;
    exibição: flexível;
    itens de alinhamento: centro;
   }
   .container-laranja {
    cor de fundo: #FFD091;
    cor: #202C39;
   }
   .container-white {
    cor de fundo: branco fumaça;
    cor: #202C39;
   }
   .contente {
    preenchimento: 100px 25%;
    exibição: flexível;
    flex-direction: coluna;
    altura da linha: 2rem;
   tamanho da fonte: 1.2em;
    itens de alinhamento: centro;
    alinhamento de texto: centro;
   }

4. Adicione algum estilo para o aplicativo Angular geral em estilos.css:

   corpo {
    margem: 0;
    preenchimento: 0;
   }

5. Para testar o aplicativo, navegue até sua pasta raiz usando um terminal ou linha de comando. Digite o ng servir comando:

   ng servir

6. Aguarde a compilação do seu código e visite http://localhost: 4200/ em um navegador da web para visualizar seu aplicativo.
7. No .browserslistrc arquivo, remova iOS Safari versão 15.2-15.3. Isso evitará que erros de compatibilidade sejam exibidos no console quando você criar o projeto.

   última 1 versão do Chrome
   última 1 versão do Firefox
   últimas 2 versões principais do Edge
   últimas 2 versões principais do Safari
   últimas 2 versões principais do iOS
   Firefox ESR
   nãoios_saf 15.2-15.3
   nãosafári 15.2-15.3

8. Construa seu código usando o ng construir comando no terminal:

   ng construir

9. No .gitignore arquivo, remova ou comente o /dist linha. Removê-lo garantirá a dist. A pasta está no conjunto de arquivos que você envia por push para o repositório do GitHub.

   # /dist

Como enviar seu código angular para o GitHub

Você precisará armazenar seu código em um repositório remoto para o Netlify acessar o código-fonte.

Você pode criar um novo repositório no GitHub e enviar o código do seu site para esse repositório. Se você não estiver familiarizado com o GitHub, pode ser útil entender alguns dos Recursos básicos do GitHub primeiro.

1. Crie um novo repositório no GitHub. Você pode fazer isso fazendo login no GitHub e clicando em Novo.
2. Insira os detalhes do seu novo repositório. Dê a ele um nome como "netlify-app" e uma descrição. Não inicialize o repositório com um arquivo README, arquivo .gitignore ou licença.
3. Em um terminal em seu computador, navegue até o diretório onde você armazenou seu aplicativo Angular. Execute os seguintes comandos para inicializar sua pasta como um repositório git:

   git init
   adicionar git.
   git comprometer-se -m "primeiro comprometer-se"

4. Envie o código dentro desta pasta para o novo repositório remoto que você criou no GitHub. Segue o git remoto adicionar original, ramo git, e git push comandos fornecidos pelo GitHub em sua página de repositório remoto:

   git remoto adicionar original <Seu link do repositório do GitHub>
   git ramo -M principal
   git push -u origem principal

5. Você pode confirmar que o código do seu aplicativo Angular está agora em seu repositório GitHub remoto atualizando a página do repositório GitHub.

Como usar o Netlify para hospedar seu código

Para hospedar seu código usando o Netlify, você precisará fornecer acesso ao seu código-fonte do GitHub. Netlify então usará o dist. pasta do seu projeto Angular para publicar a versão construída do seu código.

Você pode definir todas essas configurações seguindo as etapas de configuração ao criar um novo site:

1. Faça login ou cadastre-se para Netlify. Você pode fazer isso usando suas credenciais do GitHub.
2. No painel principal e na página da lista de sites, expanda Adicionar novo sitee selecione Importar um projeto existente.
3. Selecione GitHub.
4. Clique em Configurar o Netlify no GitHub.
5. Clique em Instalar.
6. O Netlify exibirá uma lista de seus repositórios GitHub. Selecione aquele que você gostaria de hospedar. Por exemplo, se você nomeou seu repositório como "netlify-app", selecione "netlify-app" na lista.
7. Na tela de configuração, deixe o Proprietário, Filial para implantar, e Diretório base campos em seus valores padrão. Se você estiver publicando uma ramificação específica, como uma ramificação "Produção" separada, poderá adicioná-la ao Filial para implantar campo. Mudar o Comando de construção campo para "ng build". Para o Publicar diretório campo, digite dist/. Se você não sabe qual é o nome do projeto, pode navegar até a pasta dist do seu projeto para encontrá-lo lá. Por exemplo, "dist/netlify-app".
8. Clique em Implantar site.
9. Aguarde a conclusão da implantação. Isso pode levar alguns minutos e pode ser necessário atualizar a página. Se tudo correr bem, você poderá ver a implantação bem-sucedida na lista de implantações. Clique em sua implantação publicada, por exemplo, Produção: main@HEAD.
10. Clique no Implantação de produção aberta botão.
11. Agora você pode visualizar seu site em outra aba, usando uma URL no formato de .netlify.app. Se você estiver hospedando um site com vários redirecionamentos, talvez não consiga redirecionar para outras páginas. Neste caso, existe uma maneira de corrigir um redirecionamento com falha no Netlify. Se você quiser, você também pode modifique seu nome de domínio gratuito.

Hospedando seu site usando GitHub e Netlify

Felizmente, agora você pode hospedar um site com sucesso usando o GitHub e o Netlify. Você pode configurar implantações automáticas para determinadas ramificações de um repositório GitHub. Dessa forma, você pode automatizar e agilizar a implantação do seu site.

Mas o Netlify não é a única maneira de implantar um aplicativo Angular online. Você também pode usar outras plataformas, como o GitHub Pages.