Una vez clonado el proyecto, correr npm run setup o yarn setup. Este script se va a encargar de instalar dependencias y buildear el código en modo producción.
Para levantar el proyecto en modo desarrollo, basta con correr el comando npm start o yarn start desde la terminal. Este script corre en paralelo múltiples scripts: setea el entorno de node como desarrollo, observa el CSS por cambios y le da 5 segundos para correr el script react-scripts start tradicional.
Nota: En caso de usar un OS distinto a Windows, es posible que sea necesario editar la línea 21 de
package.json, cambiandotimeoutporsleeppara que el proyecto compile.
Para buildear el proyecto, correr el comando npm run build. Una vez que termina de buildear el código, puede servirse usando (por ejemplo) la librería serve desarrollada por Vercel.
Con la librería serve instalada de manera global, ejecutando el comando serve dentro de la carpeta ./build, va a levantarse un servidor en el puerto 5000 con el proyecto compilado.
- Agregar integration tests con
testing-library. - Agregar e2e tests con
cypress.
Para poder usar Tailwind CSS en el proyecto, tuve que instalar:
Tailwind CSS es un framework de CSS basado en utilidades. No provee componentes ya armados, sino que provee clases utilitarias para manejar distintas propiedades de CSS facilmente. Además de esto, viene con un archivo de configuración que exporta un objeto de JS donde podemos definir nuestros propios valores para distintas propiedades, paletas de colores, etc.
Aproveché la oportunidad para probar el framework. Me parece mucho más interesante que esté basado en utilidades y no en componentes. Empuja más la creatividad en lugar del copy-paste, aparte de no volverte loco a la hora de querer darle tu propia impronta a la UI.
PostCSS es una herramienta que permite utilizar plugins escritos en JS para darle superpoderes a tu CSS. En este caso usé 3 plugins (purgecss, autoprefixer y cssnano).
PurgeCSS analiza el contenido de mis archivos para determinar qué JS de todo el framework de CSS (en mi caso, Tailwind) estoy usando. A la hora de buildear el proyecto, se minimizan las líneas de CSS y se mantienen únicamente las líneas pertinentes a los selectores y classnames que usé.
Esto es el plugin de PurgeCSS para PostCSS.
Autoprefixer es un plugin de PostCSS que se encarga de parsear nuestro CSS para agregar prefixes de distintos vendors a nuestras reglas de CSS, basándose en datos de Can I Use para facilitar la compatibilidad cross-browser.
El último plugin de PostCSS que uso. Su finalidad es compactar nuestro CSS.
Cross-Env es una herramienta muy popular desarrollada por Kent C. Dodds pensada para setear variables de ambiente con facilidad. En mis scripts, lo uso para determinar si el entorno es de desarrollo o producción.
npm-run-all es una herramienta de terminal para poder ejecutar scripts de npm de manera paralela o secuencial. Lo uso para mis scripts de start y build, para setear los ambientes, mirar o buildear el CSS y correr el script start o build de react-scripts.