Nota

Non hai bisogno di bun create per usare Bun. Non hai bisogno di alcuna configurazione. Questo comando esiste per rendere l'inizio un po' più rapido e semplice.

---

Template un nuovo progetto Bun con bun create. Questo è un comando flessibile che può essere usato per creare un nuovo progetto da un componente React, un pacchetto npm create-<template>, un repo GitHub o un template locale.

Se stai cercando di creare un nuovo progetto vuoto, usa bun init.

Da un componente React

bun create ./MyComponent.tsx trasforma un componente React esistente in un ambiente di sviluppo completo con hot reload e build di produzione in un solo comando.

$ bun create ./MyComponent.jsx # .tsx anche supportato

Nota

🚀 Successore di Create React App — bun create <component> fornisce tutto ciò che gli sviluppatori amavano di Create React App, ma con strumenti moderni, build più veloci e supporto backend.

Come funziona

Quando esegui bun create <component>, Bun:

1. Usa il bundler JavaScript di Bun per analizzare il tuo grafo dei moduli.
2. Raccoglie tutte le dipendenze necessarie per eseguire il componente.
3. Scansiona gli export del punto di ingresso per un componente React.
4. Genera un file package.json con le dipendenze e gli script necessari per eseguire il componente.
5. Installa tutte le dipendenze mancanti usando bun install --only-missing.
6. Genera i seguenti file:
   • ${component}.html
   • ${component}.client.tsx (punto di ingresso per il frontend)
   • ${component}.css (file css)
7. Avvia automaticamente un server di sviluppo frontend.

Usare TailwindCSS con Bun

TailwindCSS è un framework CSS utility-first estremamente popolare usato per stilizzare le applicazioni web.

Quando esegui bun create <component>, Bun scansiona il tuo file JSX/TSX per i nomi delle classi TailwindCSS (e qualsiasi file che importa). Se rileva nomi di classi TailwindCSS, aggiungerà le seguenti dipendenze al tuo package.json:

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

Configuriamo anche bunfig.toml per usare il plugin TailwindCSS di Bun con Bun.serve()

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

E un file ${component}.css con @import "tailwindcss"; in alto:

@import "tailwindcss";

Usare shadcn/ui con Bun

shadcn/ui è uno strumento di libreria di componenti estremamente popolare per la costruzione di applicazioni web.

bun create <component> scansiona qualsiasi componente shadcn/ui importato da @/components/ui.

Se ne trova, esegue:

# Supponendo che bun abbia rilevato importazioni da @/components/ui/accordion e @/components/ui/button
bunx shadcn@canary add accordion button # e qualsiasi altro componente

Poiché shadcn/ui stesso usa TailwindCSS, bun create aggiunge anche le necessarie dipendenze TailwindCSS al tuo package.json e configura bunfig.toml per usare il plugin TailwindCSS di Bun con Bun.serve() come descritto sopra.

Inoltre, impostiamo quanto segue:

• tsconfig.json per aliasare "@/*" a "src/*" o . (a seconda se c'è una directory src/)
• components.json per far sapere a shadcn/ui che è un progetto shadcn/ui
• un file styles/globals.css che configura Tailwind v4 nel modo che shadcn/ui si aspetta
• un file ${component}.build.ts che costruisce il componente per la produzione con bun-plugin-tailwind configurato

bun create ./MyComponent.jsx è uno dei modi più semplici per eseguire codice generato da LLM come Claude o ChatGPT localmente.

Da npm

bun create <template> [<destination>]

Supponendo che tu non abbia un template locale con lo stesso nome, questo comando scaricherà ed eseguirà il pacchetto create-<template> da npm. I seguenti due comandi si comporteranno in modo identico:

bun create remix
bunx create-remix```

Consulta la documentazione del pacchetto `create-<template>` associato per la documentazione completa e le istruzioni d'uso.

## Da GitHub

Questo scaricherà il contenuto del repo GitHub su disco.

```bash
bun create <user>/<repo>
bun create github.com/<user>/<repo>

Opzionalmente specifica un nome per la cartella di destinazione. Se nessuna destinazione è specificata, verrà usato il nome del repo.

bun create <user>/<repo> mydir
bun create github.com/<user>/<repo> mydir

Bun eseguirà i seguenti passaggi:

• Scarica il template
• Copia tutti i file del template nella cartella di destinazione
• Installa le dipendenze con bun install.
• Inizializza un repo Git fresco. Opta out con il flag --no-git.
• Esegue lo script start configurato del template, se definito.

Da un template locale

Attenzione

A differenza dei template remoti, eseguire bun create con un template locale cancellerà l'intera cartella di destinazione se esiste già! Fai attenzione.

Il template di Bun può essere esteso per supportare template personalizzati definiti sul tuo file system locale. Questi template dovrebbero risiedere in una delle seguenti directory:

• $HOME/.bun-create/<name>: template globali
• <project root>/.bun-create/<name>: template specifici del progetto

Nota

Puoi personalizzare il percorso del template globale impostando la variabile di ambiente BUN_CREATE_DIR.

Per creare un template locale, naviga su $HOME/.bun-create e crea una nuova directory con il nome desiderato del tuo template.

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

Poi, crea un file package.json in quella directory con il seguente contenuto:

{
  "name": "foo"
}

Puoi eseguire bun create foo altrove sul tuo file system per verificare che Bun stia correttamente trovando il tuo template locale.

Logica di setup

Puoi specificare script di setup pre e post-install nella sezione "bun-create" del package.json del tuo template locale.

{
  "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 'Installing...'", // un singolo comando
    "postinstall": ["echo 'Done!'"], // un array di comandi
    "start": "bun run echo 'Hello world!'"
  }
}

