cover

El mejor Stack del 2024: Hono + Vite + TailwindCSS

author photo

Héctorbliss

@hectorbliss


robot logo saying hello

No te quedes atrás: Actualízate

Suscríbete para recibir información sobre nuevos frameworks, updates, eventos, tips, hacks y más.

Es momento de aventajarte de las mejores herramientas de la web y construir un stack moderno, y altamente compatible. Ese ha sido mi problema últimamente: la compatibilidad. Hay tantos cambios sucediendo en este momento entre los frameworks más populares, que uno se queda como el chinito, nomás milando. 😑 Por eso te voy a enseñar un stack que puede cambiar tu manera de construir sitios web. Venga, esto es un tutorial, no perdamos tiempo en introducciones.

🔥 Primero vamos a crear el proyecto con Hono.

El comando es muy simple gracias a npm.

npm create hono@latest

tendremos una estructura del proyecto similar a la imagen.

Captura de pantalla 2024-06-24 a la(s) 6.50.45 a.m..png

👀 El archivo de configuración de TypesScript es muy importante, es lo que usaremos como servidor.

También tendremos un “Hello Hono” en Typescript.

import { serve } from "@hono/node-server"; import { Hono } from "hono"; const app = new Hono(); app.get("/", (c) => { return c.text("Hello Hono!"); }); const port = 3000; console.log(`Server is running on http://localhost:${port}`); serve({ fetch: app.fetch, port, });

Para este ejemplo, he usado nodejs como runtime. Por eso el serve que viene de node-server. Esto lo puedes sustituir con la herramienta para el runtime de tu elección (Cloudflare workers, Bun o Deno, por ejemplo).

Corramos el proyecto para mirar el Hello Hono en el navegador.

npm i npm run dev

Bien, saluda a Hono. 👋🏼🔥 Ahora vamos a agregarle Vite. 🤯

🧱 Agregando un componente JSX

Vamos a añadir un par de herramientas más, pero primero crearemos un componente con JSX, pero SIN REACT. 🤯

export function Hello() { return ( <article> <section> <h1>¡Hola Blissmo!</h1> <p> Fixtergeek: Hono + Vite + TailwindCSS <br /> 🔥🔥🔥🔥🔥🔥🔥🔥🔥 ⚡️⚡️⚡️⚡️⚡️⚡️⚡️⚡️⚡️ ⛵️⛵️⛵️⛵️⛵️⛵️⛵️⛵️⛵️ </p> </section> </article> ); }

Creamos un pequeño componente llamado src/components/hello.tsx

Ahora que tenemos el componente, podemos crear la ruta.

