Comienza un proyecto Remix con Vite

Cursos

Recursos

Blog

Cada semana nuevos hacks de desarrollo web y diseño.

Guías

Guías completas sobre TS, JS, React, Github y más.

Tutoriales

Ejercicios prácticos para dominar el desarrollo web.

Inicia sesión

Comienza un proyecto Remix con Vite

Héctorbliss

@hectorbliss

Mira el video si prefieres:

En esta entrada vamos a crear un nuevo proyecto con Vite, utilizando el plugin official de Remix. Recuerda que este plugin está en versión inestable aún; no está listo para producción. Pero como en este blog somos curiosas(os) vamos de una vez a probarlo. 😎

El hecho de que Remix poseyendo su propio compilador, decida migrarse también al ecosistema de Vite habla muy bien de Vite, pues Remix acepta que el trabajo que han estado haciendo en su compilador podría llegar a ser una versión incompleta de Vite, y por ello han decidido delegarle este trabajo a Vite. 🤯

⚡️ Iniciando con Vite

Para crear el nuevo proyecto con Vite, vamos a ejecutar el comando:

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

Nombremos a nuestro proyecto: remix-vite.

Ahora, abramos el proyecto en VSCode para analizarlo. 📖

🔖 Leyendo el boilerplate

Para entender mejor qué es lo mínimo que necesitamos para hacer trabajar juntos a Remix y Vite, analicemos un poco la estructura del proyecto.

Si vamos al archivo package.json notaremos lo siguiente.

{
  "name": "remix-vite",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "vite build && vite build --ssr",
    "dev": "vite dev --port 3000",
    "start": "remix-serve ./build/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^2.3.1",
    "@remix-run/react": "^2.3.1",
    "@remix-run/serve": "^2.3.1",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.3.1",
    "@remix-run/eslint-config": "^2.3.1",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.38.0",
    "typescript": "^5.1.6",
    "vite": "^5.0.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Vamos a notar que nuestro type será module cuando trabajemos con Vite, que el comando para el build incluye la flag —ssr y, veremos que React ya está instalado junto con Remix y lo más loco, que no necesitamos instalar el plugin para Vite de React, con el de Remix basta. 😯

👀 A todos estos archivos y código que Remix coloca para poder funcionar, regularmente se le conoce como boilerplate. 🤓

También notarás que si vas a la carpeta app, ahora solo tenemos un archivo root.tsx, ya no tenemos un client.entry ni un server.entry. 🤩

Hagamos el build para ver qué es lo que nos entrega Vite en la carpeta build que generará.

npm run build

Veremos que se crea una carpeta build y dentro otra llamada server, que contiene un archivo index.js y una carpeta oculta llamada .vite con un archivo manifest.json dentro.

Pero para el cliente también se han creado todos nuestros assets y nuestro código JavaScript del cliente en la carpeta public/assets.

Podemos ver una vista previa de nuestro servidor con el comando npm start que ejecuta a su vez remix-serve ./build/server/index.js

[remix-serve] http://localhost:3000 (http://192.168.0.162:3000)

Recuerda que este plugin no está listo para producción, sin embargo si tú también quieres probar esta increíble combinación mientras se convierte en estable, bueno pues ¿apoco no está genial? Claro que sí. 👏🏼

👼🏻 Pequeños detalles a considerar

En muy poco tiempo este plugin tendrá una versión estable a la vez que esta forma de trabajar con Vite se convertirá en el estándar, Remix se une a la lista de frameworks modernos que se han subido a Vite. Como:

Sabemos que Deno ya es compatible con Vite, con el tiempo, mientras tu app sea compatible con Vite, será compatible con la mayoría de las nubes edge más populares. ⚙️

Algunas configuraciones a considerar:

En el archivo root.tsx <LiveReload /> debe aparecer antes que <Scripts />.

// root.tsx

<body>
	<Outlet />
  <ScrollRestoration />
  <LiveReload />
  <Scripts />
</body>

Una de las razones de que Remix se esté migrando a Vite es que ahora tendrás mucho menos que aprender de Remix cuando lo adoptas, pues para cualquier cambio en la configuración del building, será cuestión de mirar la documentación de Vite y su comunidad y no la documentación de Remix. 🔥

También puedes cargar las variables de entorno con la herramienta loadEnv de Vite:

// vite.config.js

// ...

export default defineConfig(({ command, mode }) => {
    env: loadEnv(mode, process.cwd(), '');

// ...

Y ya está, ¿tú qué opinas, te gusta que Remix se convierta en solo un plugin, o que ahora sea parte del ecosistema de Vite? ¿Eres consiente del mundo de posibilidades que se abre delante de tus ojos? 👀 Yo no dejaría de invertir tiempo en dominar Vite, pues puede que en el futuro todo se construya encima de él. 🤯

Abrazo. Bliss. 🤓