Cómo Configurar un Proyecto de Rails con Esbuild y TailwindCSS

En el mundo del desarrollo web, Ruby on Rails se ha mantenido como uno de los frameworks más populares para construir aplicaciones web robustas y escalables. Sin embargo, la elección de herramientas para el frontend puede ser un desafío. En este artículo, te guiaré a través del proceso de configuración de un proyecto de Rails utilizando Esbuild como empaquetador de módulos y TailwindCSS como framework de diseño. ¡Vamos a empezar!

¿Qué es Esbuild?

Esbuild es un empaquetador de módulos extremadamente rápido y eficiente que permite compilar y agrupar archivos JavaScript y CSS. Su velocidad y simplicidad lo han convertido en una opción popular entre los desarrolladores que buscan optimizar su flujo de trabajo.

¿Qué es TailwindCSS?

TailwindCSS es un framework de CSS que permite crear diseños personalizados de manera rápida y eficiente. A diferencia de otros frameworks que ofrecen componentes predefinidos, TailwindCSS se basa en clases utilitarias, lo que te permite construir interfaces únicas sin tener que salir de tu HTML.

Requisitos Previos

Antes de comenzar, asegúrate de tener instalados los siguientes elementos en tu máquina:

Ruby (versión 2.7 o superior)
Rails (versión 6.0 o superior)
Node.js (versión 12 o superior)
Yarn (opcional, pero recomendado)

Creando un Nuevo Proyecto de Rails

Para comenzar, abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto de Rails:

rails new mi_proyecto --skip-javascript

La opción --skip-javascript se utiliza para evitar que Rails genere archivos JavaScript por defecto, ya que utilizaremos Esbuild para manejar esto más adelante.

Instalando Esbuild

Una vez que hayas creado tu proyecto, navega a la carpeta del proyecto:

cd mi_proyecto

Ahora, instala Esbuild utilizando Yarn o npm. Si prefieres Yarn, ejecuta:

yarn add esbuild --dev

Si prefieres npm, ejecuta:

npm install esbuild --save-dev

Configurando Esbuild

Ahora que Esbuild está instalado, necesitamos configurarlo. Crea un archivo llamado esbuild.config.js en la raíz de tu proyecto:

touch esbuild.config.js

Abre el archivo y agrega la siguiente configuración básica:

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['./app/javascript/application.js'],
  bundle: true,
  outdir: './app/assets/builds',
  minify: true,
  sourcemap: true,
  watch: process.argv.includes('--watch'),
}).catch(() => process.exit(1));

Esta configuración le dice a Esbuild que tome application.js como punto de entrada, agrupe los archivos y los coloque en la carpeta app/assets/builds.

Creando el Archivo de JavaScript

Ahora, crea el archivo application.js en la carpeta app/javascript:

mkdir -p app/javascript
touch app/javascript/application.js

Abre application.js y agrega el siguiente código:

import './stylesheets/application.css';

Instalando TailwindCSS

Para instalar TailwindCSS, primero necesitas instalarlo a través de npm o Yarn. Ejecuta uno de los siguientes comandos:

yarn add tailwindcss postcss autoprefixer

npm install tailwindcss postcss autoprefixer

Una vez que TailwindCSS esté instalado, inicializa la configuración de TailwindCSS ejecutando:

npx tailwindcss init

Esto creará un archivo tailwind.config.js en la raíz de tu proyecto. Abre este archivo y configura el contenido para que TailwindCSS pueda purgar el CSS no utilizado en producción:

module.exports = {
  content: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Configurando PostCSS

Ahora, crea un archivo de configuración para PostCSS llamado postcss.config.js en la raíz de tu proyecto:

touch postcss.config.js

Abre el archivo y agrega el siguiente contenido:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Creando el Archivo CSS

Ahora, crea un archivo CSS donde importarás TailwindCSS. Crea la carpeta stylesheets dentro de app/javascript y luego crea el archivo application.css:

mkdir -p app/javascript/stylesheets
touch app/javascript/stylesheets/application.css

Abre application.css y agrega las siguientes líneas para importar TailwindCSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Compilando los Archivos

Ahora que todo está configurado, puedes compilar tus archivos utilizando Esbuild. Ejecuta el siguiente comando en tu terminal:

node esbuild.config.js --watch

Esto iniciará Esbuild en modo de vigilancia, lo que significa que recompilará automáticamente tus archivos cada vez que realices un cambio.

Integrando en Rails

Para que Rails reconozca los archivos generados por Esbuild, necesitas agregar el siguiente código en tu archivo app/views/layouts/application.html.erb dentro de la sección <head>:

<%= stylesheet_link_tag 'application', 'data-turbo-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>

Probando la Configuración

Ahora que todo está configurado, puedes iniciar tu servidor Rails:

rails server

Abre tu navegador y dirígete a http://localhost:3000. Deberías ver la página de inicio de Rails. Para probar TailwindCSS, puedes agregar algunas clases de Tailwind a tu archivo app/views/welcome/index.html.erb:

<h1 class="text-3xl font-bold underline">¡Hola, TailwindCSS!</h1>

Conclusión

¡Felicidades! Has configurado con éxito un proyecto de Rails utilizando Esbuild y TailwindCSS. Ahora puedes disfrutar de un flujo de trabajo más rápido y de un diseño más flexible. A medida que continúes desarrollando tu aplicación, considera explorar más sobre las características avanzadas de TailwindCSS y las optimizaciones que Esbuild puede ofrecer.

Si tienes alguna pregunta o necesitas más ayuda, no dudes en dejar un comentario. ¡Feliz codificación!