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.
$ bun create ./MiComponente.jsx # .tsx también soportadoNota
🚀 Sucesor de Create React App — bun 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:
- Usa el empaquetador JavaScript de Bun para analizar tu grafo de módulos.
- Recopila todas las dependencias necesarias para ejecutar el componente.
- Escanea las exportaciones del punto de entrada en busca de un componente React.
- Genera un archivo
package.jsoncon las dependencias y scripts necesarios para ejecutar el componente. - Instala las dependencias faltantes usando
bun install --only-missing. - Genera los siguientes archivos:
${componente}.html${componente}.client.tsx(punto de entrada para el frontend)${componente}.css(archivo css)
- 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:
{
"dependencies": {
"tailwindcss": "^4",
"bun-plugin-tailwind": "latest"
}
}También configuramos bunfig.toml para usar el plugin TailwindCSS de Bun con Bun.serve()
[serve.static]
plugins = ["bun-plugin-tailwind"]Y un archivo ${componente}.css con @import "tailwindcss"; en la parte superior:
@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:
# Asumiendo que bun detectó importaciones a @/components/ui/accordion y @/components/ui/button
bunx shadcn@canary add accordion button # y cualquier otro componenteDado 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.jsonpara alias"@/*"a"src/*"o.(dependiendo de si hay un directoriosrc/)components.jsonpara que shadcn/ui sepa que es un proyecto shadcn/ui- archivo
styles/globals.cssque configura Tailwind v4 de la manera que shadcn/ui espera - archivo
${componente}.build.tsque compila el componente para producción conbun-plugin-tailwindconfigurado
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
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:
bun create remix
bunx create-remixConsulta 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.
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.
bun create <usuario>/<repo> midirectorio
bun create github.com/<usuario>/<repo> midirectorioBun 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
startconfigurado 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.
cd $HOME/.bun-create
mkdir foo
cd fooLuego, crea un archivo package.json en ese directorio con el siguiente contenido:
{
"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.
{
"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.
| Campo | Descripción |
|---|---|
postinstall | se ejecuta después de instalar dependencias |
preinstall | se 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
| Bandera | Descripción |
|---|---|
--force | Sobrescribir archivos existentes |
--no-install | Omitir instalación de node_modules y tareas |
--no-git | No inicializar un repositorio git |
--open | Iniciar y abrir en el navegador después de terminar |
Variables de entorno
| Nombre | Descripción |
|---|---|
GITHUB_API_DOMAIN | Si 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
- GET
registry.npmjs.org/@bun-examples/${plantilla}/latesty analizarlo - GET
registry.npmjs.org/@bun-examples/${plantilla}/-/${plantilla}-${versionMasReciente}.tgz - Descomprimir y extraer
${plantilla}-${versionMasReciente}.tgzen${destino}- Si hay archivos que sobrescribirían, advertir y salir a menos que se pase
--force
- Si hay archivos que sobrescribirían, advertir y salir a menos que se pase
SI repositorio de GitHub
- Descargar el archivo tarball desde la API de GitHub
- Descomprimir y extraer en
${destino}- Si hay archivos que sobrescribirían, advertir y salir a menos que se pase
--force
- Si hay archivos que sobrescribirían, advertir y salir a menos que se pase
SINO SI plantilla local
Abrir carpeta de plantilla local
Eliminar directorio de destino recursivamente
Copiar archivos recursivamente usando las llamadas al sistema más rápidas disponibles (en macOS
fcopyfiley Linux,copy_file_range). No copiar ni atravesar la carpetanode_modulessi existe (esto solo lo hace más rápido quecp)Analizar el
package.json(¡de nuevo!), actualizarnamepara que sea${nombreBase(destino)}, eliminar la secciónbun-createdelpackage.jsony guardar elpackage.jsonactualizado en disco.- SI se detecta Next.js, agregar
bun-framework-nexta la lista de dependencias - SI se detecta Create React App, agregar el punto de entrada en
/src/index.{js,jsx,ts,tsx}apublic/index.html - SI se detecta Relay, agregar
bun-macro-relaypara que Relay funcione
- SI se detecta Next.js, agregar
Auto-detectar el cliente npm, prefiriendo
pnpm,yarn(v1), y por últimonpmEjecutar cualquier tarea definida en
"bun-create": { "preinstall" }con el cliente npmEjecutar
${clienteNpm} installa menos que se pase--no-installO no haya dependencias en package.jsonEjecutar cualquier tarea definida en
"bun-create": { "postinstall" }con el cliente npmEjecutar
git init; git add -A .; git commit -am "Commit Inicial";- Renombrar
gitignorea.gitignore. NPM elimina automáticamente los archivos.gitignorede 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
- Renombrar