Netlify, GitHub e Angular 7 – Hospedando uma aplicação

Netlify é uma plataforma que permite automatizar o processo de deploy de aplicações estáticas, combinando integração contínua↳CI/CD23 conteúdosCI/CD Mobile: o caos invisível que separa times comuns de times de alta performanceDev (Back & Front) · abr 2026Lambda: implementando com GitLab CI/CD e Terraform para Integração SFTP, S3 e Databricks em GoDev (Back & Front) · nov 2023Publicando sua aplicação Web Python no WebApp do Azure e configurando o CI/CD da sua aplicaçãoDevSecOps · abr 2019Ver tudo em DevSecOps → com HTTPS. Aqui você encontra um artigo muito interessante da Bruna Escudelario comentando o serviço.

Nesse artigo, eu apresento um tutorial para publicar uma aplicação desenvolvida com Angular↳Angular30 conteúdosCriando Micro Frontends Angular com Native FederationDev (Back & Front) · mar 2026Angular v21 e o Fim da Cobertura de Testes Exclusivamente em TypeScript: Por Que Precisamos Repensar os Testes de ComponentesDev (Back & Front) · jan 2026Angular 8 é lançado com builder APIs e suporte web workerDev (Back & Front) · mai 2019Ver tudo em Dev (Back & Front) → na versão 7. Você pode acessar a aplicação desenvolvida aqui.

Para começar, crie uma conta no site www.netilify.com, escolhendo a forma de autenticação:

Na próxima tela, vamos clicar no botão New site from Git. Note que é possível também arrastar uma pasta com sua aplicação.

A seguir, definiremos onde está o fonte da aplicação. No caso, a aplicação está no GitHub.

Será aberto uma página solicitando autorização para o serviço acessar o repositório no GitHub.

Continuando, a próxima seção solicita qual ou quais repositórios serão autorizados.

Após a confirmação, clique em cima do repositório. As últimas configurações são responsáveis pelo build da aplicação.

O comando de build é o que utilizamos para gerar os arquivos para produção.

> ng build  --prod

Em Publish directory, verifique o nome do diretório. O padrão em angular 7 é criar o nome do projeto na pasta dist.

Clique em Deploy Site e aguarde. É possível acompanhar o log do deploy.

Após finalizado, em caso de sucesso, já é possível acessar o site:

Concluindo, a plataforma atribuiu um nome para o site, mas é possível alterar clicando em Domain settings e nos três pontos:

Uma observação: quando sua aplicação possuir rotas, você deve criar um arquivo e nomear como _redirects no root do projeto com o conteúdo:

# src/_redirects
/* /index.html 200

E no arquivo angular.json, na propriedade options, adicionar o caminho:

“options”: {
 “outputPath”: “dist/flagviz”,
 “index”: “src/index.html”,
 “main”: “src/main.ts”,
 “polyfills”: “src/polyfills.ts”,
 “tsConfig”: “src/tsconfig.app.json”,
 “assets”: [
 “src/favicon.ico”,
 “src/assets”,
 “src/_redirects”
// Continuação do arquivo

O crédito para essas configurações é do autor Lev laz.

Muito fácil e rápido. Ah, não esqueça que por padrão a cada commit no master, sua aplicação é publicada.

Até mais!