Skip to content

Nota

No necesitas bun create para usar Bun. No necesitas ninguna configuración en absoluto. Este comando existe para hacer que comenzar sea un poco más rápido y fácil.


Crea una nueva plantilla de proyecto Bun con bun create. Este es un comando flexible que se puede usar para crear un nuevo proyecto desde un componente React, un paquete npm create-<template>, un repositorio de GitHub o una plantilla local.

Si estás buscando crear un nuevo proyecto vacío, usa bun init.

Desde un componente React

bun create ./MiComponente.tsx convierte un componente React existente en un entorno de desarrollo completo con recarga en caliente y compilaciones de producción en un solo comando.

bash
$ bun create ./MiComponente.jsx # .tsx también soportado

Nota

🚀 Sucesor de Create React Appbun create <componente> proporciona todo lo que los desarrolladores amaron de Create React App, pero con herramientas modernas, compilaciones más rápidas y soporte de backend.

Cómo funciona esto

Cuando ejecutas bun create <componente>, Bun:

  1. Usa el empaquetador JavaScript de Bun para analizar tu grafo de módulos.
  2. Recopila todas las dependencias necesarias para ejecutar el componente.
  3. Escanea las exportaciones del punto de entrada en busca de un componente React.
  4. Genera un archivo package.json con las dependencias y scripts necesarios para ejecutar el componente.
  5. Instala las dependencias faltantes usando bun install --only-missing.
  6. Genera los siguientes archivos:
    • ${componente}.html
    • ${componente}.client.tsx (punto de entrada para el frontend)
    • ${componente}.css (archivo css)
  7. Inicia un servidor de desarrollo de frontend automáticamente.

Usando TailwindCSS con Bun

TailwindCSS es una herramienta de CSS extremadamente popular utilizada para estilizar aplicaciones web.

Cuando ejecutas bun create <componente>, Bun escanea tu archivo JSX/TSX en busca de nombres de clase de TailwindCSS (y cualquier archivo que importe). Si detecta nombres de clase de TailwindCSS, agregará las siguientes dependencias a tu package.json:

json
{
  "dependencies": {
    "tailwindcss": "^4",
    "bun-plugin-tailwind": "latest"
  }
}

También configuramos bunfig.toml para usar el plugin TailwindCSS de Bun con Bun.serve()

toml
[serve.static]
plugins = ["bun-plugin-tailwind"]

Y un archivo ${componente}.css con @import "tailwindcss"; en la parte superior:

css
@import "tailwindcss";

Usando shadcn/ui con Bun

shadcn/ui es una herramienta de biblioteca de componentes extremadamente popular para construir aplicaciones web.

bun create <componente> escanea cualquier componente shadcn/ui importado desde @/components/ui.

Si encuentra alguno, ejecuta:

bash
# Asumiendo que bun detectó importaciones a @/components/ui/accordion y @/components/ui/button
bunx shadcn@canary add accordion button # y cualquier otro componente

Dado que shadcn/ui mismo usa TailwindCSS, bun create también agrega las dependencias necesarias de TailwindCSS a tu package.json y configura bunfig.toml para usar el plugin TailwindCSS de Bun con Bun.serve() como se describió anteriormente.

Adicionalmente, configuramos lo siguiente:

  • tsconfig.json para alias "@/*" a "src/*" o . (dependiendo de si hay un directorio src/)
  • components.json para que shadcn/ui sepa que es un proyecto shadcn/ui
  • archivo styles/globals.css que configura Tailwind v4 de la manera que shadcn/ui espera
  • archivo ${componente}.build.ts que compila el componente para producción con bun-plugin-tailwind configurado

bun create ./MiComponente.jsx es una de las formas más fáciles de ejecutar código generado por LLMs como Claude o ChatGPT localmente.

Desde npm

sh
bun create <plantilla> [<destino>]

Asumiendo que no tienes una plantilla local con el mismo nombre, este comando descargará y ejecutará el paquete create-<plantilla> desde npm. Los siguientes dos comandos se comportarán idénticamente:

sh
bun create remix
bunx create-remix

Consulta la documentación del paquete create-<plantilla> asociado para obtener documentación completa e instrucciones de uso.

Desde GitHub

Esto descargará el contenido del repositorio de GitHub al disco.

bash
bun create <usuario>/<repo>
bun create github.com/<usuario>/<repo>

Opcionalmente especifica un nombre para la carpeta de destino. Si no se especifica un destino, se usará el nombre del repo.

bash
bun create <usuario>/<repo> midirectorio
bun create github.com/<usuario>/<repo> midirectorio

Bun realizará los siguientes pasos:

  • Descargar la plantilla
  • Copiar todos los archivos de plantilla en la carpeta de destino
  • Instalar dependencias con bun install.
  • Inicializar un repositorio Git fresco. Opta por no participar con la bandera --no-git.
  • Ejecutar el script start configurado de la plantilla, si está definido.

NOTE

Por defecto Bun no _sobrescribirá_ ningún archivo existente. Usa la bandera `--force` para sobrescribir archivos existentes.

Desde una plantilla local

Advertencia

