Introducción a Gatsby.js en Windows

Una guía para ayudarle a instalar el marco web de Gatsby.js y ponerse en marcha en Windows.

Gatsby.js es un framework de generación de sitios estáticos basado en React.js, en lugar de ser renderizado como Next.js. Un generador de sitios estáticos genera HTML estático en tiempo de compilación. No requiere un servidor. Next.js genera HTML en tiempo de ejecución (cada vez que entra una nueva solicitud), lo que requiere que se ejecute un servidor. Gatsby también determina cómo controlar los datos de la aplicación (con GraphQL), mientras que Next.js deja esa decisión para usted.

Para obtener más información sobre React y otros marcos de JavaScript basados en React, consulte la página de descripción general de React .

Prerrequisitos

En esta guía se da por supuesto que ya has completado los pasos para configurar el entorno de desarrollo de Node.js, que incluyen:

• Instalar la versión más reciente de Windows 10 (versión 1903+, compilación 18362 o posterior) o Windows 11
• Instale el Subsistema de Windows para Linux (WSL), incluida una distribución de Linux (como Ubuntu), y asegúrese de que se ejecuta en modo WSL 2. Para comprobarlo, abre PowerShell y escribe: wsl -l -v.
• Instale Node.js en WSL 2: aquí se incluye un administrador de versiones, un administrador de paquetes, Visual Studio Code y la extensión de Remote Development.

Se recomienda usar el Subsistema de Windows para Linux al trabajar con aplicaciones NodeJS para mejorar la velocidad de rendimiento, la compatibilidad de llamadas del sistema y para la parodia al ejecutar servidores Linux o contenedores de Docker.

Importante

La instalación de una distribución de Linux con WSL creará un directorio para almacenar archivos: \\wsl\Ubuntu-20.04 (sustituya Ubuntu-20.04 por la distribución de Linux que vaya a usar). Para abrir este directorio en el Explorador de archivos de Windows, abra la línea de comandos de WSL, seleccione el directorio principal con cd ~ y, a continuación, escriba el comando explorer.exe .. Tenga cuidado de no instalar NodeJS ni almacenar archivos con los que vaya a trabajar en la unidad C montada (/mnt/c/Users/yourname$). Si lo hace, ralentizará significativamente los tiempos de instalación y compilación.

Instalar Gatsby.js

Para crear un proyecto de Gatsby.js:

1. Abra el terminal WSL (es decir, Ubuntu).

2. Cree una carpeta de proyecto: mkdir GatsbyProjects y escriba ese directorio: cd GatsbyProjects

3. Use npm para instalar la CLI de Gatsby: npm install -g gatsby-cli. Una vez instalado, compruebe la versión con gatsby --version.

4. Crea tu proyecto de Gatsby.js: gatsby new my-gatsby-app

5. Una vez instalado el paquete, cambie al directorio de su nueva carpeta de la aplicación, cd my-gatsby-app, y luego use code . para abrir el proyecto de Gatsby en VS Code. Esto le permitirá examinar el marco de Gatsby.js que se ha creado para la aplicación mediante el Explorador de archivos de VS Code. Ten en cuenta que VS Code ha abierto la aplicación en un entorno de WSL remoto (como se indica en la pestaña verde en la parte inferior izquierda de la ventana de VS Code). Esto significa que mientras usa VS Code para su edición en el sistema operativo Windows, sigue ejecutando la aplicación en el sistema operativo Linux.

   

6. Hay 3 comandos que debe saber una vez instalado Gatsby:

   • gatsby develop para ejecutar una instancia de desarrollo con recarga en caliente.
   • gatsby build para crear una compilación de producción.
   • gatsby serve para iniciar la aplicación en modo de producción.

   Abra el terminal de WSL integrado en VS Code (Ver > Terminal). Asegúrate de que la ruta de acceso del terminal apunta al directorio del proyecto (es decir, ~/GatsbyProjects/my-gatsby-app$). A continuación, pruebe a ejecutar una instancia de desarrollo de la nueva aplicación mediante: gatsby develop

7. Una vez que el nuevo proyecto de Gatsby termine de compilarse, el terminal mostrará.You can now view gatsby-starter-default in the browser. http://localhost:8000/ Seleccione este vínculo localhost para ver el nuevo proyecto integrado en un explorador web.

Nota:

Observará que la salida del terminal también le informa que puede "Ver GraphiQL, un IDE en el explorador, para explorar los datos y el esquema del sitio: http://localhost:8000/___graphql". GraphQL consolida las API en un IDE de autodocumentación (GraphiQL) integrado en Gatsby. Además de explorar los datos y el esquema del sitio, puede realizar operaciones de GraphQL, como consultas, mutaciones y suscripciones. Para obtener más información, consulta Presentación de GraphiQL.

8. Abre el archivo src/pages/index.js en el editor de VS Code. Busque el título <h1>Welcome to <b>Gatsby!</b></h1> de la página y cámbielo a <h1>Hello <b>World!</b></h1>. Con el explorador web todavía abierto en http://localhost:8000, guarde el cambio y observe que la característica de recarga activa compila y actualiza automáticamente el cambio en el explorador.

   

Para usar el depurador de VS Code con la aplicación de Gatsby, seleccione la tecla F5 o vaya a Ver > depuración (Ctrl+Mayús+D) y Ver > consola de depuración (Ctrl+Mayús+Y) en la barra de menús. Si selecciona el icono de engranaje en la ventana de depuración, se creará un archivo de configuración de inicio (launch.json) para que pueda guardar los detalles de la configuración de depuración. Para obtener más información, consulte VS Code Debugging.

Para más información sobre Gatsby, consulte los documentos deGatsby.js.