Introducción a Gatsby

1

¿Por qué Gatsby? Seguridad y Velocidad

2

¿Qué es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuración de ESLint

Fundamentos de Gatsby

7

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

¿Cómo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalación y configuración de plugins

17

Imágenes como fuente de datos

18

Plugins de transformación

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducción a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en línea

23

Productos en React

Generando páginas programáticamente

24

Creando páginas en función de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producción

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

7/33
Recursos

Boilerplate de nuestro proyecto

Vamos a clonar el repositorio de github.com/Jossdz/Gatsby-platzi, de esta forma tendremos una estructura de archivos muy similar a la de gatsby new, pero esta vez con los estilos de nuestro proyecto listos:

git clone https://github.com/Jossdz/Gatsby-platzi

Archivos de configuración de Gatsby

  • package.json: los paquetes, scripts y la configuración principal de cualquier proyecto con Node.js.
  • gatsby-config.js: configuramos la metadata (título, descripción y autor) y los plugins de Gatsby que usaremos para construir nuestra aplicación.
  • gatsby-browser.js: una parte de nuestro código se construye desde el servidor, en el build time, y otra parte muy importante en el navegador, cada vez que los usuarios entran a nuestra aplicación. En este archivo podemos utilizar algunas APIs o métodos predefinidos para configurar el código que debe ejecutarse en el navegador, por ejemplo, para añadir vistas, cargar librerías o configurar un store global para manejar el estado.
  • gatsby-node.js: configuramos todo lo que tiene que ver con la construcción de nuestro sitio web con Gatsby. Podemos generar vistas en función de nuestra información proveniente de GraphQL, incluso utilizando APIs externas a nuestra aplicación.
  • gatsby-ssr.js: configuramos lo que sucede en el build time para que nuestra aplicación funcione correctamente en producción. Tiene el mismo fin que gatsby-browser.js, solo que este será el código que enviamos a producción.

El resto de archivos y carpetas contienen código JavaScript (seguramente con React) y CSS.

Aportes 17

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Me falló la instalación, el problema parece ser que es de instalación sin permisos porque se arregló al borrar node-modules y instalar con la bandera –unsafe-perm

rm -rf node-modules
npm update
npm install --unsafe-perm
gatsby develop

Hola Devs:
-Aqui les muestro mi repositorio con la misma configuracion del profesor sin errores: Click Aqui
-Espero y les ayude, el link es del commit especifico para la configuracion inicial hasta este punto del curso, si desean pueden checar el avance.
Recuerden, #NuncaParesDeAprender 💚

Aca les dejo mi proyecto realizado con este curso.
https://mrburger.netlify.app/
Si me pueden seguir en twitter https://twitter.com/chiguirecode

Al instalar la dependencias del repositorio arroja muchos errores, por lo que la forma más sencilla es crear un nuevo proyecto.

gatsby new Gatsby-platzi

luego sacar la imágenes del repositorio de github y pasarla al proyecto creado.

No olvides instalar Gatsby Cli de forma global en tu máquina.

npm i gatsby-cli -g

https://www.npmjs.com/package/gatsby-cli

Por alguna extraña razón cuando abro la carpeta del proyecto en VSC la cabecera se me pone color Verde Platzi jajaja (nada mas con este proyecto). ¿Le sucedió a alguien mas?

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

Clonamos git clone https://github.com/Jossdz/Gatsby-platzi

Si da error al hacer npm i:

  • Hacemos npm update

  • Luego npm i --unsafe-perm

  • En el archivo ‘gatsby-config.js’ tenemos toda la configuración de nuestro proyecto.

  • En el archivo ‘gatsby-browser.js’ es la configuración del lado del cliente y también podemos hacer llamadas a APIs.

  • En el archivo ‘gatsby-node.js’ tenemos las piezas de construcción. Aquí usamos GraphQL.

  • En el archivo ‘gatsby-ssr.js’ es muy similiar al gatsby-browser.js, pero es para el servidor.

Por si les gusta mas ver git visualmente:
GitHub Desktop

Me fallo la instalación de dependencias, porque no encontraba python

gyp ERR! find Python Python is not set from command line or npm configuration gyp ERR! find Python Python is not set from environment variable PYTHON

Solución:

En windows abrir PowerShell como Administrador y lanzar los comandos:

npm install --global --production windows-build-tools
y
npm install node-gyp

Cerrar ventana de powerShell, borrar node_modules y package-lock.json

Y ahora si otra vez lanzamos en consola:

npm i

Al instalar las dependencias del proyecto, da varios errores.

Por si a alguien le sirve y quiere replicar la estructura del proyecto:

gatsby new Gatsby-platzi

Luego instalar una dependencia que necesitamos para los estilos

npm i styled-components

Por ultimo hay veces donde al correr gatsby develop da error de cache, pueden hacer un gatsby clean, o agregar un script en un archivo package.json

"start": "gatsby clean && gatsby develop",

Me falto mencionar, los archivos js que necesitamos uno es una carpeta styles y otra de utils, donde tenemos los siguientes archivos:
https://github.com/Jossdz/Gatsby-platzi/tree/master/src/styles
https://github.com/Jossdz/Gatsby-platzi/tree/master/src/utils

el proyecto tambien se puede abrir directamente desde visual studio code y abriendo la terminal se usa la opcion new git bash

Muy bien gatsby, muy bien @Jossdz lo explicas de mandera sencilla y concisa.

Excelente información, muy claro todo.

Alguien más tiene este error?

Error in "/Users/zomars/Sites/Gatsby-platzi/node_modules/gatsby-plugin-manifest/gatsby-node.js": Cannot find module 'gatsby/dist/utils/create-content-digest'
Tuve un problema con el comando npm i relacionado con que uso deepin como SO. Lo solucione eliminando la carpeta node_nodules y ejecutando los comandos npm cache verify y npm i -g npm. Mi sugerencia es que ejecutes los comandos y actualices el repositorio y así los nuevos estudiantes no tengan el mismo problema

Listo. Confirmado. Gracias Joss.

Para aquellos que les esté generando un error al ejecutar “gatsby develop”, se puede deber a las versiones de gatsby que se instalan al ejecutar el comando “npm install”.

Para solucionar esto puede modificar el archivo package.json recién se clonan el repositorio de github, de la siguiente manera:

  • En las dependencias que sean de gatsby le quitan el signo (^). De esta forma nos aseguramos que al ejecutar “npm install” vamos a usar la misma versión que el profesor utilizó al crear el curso y evitaremos errores.

No he podido realziar la instalación. Tengo el siguiente error

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]0.22.1 install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`

He borrado la carpeta node_module
Ya he probado los comandos de

npm install --unsafe-perm
npm install --build-from-source
npm install -g --unsafe-perm sharp
npm install -g --unsafe-perm cordova-res
npm install gatsby-transformer-sharp gatsby-plugin-sharp

Y no se ha podido hacer la instalación