import { serve } from "@hono/node-server"; import { Hono } from "hono"; import { Hello } from "./components/hello"; import { jsx } from "hono/jsx"; import { html } from "hono/html"; const app = new Hono(); app.get("/", (c) => { const content = jsx(Hello, {}); // Traemos el componente // y armamos un layout: return c.html(html`<!DOCTYPE html> <html> <head> <title>Simple demo</title> </head> <body class="bg-green-200"> ${content} </body> </html>`); }); const port = 3000; console.log(`Server is running on http://localhost:${port}`); serve({ fetch: app.fetch, port, });

Observa cómo utilizamos dos herramientas de Hono: jsx y html. Así podemos utilizar nuestro componente sin siquiera instalar React.

¿Qué loco no? 🤪

Corremos el servidor y vemos nuestro componente funcionar.

Captura de pantalla 2024-06-24 a la(s) 7.24.12 a.m..png

Hemos llegado a la hora “chimenguenchona”. Es momento de asegurar que el Hot Module Replacement de Vite funcione.

⚡️ Añadiendo Vite a nuestro servidor Hono.

Primero agregamos Vite al proyecto como parte de las herramientas de desarrollo.

npm i --dev vite
// package.json // ... "dependencies": { "@hono/node-server": "^1.11.4", "hono": "^4.4.7", "vite": "^5.3.1" },

Ahora necesitamos el archivo de configuración de Vite. vite.config.ts.

import { defineConfig } from "vite"; export default defineConfig({ build: { manifest: true, rollupOptions: { input: "/src/client.tsx", }, }, });

Puedes notar que también debemos crear nuestro cliente. /src/client.tsx. Lo haremos en un monento, pero, primero vamos a modificar nuestro archivo

package.json para agregar el "type": “module” que Vite requiere.

{ "type": "module", "name": "denik", "scripts": { "dev": "tsx watch src/index.ts", "dev-vite": "vite" }, // .. }

También agregamos un nuevo comando: vite-dev para poder ejecutar Vite.

Ahora debajo de nuestro componente en el HTML, vamos a colocar la fuente del cliente:

return c.html(html`<!DOCTYPE html> <html> <head> <title>Simple demo</title> </head> <body class="bg-green-200"> ${content} <script type="module" src="http://localhost:5173/src/client.tsx" ></script> </body> </html>`);

Y vamos a agregar el cliente dentro de src/client.tsx con un console.log.

// src/cleint.tsx console.log("Hola blissmo");

¿Ahora? Pues abrimos una segunda terminal.

npm run dev

Ahora viene el hack: vamos a correr Vite y Hono a la vez. Abre dos terminales (en VSCode o en iTerm) y ejecuta ambos comandos:

npm run dev y en otra terminal: npm run dev-vite

Si vamos al navegador y abrimos las herramientas de desarrollador veremos que nuestro console.log está ahí. ¡Genial! Podemos agrega TailwindCSS ahora. ⛵️

🍿 Finalmente, agregaremos TailwindCSS

Para agregar TailwindCSS a nuestro proyecto Hono, instalando lo necesario:

npm i -D tailwindcss postcss autoprefixer

Instalamos las herramientas en las herramientas de desarrollo también.

Necesitamos un grupo de archivos, entre ellos el primer: la configuración de Tailwind y la ruta del contenido que usará utilidades:

/** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.tsx"], // <== Muy importante theme: { extend: {}, }, plugins: [], };

Y agregamos el archivo de configuración de postcss.config.js en la raíz del proyecto, igual que todos los otros archivos de configuración.

export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

Bueno, solo falta el archivo CSS ¿no?

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

Agregamos el archivo src/style.css y le agregamos las directivas.

¡Ahora sí a agregar utilidades de Tailwind a nuestro Hello Hono para que se vea más bonito! 🤩

export function Hello() { return ( <article class="text-2xl text-indigo-600 flex h-[100dvh] items-center justify-center"> <section> <h1 class="text-4xl font-bold">¡Hola Blissmo!</h1> <p class="font-mono"> Fixtergeek, Hono + Vite + TailwindCSS <br /> 🔥🔥🔥🔥🔥🔥🔥🔥🔥 ⚡️⚡️⚡️⚡️⚡️⚡️⚡️⚡️⚡️ ⛵️⛵️⛵️⛵️⛵️⛵️⛵️⛵️⛵️ </p> </section> </article> ); }

Y para poder probar nuestro frankestein, no, nuestra artesanía hecha con herramientas de vanguardia, importemos el archivo CSS a src/lient.tsx. Esto hará que Tailwind sea compilado por Vite.

import "./style.css"; console.log("Hola blissmo");

Hora de ir al navegador y que te estalle la cabeza: 🤯

Captura de pantalla 2024-06-24 a la(s) 8.05.09 a.m..png

¿Checamos que el Hot-module replacement funcione? Cambia la palabra Blissmos por otra cosa y mira la magia 🪄

Captura de pantalla 2024-06-24 a la(s) 8.06.17 a.m..png

No es perfecto, claro. Pero lo hiciste tú mismo. 🤓

Abrazo. Bliss.

Enlaces relacionados

Código del proyecto https://stackblitz.com/edit/stackblitz-starters-qvqy2m?file=src%2Findex.ts

Hono

https://hono.dev/

Vite

https://vitejs.dev/

banner

¿Quieres mantenerte al día sobre los próximos cursos y eventos?

Suscríbete a nuestro newsletter

Jamás te enviaremos spam, nunca compartiremos tus datos y puedes cancelar tu suscripción en cualquier momento 😉

robot logo saying hello
facebook icontwitter iconlinkedin iconinstagram iconyoutube icon

© 2016 - 2023 Fixtergeek