A diferencia de las plantillas remotas, ejecutar bun create con una plantilla local eliminará toda la carpeta de destino si ya existe. ¡Ten cuidado.

El plantillador de Bun se puede extender para soportar plantillas personalizadas definidas en tu sistema de archivos local. Estas plantillas deben vivir en uno de los siguientes directorios:

  • $HOME/.bun-create/<nombre>: plantillas globales
  • <raíz del proyecto>/.bun-create/<nombre>: plantillas específicas del proyecto

Nota

Puedes personalizar la ruta de plantilla global estableciendo la variable de entorno BUN_CREATE_DIR.

Para crear una plantilla local, navega a $HOME/.bun-create y crea un nuevo directorio con el nombre deseado de tu plantilla.

bash
cd $HOME/.bun-create
mkdir foo
cd foo

Luego, crea un archivo package.json en ese directorio con el siguiente contenido:

json
{
  "name": "foo"
}

Puedes ejecutar bun create foo en otro lugar de tu sistema de archivos para verificar que Bun está encontrando correctamente tu plantilla local.

Configuración de lógica

Puedes especificar scripts de configuración previos y posteriores a la instalación en la sección "bun-create" del package.json de tu plantilla local.

json
{
  "name": "@bun-examples/simplereact",
  "version": "0.0.1",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "bun-create": {
    "preinstall": "echo 'Instalando...'", // un solo comando
    "postinstall": ["echo '¡Hecho!'"], // un array de comandos
    "start": "bun run echo '¡Hola mundo!'"
  }
}

Los siguientes campos son soportados. Cada uno de estos puede corresponder a una cadena o array de cadenas. Un array de comandos se ejecutará en orden.

CampoDescripción
postinstallse ejecuta después de instalar dependencias
preinstallse ejecuta antes de instalar dependencias

Después de clonar una plantilla, bun create eliminará automáticamente la sección "bun-create" del package.json antes de escribirla en la carpeta de destino.

Referencia

Banderas CLI

BanderaDescripción
--forceSobrescribir archivos existentes
--no-installOmitir instalación de node_modules y tareas
--no-gitNo inicializar un repositorio git
--openIniciar y abrir en el navegador después de terminar

Variables de entorno

NombreDescripción
GITHUB_API_DOMAINSi estás usando una empresa de GitHub o un proxy, puedes personalizar el dominio de GitHub que Bun consulta para descargas
GITHUB_TOKEN (o GITHUB_ACCESS_TOKEN)Esto permite que bun create funcione con repositorios privados o si obtienes límite de tasa. GITHUB_TOKEN se elige sobre GITHUB_ACCESS_TOKEN si ambos existen.

Cómo funciona bun create

Cuando ejecutas bun create ${plantilla} ${destino}, esto es lo que sucede:

SI plantilla remota

  1. GET registry.npmjs.org/@bun-examples/${plantilla}/latest y analizarlo
  2. GET registry.npmjs.org/@bun-examples/${plantilla}/-/${plantilla}-${versionMasReciente}.tgz
  3. Descomprimir y extraer ${plantilla}-${versionMasReciente}.tgz en ${destino}
    • Si hay archivos que sobrescribirían, advertir y salir a menos que se pase --force

SI repositorio de GitHub

  1. Descargar el archivo tarball desde la API de GitHub
  2. Descomprimir y extraer en ${destino}
    • Si hay archivos que sobrescribirían, advertir y salir a menos que se pase --force

SINO SI plantilla local

  1. Abrir carpeta de plantilla local

  2. Eliminar directorio de destino recursivamente

  3. Copiar archivos recursivamente usando las llamadas al sistema más rápidas disponibles (en macOS fcopyfile y Linux, copy_file_range). No copiar ni atravesar la carpeta node_modules si existe (esto solo lo hace más rápido que cp)

  4. Analizar el package.json (¡de nuevo!), actualizar name para que sea ${nombreBase(destino)}, eliminar la sección bun-create del package.json y guardar el package.json actualizado en disco.

    • SI se detecta Next.js, agregar bun-framework-next a la lista de dependencias
    • SI se detecta Create React App, agregar el punto de entrada en /src/index.{js,jsx,ts,tsx} a public/index.html
    • SI se detecta Relay, agregar bun-macro-relay para que Relay funcione
  5. Auto-detectar el cliente npm, prefiriendo pnpm, yarn (v1), y por último npm

  6. Ejecutar cualquier tarea definida en "bun-create": { "preinstall" } con el cliente npm

  7. Ejecutar ${clienteNpm} install a menos que se pase --no-install O no haya dependencias en package.json

  8. Ejecutar cualquier tarea definida en "bun-create": { "postinstall" } con el cliente npm

  9. Ejecutar git init; git add -A .; git commit -am "Commit Inicial";

    • Renombrar gitignore a .gitignore. NPM elimina automáticamente los archivos .gitignore de aparecer en los paquetes.
    • Si hay dependencias, esto se ejecuta en un hilo separado concurrentemente mientras se instalan los node_modules
    • Usar libgit2 si está disponible fue probado y tuvo un rendimiento 3 veces más lento en microbenchmarks

Bun por www.bunjs.com.cn editar