Gatsby Workshop

Introducción

Bueno, arranquemos viendo los requerimientos para correr todo:

Genial, si instalamos todo eso ya vamos a tener a nuestra disposición el CLI (Interfaz de Línea de Comandos) de Gatsby para poder hacer muchas cosas, veamos algunos comandos que nos ofrece y que vamos a usar seguido:

• gatsby new <Nombre_proyecto> <Starter_opcional>: Comando para empezar a hacer una web app en Gatsby en la carpeta Nombre_proyecto. Si queremos podemos definir un "starter", aunque si no ponemos nada, hay uno por default con una buena base de cosas preinstaladas.
• gatsby develop: Corre un entorno local de desarrollo para ver nuestra app.
• gatsby build: Genera una carpeta "public" con nuestra web app lista para producción.

Empecemos entonces creando nuestro proyecto en una carpeta que querramos, yo en este caso voy a llamarlo miPortfolio y voy a usar el starter por defecto, ustedes ponganle el nombre que más les guste 😀

gatsby new miPortfolio
cd miPortfolio

Tomémonos un segundo para abrir esta carpeta con nuestro proyecto en nuestro editor preferido de texto (VS Code en mi caso) y estudiemos un poco los archivos y las carpetas que tiene, nos va a servir saber qué hace cada cosa para no dar pasos en falso y que luego no tengamos dolores de cabeza intentando entender qué es lo que está pasando cuando modifiquemos cosas.

Archivos del proyecto

Empecemos por los archivos importantes propios de Gatsby, son esos 4 que están afuera de src:

• gatsby-config: Este es un archivo fundamental para nuestro proyecto, acá van a estar todas las configuraciones de nuestros plugins, además de la metadata de nuestra página y otras configuraciones generales.
• gatsby-node*: Todo el código que esté en este archivo va a correr durante el proceso de build de nuestra página. Se puede usar para crear páginas de forma dinámica, agregar nodos en GraphQL o responder a eventos que suceden durante el build.
• gatsby-browser*: Mediante este archivo vamos a poder responder a acciones dentro del browser y también nos permite wrappear nuestra página dentro de componentes. Nos permite interactuar con la parte client-side de Gatsby.
• gatsby-ssr*: Aquí podemos alterar el contenido de los HTML mientras están siendo Server-Side Rendered (SSR) (o renderizados del lado del servidor) por Gatsby y Node.js.

Cada uno de estos archivos tiene una entrada en las docs de Gatsby, si cliquean en los nombres de cada uno pueden leer más sobre cada uno.

Ahora, por qué todos tienen un asterisco salvo gatsby-config, se preguntarán? Bueno, es porque es el único estrictamente necesario para que nuestra página en Gatsby funcione, los otros tres son opcionales. Y si quieren leer más sobre las APIs disponibles en cada uno de los archivos opcionales, les dejo los links de la documentación para Gatsby Node APIs, Gatsby Browser APIs y Gatsby SSR APIs.

Carpetas del proyecto

Para las carpetas vamos a ver pocas realmente importantes en nuestro proyecto ahora, pero hay otras que tienen su grado de importancia dependiendo de lo que estemos haciendo, veamos:

• /src: En esta carpeta va a estar todo el código de lo que veamos en el frontend de nuestra página.
  • /pages: Esta carpeta es medio mágica ✨ porque por cada componente que creemos acá, Gatsby va a crear automáticamente una ruta con el nombre. (Salvo por index y 404 jajaja. Por ejemplo, si creo el archivo about.js, automáticamente podemos ingresar a /about y vamos a ver lo que pongamos en ese componente recién creado)
  • /components: Como su nombre lo indica, acá van a estar los componentes que usemos en nuestras pages.
  • /images: Acá pondremos todas las imágenes que usemos. Si vemos el archivo gatsby-config.js vemos que ya está configurada esta carpeta para aprovechar la optimización de imágenes de Gatsby.
  • /templates: Esta carpeta no está en nuestro proyecto pero es útil para definir templates con data que venga de algún otro archivo de Gatsby, uno que genere páginas y necesite una estructura como template.
• /.cache: Generada automáticamente por Gatsby, esta carpeta la genera Gatsby en build time y va a tener un cache interno y no debemos modificarla.
• /public: Generada automáticamente por Gatsby, los archivos generados luego del build process van a parar a esta carpeta. Va a contener los HTML, CSS, JS y demás archivos de nuestro proyecto generados de tal forma que podríamos copiar los contenidos de la carpeta en un host "común" y levantaría nuestra página tal como la vimos mientras la estábamos desarrollando.

Routing

Esta es (para mi) una de las mejores cosas de Gatsby, tiene Reach-router (próximamente se fusiona con React-router) preconfigurado para que genere una ruta nueva cada vez que creemos un archivo en la carpeta src/pages. Hay otra forma de crear páginas desde el archivo gatsby-node.js, pero vamos a verlo más adelante.

Además, para navegar entre páginas de nuestro proyecto, Gatsby nos provee de un componente llamado gatsby-link el cual nos provee de algunas bondades como prefetching, lo que hace que las transiciones entre páginas sean casi instantáneas. 😉

Imágenes y lazy loading

Alguna vez vieron el efecto "blur-up" ese que está en los posts de Medium? No? Bueno, Gatsby tiene optimización de imágenes GRATIS y con configuración mínima (en el caso del starter por default, ya viene configurado así que no tendríamos que hacer nada). Gatsby nos propone dos formas de mostrar nuestras imágenes:

• Fluid: Gatsby crea distintos tamaños flexibles de nuestras imágenes que se adaptan al contenedor donde las usemos. Por ejemplo, si el max-width del contenedor es 800px, se van a crear imágenes de los tamaños 200px, 400px, 800px, 1200px y 1600px; lo necesario para que Gatsby después cargue la más óptima según el tamaño de dispositivo o resolución de pantalla.
• Fixed: Gatsby crean distintos tamaños de imágenes para diferentes resoluciones pero con un width y height fijos. Crea imágenes a 1x, 1.5x y 2x para luego cargar la que considere más óptima.

Para ver los diferentes efectos que podemos usar durante la precarga de las imágenes, podemos entrar en este link.

Probemos cómo se ve por ahora nuestro proyecto y chequeemos la velocidad que tiene para pasar entre páginas usando el comando gatsby develop 🚀🚀🚀🚀🚀

Bueno, hasta ahora pudimos ver un poco de la estructura del proyecto por default que nos provee Gatsby, pero con esto solamente estamos raspando la superficie y cada tema se puede ahondar muchísimo más. Vamos a la próxima parte donde vamos a hablar del sistema de Plugins que tiene Gatsby que es hermoso.