I seguenti campi sono supportati. Ognuno di questi può corrispondere a una stringa o array di stringhe. Un array di comandi sarà eseguito in ordine.

Campo	Descrizione
postinstall	esegue dopo l'installazione delle dipendenze
preinstall	esegue prima dell'installazione delle dipendenze

Dopo aver clonato un template, bun create rimuoverà automaticamente la sezione "bun-create" dal package.json prima di scriverla nella cartella di destinazione.

Riferimento

Flag CLI

Flag	Descrizione
--force	Sovrascrivi file esistenti
--no-install	Salta l'installazione di node_modules e task
--no-git	Non inizializzare un repository git
--open	Avvia e apri nel browser dopo il completamento

Variabili di ambiente

Nome	Descrizione
GITHUB_API_DOMAIN	Se stai usando un'istanza GitHub enterprise o un proxy, puoi personalizzare il dominio GitHub a cui Bun si rivolge per i download
GITHUB_TOKEN (o GITHUB_ACCESS_TOKEN)	Questo permette a bun create di funzionare con repository privati o se vieni rate-limited. GITHUB_TOKEN è preferito su GITHUB_ACCESS_TOKEN se entrambi esistono.

Come funziona bun create

Quando esegui bun create ${template} ${destination}, ecco cosa succede:

SE template remoto

1. GET registry.npmjs.org/@bun-examples/${template}/latest e parsalo
2. GET registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz
3. Decomprimi ed estrai ${template}-${latestVersion}.tgz in ${destination}
   • Se ci sono file che verrebbero sovrascritti, avvisa ed esci a meno che non venga passato --force

SE repo GitHub

1. Scarica il tarball dall'API di GitHub
2. Decomprimi ed estrai in ${destination}
   • Se ci sono file che verrebbero sovrascritti, avvisa ed esci a meno che non venga passato --force

ALTRIMENTI SE template locale

1. Apri la cartella del template locale

2. Elimina la directory di destinazione ricorsivamente

3. Copia i file ricorsivamente usando le chiamate di sistema più veloci disponibili (su macOS fcopyfile e su Linux, copy_file_range). Non copiare o attraversare la cartella node_modules se esiste (questo da solo lo rende più veloce di cp)

4. Parsa il package.json (di nuovo!), aggiorna name per essere ${basename(destination)}, rimuovi la sezione bun-create dal package.json e salva il package.json aggiornato su disco.

   • SE Next.js viene rilevato, aggiungi bun-framework-next alla lista delle dipendenze
   • SE Create React App viene rilevato, aggiungi il punto di ingresso in /src/index.{js,jsx,ts,tsx} a public/index.html
   • SE Relay viene rilevato, aggiungi bun-macro-relay così che Relay funzioni

5. Rileva automaticamente il client npm, preferendo pnpm, yarn (v1), e infine npm

6. Esegui qualsiasi task definita in "bun-create": { "preinstall" } con il client npm

7. Esegui ${npmClient} install a meno che non venga passato --no-install O non ci siano dipendenze nel package.json

8. Esegui qualsiasi task definita in "bun-create": { "postinstall" } con il client npm

9. Esegui git init; git add -A .; git commit -am "Initial Commit";

   • Rinomina gitignore in .gitignore. NPM rimuove automaticamente i file .gitignore dai pacchetti.
   • Se ci sono dipendenze, questo viene eseguito in un thread separato contemporaneamente mentre i node_modules vengono installati
   • Usare libgit2 se disponibile è stato testato e ha performato 3x più lento nei microbenchmarks