Back-End

30 jan, 2019

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

100 visualizações
Publicidade

Netlify é uma plataforma que permite automatizar o processo de deploy de aplicações estáticas, combinando integração contínua 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 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!