Criar um aplicativo estático com o Gatsby

Concluído

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 SSG (Gerador de Site Estático) é uma ferramenta que pode ter ferramentas de nível superior e gerar esses 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. Dessa forma, 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 os bancos de dados para 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 a um usuário. Graças ao sistema de plug-in, tipos cada vez mais diferentes de fontes de dados podem ser compatíveis e ter suporte assim que a comunidade ou a equipe do Gatsby gravar um novo plug-in.

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 deixa você consultar esses nós quando continuar criando as páginas estáticas no 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 na máquina. Agora, você pode usar o Gatsby dessa maneira, 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 no endereço http://localhost:8000. Ele também iniciará uma instância do GraphiQL, que é uma ferramenta de desenvolvimento gráfico que pode ser usada para explorar os dados disponíveis no aplicativo e criar consultas. Você pode usar o GraphiQL 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 terminarão no subdiretório public.

Anatomia do projeto

Um projeto Gatsby com scaffold consiste em algumas partes 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. As páginas são descritas em mais detalhes abaixo.
  • 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: Para os componentes do React que significam componentes auxiliares, como cabeçalho, layout e muito mais.