En este artículo explico cómo lanzar una app full-stack con Bun y Preact en minutos, ideal para prototipos y proyectos de aplicaciones a medida y software a medida.
Qué vas a construir: un servidor mínimo con Bun que sirve una página HTML, monta un componente Preact en el cliente y expone una pequeña API. Estructura sugerida: src/index.ts para el servidor, src/index.html para la plantilla y src/client.tsx para el cliente.
Paso 1 Inicializa el proyecto ejecutando el comando bun init. Esto crea package.json y tsconfig.json con valores por defecto para arrancar rápido.
Paso 2 Instala Preact con bun add preact. Preact ofrece una API compatible con React pero más ligera, perfecta para bundles rápidos y arranques en frío reducidos.
Paso 3 Configura TypeScript para JSX indicando que el origen de JSX es preact en la sección compilerOptions de tsconfig.json, por ejemplo estableciendo jsxImportSource a preact para que los archivos .tsx resuelvan JSX al runtime de Preact y evitar errores de tipos.
Paso 4 Organiza los archivos moviendo el servidor a src/index.ts y creando src/index.html y src/client.tsx. Mantener todo en src mejora la claridad y el flujo de trabajo.
Paso 5 Añade scripts utiles en package.json para desarrollo y produccion. Por ejemplo configuraciones que ejecuten bun --hot src/index.ts en desarrollo y NODE_ENV=production bun src/index.ts en produccion para desactivar características de desarrollo.
Paso 6 Crea una plantilla HTML sencilla que incluya un contenedor con id root y cargue el entry client como módulo. El servidor devolverá esta plantilla para la mayoría de rutas y el cliente montará el componente Preact en el elemento root.
Paso 7 Implementa el servidor en src/index.ts usando la API de serve de Bun para definir rutas: devolver la plantilla para rutas principales y exponer una ruta /api/hello que responda JSON. En modo desarrollo (NODE_ENV=development) activa hmr para recargas en caliente y una consola remota que refleja logs del navegador en tu terminal.
Paso 8 Escribe el cliente en src/client.tsx importando render desde preact, buscando el elemento root en el DOM y montando un componente App simple con un h1 como saludo. Preact permite usar el mismo modelo de componentes que React con una huella mucho menor, ideal para setups con Bun.
Ejecuta y prueba: bun run dev para modo desarrollador con recarga en caliente y bun run start para producción. Abre la URL que imprima Bun en consola, normalmente https://localhost:3000, y prueba editar src/client.tsx o src/index.ts para ver actualizaciones instantaneas en desarrollo.
Por qué elegir este enfoque para proyectos empresariales: combina velocidad de runtime, flujo de desarrollo con HMR y bundles ligeros, lo que acelera prototipado de productos, aplicaciones internas y MVPs. Si tu empresa necesita evolucionar esa base hacia una solución productiva, en Q2BSTUDIO somos especialistas en desarrollo de software a medida y aplicaciones a medida, con capacidades en desarrollo de aplicaciones y software multiplataforma y proyectos que integran inteligencia artificial y seguridad.
Servicios complementarios que podemos aportar: inteligencia artificial e ia para empresas para automatizar y optimizar procesos, ciberseguridad y pentesting para proteger tus activos digitales, despliegue y operación en servicios cloud aws y azure, y soluciones de servicios inteligencia de negocio con power bi para sacar valor a tus datos. Con experiencia en agentes IA y consultoría de IA empresarial podemos escalar prototipos basados en Bun y Preact hacia productos robustos. Conoce nuestra oferta de inteligencia artificial en servicios de IA para empresas.
Palabras clave integradas naturalmente en este artículo para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
Si quieres que preparemos un starter repository, un despliegue CI CD o integrar pipelines de seguridad y monitorizacion, contacta con Q2BSTUDIO y transformamos tu idea en una aplicacion productiva.
.jpg)
.jpg)
.jpg)