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

Image for post
Image for post

Netlify é uma plataforma que permite automatizar o processo de deploy de aplicações estáticas, combinando integração contínua com HTTPS.

No imasters tem um artigo bem bacana da Bruna Escudelario comentando o serviço.

Nesse artigo eu apresento um tutorial para publicar uma aplicação desenvolvida com Angular na versão 7. Você pode acessar a aplicação desenvolvida aqui.

Crie uma conta no site www.netilify.com, escolhendo a forma de autenticação.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post

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:

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

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.

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store