Remix recién ha estrenado una nueva integración, esta vez con Vite.

Y es que la comunidad de Vite es muy activa y no ha perdido la oportunidad de agregar a Remix a su interminable lista de plugins, ahora que Remix está en su versión 2 estable.

Y porque en este canal somos fans de Vite y de Remix, vamos a crear un nuevo proyecto para explorar esta nueva integración que se beneficia de una de las mejores experiencias para desarrollador que existen hoy en día. ¿Qué dices, vienes conmigo?

Creando un nuevo proyecto

Para crear un nuevo proyecto utilizaremos npx y create-remix como siempre hacemos, pero especificaremos el template de Vite:

npx create-remix@latest --template remix-run/remix/templates/unstable-vite

Con esto, ahora tenemos un lightning fast ⚡️ proyecto de Remix, como ellos suelen decir. Y no es para menos, pues Remix con Vite ha demostrado ser incluso 10 veces más rápido comparado con otras configuraciones, como el Indi Stack.

Con Vite, Remix pasa de ser un compilador a solo un plugin

Si tu tienes experiencia trabajando con Vite, sabrás que su ecosistema de plugins es una de las razones de peso para utilizarlo. Si miramos nuestro archivo vite.config.ts podrás notar que Remix ya no es el encargado, se ha convertido en un plug-in más del ecosistema de Vite. 😱

// vite.config.ts
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [remix()],
}); 

¿Qué significa que Remix ahora se parte del ecosistema de plugins de Vite?

Vite no solo se caracteriza por ser lightning fast ⚡️o “absurdamente rápido” como yo le digo, también puede compilar tu aplicación on-demand lo que pone a tu disposición un servidor superrápido. Las dependencias de tu proyecto se procesan una sola vez en Vite, pues Vite le da seguimiento a las dependencias y actualiza solo las necesarias. Vite reduce el uso de memoria haciendo un uso eficiente de la cache. Vite también nos ayuda con el CSS cargando solo el necesario para la página actual. Vite es genial cuando se trata de HMR (Hot Module Replacement) pues conserva maravillosamente el estado, actualizando tu aplicación sin refrescar o reiniciar. Vite también es supercompatible con ESM y CJS, así no tienes que preocuparte compatibilidades y bueno, TypeScript como sabes está 100% soportado además de la compatibilidad con mono-repos, npm, yarn o pnpm. ¿Podemos pedir más?

El desarrollo web ha dejado de ser doloroso, gracias a Remix, mientras que con Vite se ha vuelto incluso divertido.

Los developers que disfrutamos, sí, que disfrutamos del desarrollo web Fullstack gracias a Remix, estábamos esperando con muchas ganas, poder utilizarlo junto con Vite. Nuestra paciencia ha sido recompensada, este es un buen momento para comenzar con el desarrollo web de la mano de Remix y de Vite.

¿Qué te parece, lo vas a probar?

Te dejo un enlace a mi curso de Remix por si no te quieres quedar fuera.

Abrazo. Bliss. 🤓

Enlaces relacionados

Vite (unstable) docs