Pesquisa de site

Como hospedar um site Angular usando Netlify e GitHub


Hospede seu site Angular gratuitamente usando este processo fácil.

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 reimplanta 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 então hospedar este site usando Netlify.

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

    <div class="container-dark header">
      <h2>Our Business Website</h2>
    </div>
    <div class="container-white">
      <div class="content">
        <h2>Our Business Website</h2>
        <p>Learn how to design, develop, and maintain your professional website in no time.</p>
      </div>
    </div>
    <div class="container-orange">
      <div class="content">
        <h2>What We Do</h2>
        <p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
          maintenance and other website related topics.</p>
      </div>
    </div>
    <div class="container-white">
      <div class="content">
        <h2>About Us</h2>
        <p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
          visit us in person.</p>
      </div>
    </div>
    <div class="container-dark footer">
      <p>Copyright 2022</p>
    </div>
  3. Adicione estilo ao aplicativo Angular adicionando CSS ao arquivo app.component.css:

    * {
      font-family: "Arial", sans-serif;
    }
    .header {
      padding: 30px 50px;
    }
    .footer {
      padding: 5px 50px;
      text-align: center;
    }
    .container-dark {
      background-color: #202C39;
      color: white;
      display: flex;
      align-items: center;
    }
    .container-orange {
      background-color: #FFD091;
      color: #202C39;
    }
    .container-white {
      background-color: whitesmoke;
      color: #202C39;
    }
    .content {
      padding: 100px 25%;
      display: flex;
      flex-direction: column;
      line-height: 2rem;
      font-size: 1.2em;
      align-items: center;
      text-align: center;
    }
  4. Adicione algum estilo para o aplicativo Angular geral em styles.css:

    body {
      margin: 0;
      padding: 0;
    }
  5. Para testar o aplicativo, navegue até sua pasta raiz usando um terminal ou linha de comando. Digite o comando ng serve :

    ng serve
  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 arquivo .browserslistrc, remova o iOS safari versão 15.2-15.3. Isso evitará que erros de compatibilidade sejam exibidos no console quando você criar o projeto.

    last 1 Chrome version
    last 1 Firefox version
    last 2 Edge major versions
    last 2 Safari major versions
    last 2 iOS major versions
    Firefox ESR
    not ios_saf 15.2-15.3
    not safari 15.2-15.3
  8. Construa seu código usando o comando ng build no terminal:

    ng build
  9. No arquivo .gitignore , remova ou comente a linha /dist . Removê-lo garantirá que a pasta dist esteja no conjunto de arquivos que você envia para seu repositório GitHub.

    # /dist

Como enviar seu código Angular para o GitHub

Você precisará armazenar seu código em um repositório remoto para que o Netlify acesse 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 primeiro alguns dos recursos básicos do GitHub.

  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 do 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
    git add .
    git commit -m "first commit"

  4. Envie o código dentro desta pasta para o novo repositório remoto que você criou no GitHub. Siga os comandos git remote add original, git branch e git push fornecidos pelo GitHub na página do seu repositório remoto:

    git remote add original <Your GitHub repo link>
    git branch -M main
    git push -u origin main

  5. Você pode confirmar se 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 Netlify, você precisará conceder acesso ao código-fonte do GitHub. O Netlify usará então a pasta dist 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 no 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 site e selecione Importar um projeto existente.

  3. Selecione GitHub.

  4. Clique em Configurar Netlify no GitHub.

  5. Clique em Instalar.

  6. 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 os campos Proprietário, Filial a ser implantada e Diretório base com seus valores padrão. Se você estivesse publicando um branch específico, como um branch de "Produção" separado, você poderia adicioná-lo no campo Branch to deploy. Altere o campo Comando de compilação para "ng build".

  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 na sua implantação publicada, por exemplo, Produção: main@HEAD.

  10. Clique no botão Abrir implantação de produção .

  11. Agora você pode visualizar seu site em outra aba, usando uma URL no formato .netlify.app. Se você estiver hospedando um site com vários redirecionamentos, talvez não consiga redirecionar para outras páginas. Nesse caso, existe uma maneira de corrigir uma falha de redirecionamento no Netlify. Se desejar, você também pode modificar seu nome de domínio gratuito.

Hospedando seu site usando GitHub e Netlify

Esperançosamente, agora você pode hospedar um site com sucesso usando GitHub e Netlify. Você pode configurar implantações automáticas em 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 GitHub Pages.

Artigos relacionados: