Criar um aplicativo estático com o Gatsby

  • 2 minutos

Os sites estáticos existem desde o início da Web. Em essência, eles são compostos por HTML, CSS e JavaScript, que são fornecidos ao usuário. Um Gerador de Site Estático é uma ferramenta que pode obter ferramentas de nível superior e gerar ativos estáticos.

O Gatsby é uma dessas ferramentas que podemos usar para criar um site estático. Ele usa o React como uma camada de interface do usuário e o GraphQL como uma linguagem de consulta para acessar os dados disponíveis no site.

O Gatsby é construído sobre o React e o React Router, que permitem misturar partes dinâmicas e estáticas. Portanto, embora seja basicamente uma ferramenta para produzir sites estáticos, ele é totalmente capaz de compilar um projeto do React. Por isso, o Gatsby pode substituir a configuração normal para produzir aplicativos com o React, desde que você tenha parte do aplicativo React que deseja tornar estático.

O Gatsby tem um sistema inteligente de plug-ins que pode ajudar a importar dados de diversos tipos de fontes de dados. As fontes de dados podem ser tão variadas quanto bancos de dados ou até JSON no sistema de arquivos local. Todos esses dados importados podem ser combinados com ativos estáticos, como HTML e CSS, para produzir as páginas estáticas que você deseja disponibilizar aos usuários. Graças ao sistema de plug-in, tipos cada vez mais diferentes de fontes de dados estão recebendo suporte conforme a comunidade ou a equipe do Gatsby escreve novos plug-ins.

Como o Gatsby faz isso? Na fase de pré-compilação, cada plug-in examina uma fonte. Uma fonte pode ser um sistema de arquivos, um banco de dados ou, por exemplo, um conjunto de arquivos JSON. Os dados são lidos e adicionados a um grafo de dados. O Graph é uma árvore de nós em memória que você pode consultar. O Gatsby permite que você consulte esses nós ao criar páginas estáticas em seu aplicativo.

Instalação e uso do Gatsby

O Gatsby está disponível por meio do pacote gatsby-cli JavaScript. Você tem duas maneiras de usá-lo:

  • Instalação global, execute npm install gatsby-cli -g, isso instalará o arquivo executável gatsby no computador. Agora, você pode usar o Gatsby dessa maneira no terminal: gatsby <command>.
  • Use npx, npx é uma ferramenta que possibilita executar arquivos executáveis sem instalá-los primeiro no computador. Se você usar essa maneira de instalação, precisará prefixar suas chamadas para Gatsby como npx gatsby <command>.

Esses três comandos ajudarão você a começar a trabalhar com um novo aplicativo Gatsby:

  • gatsby new <project name> <optional GitHub URL>: Use este comando para gerar um novo projeto. Ele usa um nome como um argumento obrigatório e, opcionalmente, uma URL do GitHub como o segundo argumento. Usar o último argumento criará um projeto Gatsby com base em um projeto Gatsby existente no GitHub.
  • gatsby develop: Inicie um servidor de desenvolvimento no qual o projeto possa ser acessado. Um servidor de desenvolvimento é um servidor HTTP capaz de hospedar os arquivos para que você possa acessá-los no navegador. Você encontrará o aplicativo Gatsby em execução em http://localhost:8000. Ele também iniciará uma instância do GraphQL, que é uma ferramenta de desenvolvimento gráfico que pode ser usada para explorar os dados disponíveis no seu aplicativo e criar consultas. Use o GraphQL navegando até http://localhost:8000/___graphql.
  • gatsby build: Crie uma representação estática implantável do aplicativo. Todos os HTML, JavaScript e CSS resultantes ficarão no subdiretório public.

Anatomia do projeto

Um projeto Gatsby com scaffold consiste em cinco partes diferentes que você precisa entender para trabalhar com o Gatsby de maneira eficaz e eficiente.

  • /pages: os componentes do React colocados neste diretório se tornarão rotas e páginas.
  • gatsby-config.js: Um arquivo de configuração. Parte da configuração será usada para configurar e configurar plug-ins e parte disso representa dados globais que você pode renderizar nas páginas.
  • gatsby-node.js: Um arquivo usado para implementar métodos de ciclo de vida da API Gatsby. Aqui, você pode fazer coisas como fornecer arquivos, adicionar/atualizar nós ao grafo do Gatsby e até mesmo inserir dados de fora que devem fazer parte do site.
  • /styles: O Gatsby permite que você aplique estilos de várias maneiras, desde os módulos importados de CSS, SASS e LESS até de CSS.
  • /components: um diretório destinado a componentes auxiliares do React, como cabeçalho, layout e muito mais.