¡Crea aplicaciones web a la velocidad de la luz con esta configuración para Vite!

Existen muchas ocasiones en las que es necesario desarrollar algo que luzca bien, represente nuestra idea a la perfección y pueda lograr ser ejecutada en el menor tiempo posible (un buen ejemplo son las hackathons). En estos casos es complicado pensar en estilos, componentes enteros y programar todo desde cero. Por esta razón, frameworks de CSS y de componentes en general suelen llegar a ser nuestros mejores amigos a la hora de desarrollar aplicaciones llamativas y de forma rápida. En especial, comparando el proceso con uno en el que es necesario diseñar todos los componentes y estilos de la misma desde cero.

Por esta razón, una composición de un proyecto de Javascript muy interesante y útil que encontré está basada en cuatro herramientas: Svelte, como framework principal; Vite, como builder; Tailwind CSS, como framework de CSS; y Daisy UI, como librería de componentes. A lo largo del artículo, utilizaré yarn como package manager, aunque las diferencias entre este y npm (que es probablemente el package manager más utilizado), son muy pocas en cuestión a sintaxis.

El primer paso para crear esta aplicación es iniciar creando un proyecto de Vite. El comando a ejecutar (en el directorio en el que quieras crear el proyecto) es el siguiente:

yarn create vite

Y debes llenar información. Los campos a llenar son nombre del proyecto, framework (Svelte), y variante (con o sin utilizar Typescript, queda a tu discreción). Esto creará un nuevo directorio con el nombre del proyecto, en el que tendrás que hacer las demás configuraciones para hacer funcionar este conjunto de herramientas.

Posteriormente, para estar seguros de que todos los paquetes de los que depende Vite están bien instalados, es necesario ejecutar el comando:

yarn

Que sirve para "inicializar" el proyecto.

Luego, para instalar y configurar Tailwind CSS, primero es necesario instalar los tres paquetes correspondientes. Estos tres paquetes se instalan ejecutando el siguiente comando de yarn, y procurando instalar las versiones más recientes:

yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

Y luego, es necesario inicializar Tailwind CSS ejecutando el siguiente comando:

npx tailwindcss init -p

Al tener un proyecto con Tailwind CSS inicializado de forma correcta, se debe crear un archivo .css en el que se encuentren los siguientes tres imports:

@tailwind base;

@tailwind components;

@tailwind utilities;

Finalmente, y para procurar que sea posible implementar Tailwind CSS en archivos .svelte, es necesario cambiar las extensiones de algunos archivos de configuración, postcss.config.js y tailwind.config.js de forma específica, y colocarles la extensión .cjs para que puedan ser leídos como módulos. Al finalizar con este procedimiento, ya debería ser posible utilizar clases de Tailwind en el código fuente de los componentes.

Lo último a configurar es Daisy UI, la cual es la librería de componentes a utilizar. En primer lugar, es necesario instalar el paquete de la librería mencionada mediante el siguiente comando:

yarn add daisyui

Y finalmente, en el archivo tailwind.config.cjs, es necesario agregar este código dentro del array de plugins:

require('daisyui')

Con estos pasos realizados, ya es posible acelerar increíblemente el proceso de desarrollo de aplicaciones con Javascript al no tener la necesidad de programar desde cero todos los estilos y componentes de la misma.

Finalmente, un último consejo a la hora de utilizar una aplicación del estilo es configurar un módulo que permita el proceso de linting en la aplicación. Este procedimiento es utilizado para configurar reglas de escritura y limpieza de código en general. La herramienta más utilizada para este procedimiento es ESLint, la cual también es fácilmente instalable y configurable siguiendo los pasos de la sección Getting started de la página oficial.

- Zant.