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
Introducción a Gatsby
¿Por qué Gatsby? Seguridad y Velocidad
¿Qué es Gatsby?
Diferencias entre SPA, SSR y Gatsby
Preparando el entorno
Requisitos previos y herramientas de desarrollo
Gatsby y Gatsby CLI y Starters
Configuración de ESLint
Fundamentos de Gatsby
Presentación y Estructura de Archivos de nuestro proyecto: Platziswag
Ecosistema de plugins
Usando React para manejar la parte visual e interactiva de nuestra aplicación
Creando la vista con React
Router en Gatsby y Componente Link
Layout en Gatsby
Graphql en Gatsby
¿Cómo funciona GraphQL en Gatsby?
Accediendo a nuestros datos en Gatsby desde GraphQL
Queries, Edges (conexiones) y Nodos en Gatsby
Consultas en GraphQL desde React
Usando plugins en Gatsby
Instalación y configuración de plugins
Imágenes como fuente de datos
Plugins de transformación
Estilizando nuestros componentes con styled-components
Estilos Globales con styled-components
Stripe checkout
Introducción a la API de Stripe Checkout
Agregando productos a nuestra tienda en línea
Productos en React
Generando páginas programáticamente
Creando páginas en función de los datos
Manejo de Gatsby Templates
Terminando la Vista de Detalle de los Productos
StaticQuery vs. useStaticQuery
Construyendo el Carrito de Compras: useContext
Construyendo el Carrito de Compras: Vista
Construyendo el Carrito de Compras: Agregar productos al carrito
Comprando productos
Gatsby a producción
Gatsby build para compilar nuestro proyecto
Deploy a Netlify
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Presentación y Estructura de Archivos de nuestro proyecto: Platziswag
7/33Recursos
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 quegatsby-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:
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.