Gerador de sites estáticos com Angular? Conheça o Scully.

A prova de que a roda da tecnologia vive girando

Lembra quando a gente fazia site estático? Muita gente hoje em dia nem deve saber o que é isso. Pois é, ELES VOLTARAM!!

Os sites na época dos dinossauros

Um pouquinho de história…

Lá nos primórdios da internet os sites eram feitos com apenas HTML e CSS. Depois veio o JavaScript. Frameworks como jQuery e MooTools reinavam e a gente criava site no Dreamweaver ou no FrontPage fatiando layout feito no Photoshop. Depois disso, vieram as páginas cliente-servidor, depois os famosos CMS (beijo pro Wordpress), depois as SPAs e agora a gente volta pro estático.

Se você alterasse o header num site estático, provavelmente ia passar o resto da semana alterando páginas e mais páginas HTML. Daí a gente usava umas tretas tipo frame/iframe pra poder separar o site em várias partes diferentes e no fim acabava ficando uma bosta, mas dava pra usar.

Porém, agora é diferente. Nós temos muito mais ferramentas do que antes. Todo Pokémon evolui e nos últimos anos o desenvolvimento front-end tem caminhado a passos largos rumo à maturidade que o nosso amigo back-end possui. No meio dessas parafernalhas fantásticas surge um conceito chamado Jamstack.

O que é o JamStack

Segundo o site oficial (em tradução livre): é uma arquitetura projetada para fazer a web mais rápida, mais segura e fácil de escalar. o JAM significa JavaScript + APIs + Markup.

Utilizando técnicas de pré-renderização para gerar arquivos estáticos e servi-los diretamente de um CDN, eliminamos a necessidade de utilizarmos servidores web. Isso permite que os sites e aplicações sejam entregues com confiança e resiliência nunca vistas antes.

Os grandes players

Next.js, Hugo, Gatsby, Jekyll… Você provavelmente já ouviu falar de um deles. Pra gente que é de Angular, fica complicado se aventurar do lado do React, do Go ou aprender um engine de template específico pra trabalhar somente com sites estáticos.

Não que a gente não deva sair da nossa zona de conforto e experimentar novas tecnologias. Porém, eu sou um cara preguiçoso e às vezes ficar de pantufas na zona de conforto pode ser gostosinho. É aí que entra o Scully.

O Scully

Esse cara é a aplicação do Jamstack utilizando Angular. Ele é tão monstro que detecta as rotas da aplicação utilizando Machine Learning e cria uma lista com elas. Depois ele percorre as rotas dessa lista gerando um index.html pra cada uma.

Como o resultado é estático, o site aparece INSTANTANEAMENTE pra geral. Depois que o seu usuário acessa a página, ele carrega o Angular em background e o usuário passa a estar acessando um SPA. Você fica com as features de uma SPA normal mas o seu usuário não precisa baixar tudo pra só depois a página ser renderizada. Primeiro ele vê a página pra depois baixar os JS/CSS do teu app.

Minha mãe diria que isso é colocar a carroça na frente dos bois, mas eu digo que é simplesmente o melhor de dois mundos.

Vamos começar!

Todo aprendizado começa pelo hello world e é isso que vamos abordar aqui agora.

Instalação

O Scully precisa de uma aplicação Angular pra rodar, então vamos começar com o nosso primeiro comando:

ng new blog --routing

Depois disso, vamos inicializar o Scully no projeto:

ng add @scullyio/init

Como o Schematics é lindo, o Scully já configura tudo o que é necessário para funcionar.

Build

Antes de executar o scully, precisamos rodar o build:

ng build --prod

Depois disso, vamos lá:

npm run scully

Feito! Você transformou seu app Angular em um site pré-renderizado que carrega na velocidade da luz. O conteúdo é gerado dentro da pasta ./dist/static e você pode fazer o deploy dela pro seu serviço favorito.

Cada rota é pré-renderizada e possui sua própria página. Isso significa que se você tiver 1000 rotas, vão ser 1000 arquivos index.html dentro da pasta ./dist/static

Executando o servidor local

Mas pera. É meio chato ter que subir um servidor web só pra testar né? Pra rodar o servidor local, o comando é esse aqui:

npm run scully:serve

Você digita http://localhost:1668/ no navegador e antes de apertar o Enter a página é renderizada na velocidade da luz.

Fonte: Giphy

Esse comando sobe dois servidores: Um com o output do Scully e o outro com o output do ng build. Assim, você pode comparar as duas versões da sua página sempre que precisar.

E o nosso hello world?

Só se for agora! Vamos no nosso arquivo src/app/app.component.html apagar toda aquela porcariada do Angular e adicionar o nosso conteúdo:

<h1>HELLO WORLD!</h1>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/3otPoS81loriI9sO8o" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/filmeditor-will-ferrell-elf-3otPoS81loriI9sO8o">via GIPHY</a></p>

Vamos rodar o combo ng build --prod && npm run scully:serve e pronto! Tá aí o hello world.

Observações

Eu sei que é chato ter que fazer build pra ver o resultado final, mas é porque o Scully trabalha basicamente nisso: o resultado final do seu app. Enquanto você estiver desenvolvendo, pode usar o ng serve mesmo. Terminou e quer ver como ficou antes de publicar a versão? Aí sim roda o Scully e dá uma olhada.