hand Inicio
Wallpaper

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

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

bash
git init
git remote add origin <la dirección .git de nuestro repo>

Para ahorrarnos esto siempre podemos crear primero el repositorio en github

Y después clonarlo en local

bash
git clone <la dirección .git de nuestro repo>

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

bash
npm install -g gatsby-cli

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

bash
yarn add --dev eslint eslint-config-react-app eslint-config-prettier babel-eslint eslint-config-standard, eslint-plugin-import, eslint-plugin-node, eslint-plugin-prettier, eslint-plugin-promise, eslint-plugin-react, eslint-plugin-standard, eslint-plugin-mdx, prettier

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)

json
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["prettier"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"strict": 0,
"prettier/prettier": ["error"]
}
}

Para prettier es opcional pero si quieres cambiar algunas cosas crea el archivo .prettierrc (en mi caso sí hago algunos cambios)

json
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 120,
"arrowParens": "avoid"
}

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

git
 text=lf
*.css linguist-vendored eol=lf
*.scss linguist-vendored eol=lf
*.js linguist-vendored eol=lf
*.php eol=lf
*.twig eol=lf
*.md eol=lf
*.mdx eol=lf
CHANGELOG.md export-ignore

.gitconfig

git
[core]
autocrlf = false

.vscode/settings.json

json
{
"files.eol": "\n"
}
  • Para no sincronizar lo que no quieres sincronizar

.gitignore

git
node_modules
.cache
public
yarn.lock
yarn-error.log
draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

Escríbeme