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 鈥搖nsafe-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 鈥榞atsby-config.js鈥 tenemos toda la configuraci贸n de nuestro proyecto.

  • En el archivo 鈥榞atsby-browser.js鈥 es la configuraci贸n del lado del cliente y tambi茅n podemos hacer llamadas a APIs.

  • En el archivo 鈥榞atsby-node.js鈥 tenemos las piezas de construcci贸n. Aqu铆 usamos GraphQL.

  • En el archivo 鈥榞atsby-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 鈥済atsby develop鈥, se puede deber a las versiones de gatsby que se instalan al ejecutar el comando 鈥渘pm 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 鈥渘pm 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