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.
👀 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.
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: 🤯
¿Checamos que el Hot-module replacement funcione? Cambia la palabra Blissmos por otra cosa y mira la magia 🪄
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
Vite
© 2016 - 2023 Fixtergeek