Introdução ao Gatsby.js no Windows

Um guia para ajudá-lo a instalar o framework web Gatsby.js e começar a utilizá-lo no Windows.

Gatsby.js é um framework de geração de sites estáticos baseado em React.js, em vez de ser renderizado pelo servidor como Next.js. Um gerador de site estático gera HTML estático no tempo de compilação. Não requer um servidor. Next.js gera HTML em tempo de execução (cada vez que uma nova solicitação chega), exigindo que um servidor seja executado. Gatsby também dita como lidar com dados em seu aplicativo (com o GraphQL), enquanto Next.js deixa essa decisão para você.

Para saber mais sobre o React e outras estruturas JavaScript baseadas no React, consulte a página de visão geral do React .

Pré-requisitos

Este guia pressupõe que você já tenha concluído as etapas para configurar seu ambiente de desenvolvimento Node.js, incluindo:

• Instale a versão mais recente do Windows 10 (Versão 1903+, Build 18362+) ou Windows 11
• Instale o Windows Subsystem for Linux (WSL), incluindo uma distribuição Linux (como o Ubuntu) e certifique-se de que está a ser executado no modo WSL 2. Você pode verificar isso abrindo o PowerShell e digitando: wsl -l -v
• Instalar Node.js no WSL 2: Isso inclui um gerenciador de versões, gerenciador de pacotes, Visual Studio Code e a extensão de desenvolvimento remoto.

Recomendamos o uso do Subsistema Windows para Linux ao trabalhar com aplicativos NodeJS para melhor velocidade de desempenho, compatibilidade de chamadas do sistema e paródia ao executar servidores Linux ou contêineres Docker.

Importante

Instalar uma distribuição Linux com WSL criará um diretório para armazenar arquivos: \\wsl\Ubuntu-20.04 (substitua o Ubuntu-20.04 por qualquer distribuição Linux que você esteja usando). Para abrir este diretório no Explorador de Arquivos do Windows, abra a linha de comando WSL, selecione o diretório base usando cd ~e digite o comando explorer.exe . Tenha cuidado para não instalar o NodeJS ou armazenar arquivos com os quais você trabalhará na unidade C montada (/mnt/c/Users/yourname$). Isso diminuirá significativamente os tempos de instalação e construção.

Instalar Gatsby.js

Para criar um projeto Gatsby.js:

1. Abra o seu terminal WSL (ou seja, Ubuntu).

2. Crie uma nova pasta de projeto: mkdir GatsbyProjects e insira esse diretório: cd GatsbyProjects

3. Use npm para instalar a CLI do Gatsby: npm install -g gatsby-cli. Uma vez instalado, verifique a versão com gatsby --version.

4. Crie o seu projeto Gatsby.js: gatsby new my-gatsby-app

5. Depois que o pacote tiver sido instalado, altere os diretórios para sua nova pasta de aplicativo e, em seguida, cd my-gatsby-appuse code . para abrir seu projeto Gatsby no VS Code. Isso permitirá que você veja a estrutura de Gatsby.js que foi criada para seu aplicativo usando o Explorador de Arquivos do VS Code. Observe que o VS Code abriu seu aplicativo em um ambiente WSL-Remote (conforme indicado na guia verde no canto inferior esquerdo da janela do VS Code). Isso significa que, enquanto você estiver usando o VS Code para edição no sistema operacional Windows, ele ainda está executando seu aplicativo no sistema operacional Linux.

   

6. Existem 3 comandos que você precisa saber uma vez que o Gatsby é instalado:

   • gatsby develop para executar uma instância de desenvolvimento com hot-reloading.
   • gatsby build para criar uma compilação de produção.
   • gatsby serve para iniciar seu aplicativo no modo de produção.

   Abra o terminal WSL integrado no VS Code (View > Terminal). Certifique-se de que o caminho do terminal está apontado para o diretório do projeto (isto é, ~/GatsbyProjects/my-gatsby-app$). Em seguida, tente executar uma instância de desenvolvimento do seu novo aplicativo usando: gatsby develop

7. Assim que o seu novo projeto Gatsby terminar de compilar, o seu terminal será exibido.You can now view gatsby-starter-default in the browser. http://localhost:8000/ Selecione este link localhost para exibir seu novo projeto criado em um navegador da Web.

Observação

Você notará que a saída do seu terminal também permite que você saiba que você pode "Ver o GraphiQL, um IDE no navegador, para explorar os dados e o esquema do seu site: http://localhost:8000/___graphql." O GraphQL consolida suas APIs em um IDE autodocumentável (GraphiQL) integrado ao Gatsby. Além de explorar os dados e o esquema do seu site, você pode executar operações do GraphQL, como consultas, mutações e assinaturas. Para obter mais informações, consulte Apresentando o GraphiQL.

8. Abra o src/pages/index.js arquivo no editor do VS Code. Localize o título <h1>Welcome to <b>Gatsby!</b></h1> da página e altere-o para <h1>Hello <b>World!</b></h1>. Com o seu navegador da Web ainda aberto para http://localhost:8000, salve a sua alteração e observe que o recurso de recarregamento instantâneo compila e atualiza automaticamente a sua alteração no navegador.

   

Você pode usar o depurador do VS Code com seu aplicativo Gatsby selecionando a tecla F5 ou indo para View > Debug (Ctrl+Shift+D) e View > Debug Console (Ctrl+Shift+Y) na barra de menus. Se seleccionares o ícone de engrenagem na janela de Depuração, será criado um ficheiro de configuração de inicialização (launch.json) para guardar os detalhes da configuração de depuração. Para saber mais, consulte Depuração de código VS.

Para saber mais sobre Gatsby, consulte os Gatsby.js documentos.