Gerador de sites estáticos com Angular? Conheça o Scully.
Tags: português, angular, jamstack, scully
Published: 2022-01-18 12:32:41

---
title: Gerador de sites estáticos com Angular? Conheça o Scully.
published: true
date: 2021-02-10 00:02:29 UTC
tags: português,angular,jamstack,scully
canonical_url: https://ricardo-mello.medium.com/gerador-de-sites-est%C3%A1ticos-com-angular-conhe%C3%A7a-o-scully-59ebe9f79fdd
---

#### A prova de que a roda da tecnologia vive girando

![](https://cdn-images-1.medium.com/max/712/0*FNzi0gE30yRmPo0o.png)

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

![](https://cdn-images-1.medium.com/max/1024/0*ViQPyzxUNX9Aj1kT.jpg)<figcaption>Os sites na época dos dinossauros</figcaption>

### 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](http://jamstack.org/what-is-jamstack/) (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/](http://localhost:1668/) no navegador e antes de apertar o Enter a página é renderizada na velocidade da luz.

<img src="https://media.giphy.com/media/Mo0XNBGMKQtYtv5Jq9/giphy.gif">

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.