Inicio
Prepara tu entorno de trabajo para desarrollo GatsbyJS
Para desarrollar en Gatsby o React necesitarás instalar NodeJS, vscode y ciertas librerías que te facilitarán mucho la vida
Prólogo
Para desarrollar necesitas un entorno de trabajo
En la época de los editores para web visuales los desarrolladores podían funcionar sin problemas con un simple NotePad
Hoy en día esto es impensable, las ventajas que te aporta un entorno de trabajo son masivas
El editor más popular para desarrollo en JavaScript (y compañía) es sin duda el visual studio code, editor libre y de código abierto de Microsoft que además está en sí mismo desarrollado en JavaScript (TypeScript) (aunque integra otros lenguajes para ciertas cosas donde necesita potencia)
Es la primera pieza de un ecosistema del que voy a hablar en este curso
Vamos allá
VSCode
Puedes instalar la versión para tu sistema operativo en su web, y listos
Y continúa por instalarte las extensiones básicas y que convierten a vscode en un monstruo de la programación
Extensiones de vscode
Las puedes explorar aquí, y las básicas e indispensables son las siguientes
- Prettier
- Eslint
- Babel JavaScript
- MDX
- MDX Inline
- GraphQL for VSCode
- vscode Styled Components
Y a mi me es muy útil esta extensión para
gity esta otra para ver los colores decss - Git graph
- Color vision
NodeJS y npm
NodeJS es el backend sobre el que compilaremos nuestro código y sobre el que con Gatsby generaremos nuestras páginas web estáticas
Con Node (recomiendo la versión LTS) también se te instalará npm
NPM es el repositorio de JavaScript por excelencia
Git
Git es un gestor de cambios que una vez te acostumbras a trabajar con él no te cansas de dar gracias de que algo así exista
Básicamente porque es como tener a un secretario/secretaria que te anota todos los cambios que has hecho desde siempre, con lo que tendrás no sólo una copia de seguridad de tu código sino un histórico de TODO
La copia de seguridad sólo la tendrás si te creas una cuenta en sitios tipo github o similares
Una vez tenemos una cuenta y hemos añadido los repositorios que queramos, para vincularlos con la carpeta de nuestro vscode tenemos que añadírselo
Para ahorrarnos esto siempre podemos crear primero el repositorio en github
Y después clonarlo en local
Esto nos creará la carpeta correspondiente con su vinculación ya hecha de serie
Gatsby CLI
El acrónimo de CLI se refiere a Command LIne, es decir, la manera de utilizar Gatsby desde el terminal, es lo que utilizaremos para instalar, compilar y publicar
Lo instalamos desde npm y de forma global
Con npm instalamos paquetes de forma global y de forma local
La primera instalará los paquetes en un directorio donde NodeJS siempre tendrá acceso
La segunda los instalará en un directorio que estará confinado en carpeta de nuestra aplicación, por lo que esos paquetes sólo estarán disponibles en ese contexto
Siempre que se pueda, mejor instalar en local
Para instalarlo
Si queremos hacerlo con yarn tenemos que añadir el path, nos lo explican aquí
Librerías para el desarrollo de nuestro proyecto
Básicamente prettier y eslint, de los que hemos instalado las extensiones en vscode
Prettier nos sirve para formatear tu código JavaScript siguiendo unas convenciones determinadas que hacen innecesario que pierdas un minuto en esto
Eslint es un linter que te avisará cuando detecte errores en tu código, lo cual es posiblemente lo mejor que le ha pasado a JavaScript desde siempre
Para eslint necesitas crear el archivo .eslintrc.json para configurarlo y que se entienda con prettier (y anular el formateador que también incluye eslint)
Para prettier es opcional pero si quieres cambiar algunas cosas crea el archivo .prettierrc (en mi caso sí hago algunos cambios)
Archivos para nuestro repositorio
Archivos comunes que te servirán para tu proyecto
- Para gestionar los finales de línea del archivo y que siempre sean
LF
.gitattributes
.gitconfig
.vscode/settings.json
- Para no sincronizar lo que no quieres sincronizar
.gitignore