Hinweis

Sie benötigen bun create nicht, um Bun zu verwenden. Sie benötigen überhaupt keine Konfiguration. Dieser Befehl existiert, um den Einstieg etwas schneller und einfacher zu machen.

---

Erstellen Sie ein neues Bun-Projekt mit bun create. Dies ist ein flexibler Befehl, der verwendet werden kann, um ein neues Projekt aus einer React-Komponente, einem create-<template> npm-Paket, einem GitHub-Repository oder einer lokalen Vorlage zu erstellen.

Wenn Sie ein brandneues leeres Projekt erstellen möchten, verwenden Sie bun init.

Aus einer React-Komponente

bun create ./MyComponent.tsx verwandelt eine bestehende React-Komponente in eine vollständige Entwicklungsumgebung mit Hot-Reload und Produktions-Builds in einem Befehl.

$ bun create ./MyComponent.jsx # .tsx wird ebenfalls unterstützt

Hinweis

🚀 Create React App Nachfolger — bun create <component> bietet alles, was Entwickler an Create React App geliebt haben, aber mit moderner Tooling, schnelleren Builds und Backend-Unterstützung.

So funktioniert dies

Wenn Sie bun create <component> ausführen, führt Bun Folgendes durch:

1. Verwendet Buns JavaScript-Bundler, um Ihren Modulgraphen zu analysieren.
2. Sammelt alle Abhängigkeiten, die zum Ausführen der Komponente benötigt werden.
3. Durchsucht die Exporte des Einstiegspunkts nach einer React-Komponente.
4. Generiert eine package.json-Datei mit den Abhängigkeiten und Skripten, die zum Ausführen der Komponente benötigt werden.
5. Installiert fehlende Abhängigkeiten mit bun install --only-missing.
6. Generiert die folgenden Dateien:
   • ${component}.html
   • ${component}.client.tsx (Einstiegspunkt für das Frontend)
   • ${component}.css (CSS-Datei)
7. Startet automatisch einen Frontend-Entwicklungsserver.

Verwendung von TailwindCSS mit Bun

TailwindCSS ist ein äußerst beliebtes Utility-First-CSS-Framework zur Gestaltung von Webanwendungen.

Wenn Sie bun create <component> ausführen, durchsucht Bun Ihre JSX/TSX-Datei nach TailwindCSS-Klassennamen (und alle Dateien, die sie importiert). Wenn es TailwindCSS-Klassennamen erkennt, fügt es die folgenden Abhängigkeiten zu Ihrer package.json hinzu:

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

Wir konfigurieren auch bunfig.toml, um Buns TailwindCSS-Plugin mit Bun.serve() zu verwenden

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

Und eine ${component}.css-Datei mit @import "tailwindcss"; am Anfang:

@import "tailwindcss";

Verwendung von shadcn/ui mit Bun

shadcn/ui ist ein äußerst beliebtes Komponentenbibliothek-Tool zum Erstellen von Webanwendungen.

bun create <component> durchsucht nach shadcn/ui-Komponenten, die aus @/components/ui importiert werden.

Wenn es welche findet, führt es Folgendes aus:

# Angenommen, bun hat Importe aus @/components/ui/accordion und @/components/ui/button erkannt
bunx shadcn@canary add accordion button # und alle anderen Komponenten

Da shadcn/ui selbst TailwindCSS verwendet, fügt bun create auch die notwendigen TailwindCSS-Abhängigkeiten zu Ihrer package.json hinzu und konfiguriert bunfig.toml, um Buns TailwindCSS-Plugin mit Bun.serve() zu verwenden, wie oben beschrieben.

Zusätzlich richten wir Folgendes ein:

• tsconfig.json, um "@/*" auf "src/*" oder . zu aliasieren (abhängig davon, ob es ein src/-Verzeichnis gibt)
• components.json, damit shadcn/ui weiß, dass es ein shadcn/ui-Projekt ist
• styles/globals.css-Datei, die Tailwind v4 so konfiguriert, wie shadcn/ui es erwartet
• ${component}.build.ts-Datei, die die Komponente für die Produktion mit konfiguriertem bun-plugin-tailwind erstellt

bun create ./MyComponent.jsx ist eine der einfachsten Möglichkeiten, von LLMs wie Claude oder ChatGPT generierten Code lokal auszuführen.

Von npm

bun create <template> [<destination>]

Angenommen, Sie haben keine lokale Vorlage mit demselben Namen, lädt dieser Befehl das create-<template>-Paket von npm herunter und führt es aus. Die folgenden beiden Befehle verhalten sich identisch:

bun create remix
bunx create-remix

Lesen Sie die Dokumentation des zugehörigen create-<template>-Pakets für vollständige Dokumentation und Verwendungsinstruktionen.

Von GitHub

Dies lädt den Inhalt des GitHub-Repositories auf die Festplatte herunter.

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

Optional können Sie einen Namen für den Zielordner angeben. Wenn kein Ziel angegeben wird, wird der Repository-Name verwendet.

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

Bun führt die folgenden Schritte durch:

• Lädt die Vorlage herunter
• Kopiert alle Vorlagendateien in den Zielordner
• Installiert Abhängigkeiten mit bun install.
• Initialisiert ein frisches Git-Repository. Optieren Sie mit dem --no-git-Flag aus.
• Führt das konfigurierte start-Skript der Vorlage aus, falls definiert.

NOTE

Standardmäßig überschreibt Bun keine bestehenden Dateien. Verwenden Sie das `--force`-Flag, um bestehende Dateien zu überschreiben.

Aus einer lokalen Vorlage

Warnung

Im Gegensatz zu Remote-Vorlagen löscht die Ausführung von bun create mit einer lokalen Vorlage den gesamten Zielordner, wenn er bereits existiert! Seien Sie vorsichtig.

Buns Templater kann erweitert werden, um benutzerdefinierte Vorlagen zu unterstützen, die auf Ihrem lokalen Dateisystem definiert sind. Diese Vorlagen sollten in einem der folgenden Verzeichnisse gespeichert sein:

• $HOME/.bun-create/<name>: globale Vorlagen
• <project root>/.bun-create/<name>: projektspezifische Vorlagen

Hinweis

Sie können den globalen Vorlagenpfad anpassen, indem Sie die BUN_CREATE_DIR-Umgebungsvariable setzen.

Um eine lokale Vorlage zu erstellen, navigieren Sie zu $HOME/.bun-create und erstellen Sie ein neues Verzeichnis mit dem gewünschten Namen Ihrer Vorlage.

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

Erstellen Sie dann eine package.json-Datei in diesem Verzeichnis mit dem folgenden Inhalt:

{
  "name": "foo"
}

Sie können bun create foo an anderer Stelle auf Ihrem Dateisystem ausführen, um zu überprüfen, ob Bun Ihre lokale Vorlage korrekt findet.

Setup-Logik

Sie können Pre- und Post-Install-Setup-Skripte im "bun-create"-Abschnitt der package.json Ihrer lokalen Vorlage angeben.

{
  "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...'", // ein einzelner Befehl
    "postinstall": ["echo 'Done!'"], // ein Array von Befehlen
    "start": "bun run echo 'Hello world!'"
  }
}

Die folgenden Felder werden unterstützt. Jedes dieser Felder kann einem String oder Array von Strings entsprechen. Ein Array von Befehlen wird in der Reihenfolge ausgeführt.

Feld	Beschreibung
postinstall	wird nach der Installation der Abhängigkeiten ausgeführt
preinstall	wird vor der Installation der Abhängigkeiten ausgeführt

Nach dem Klonen einer Vorlage entfernt bun create automatisch den "bun-create"-Abschnitt aus der package.json, bevor sie in den Zielordner geschrieben wird.

Referenz

CLI-Flags

Flag	Beschreibung
--force	Bestehende Dateien überschreiben
--no-install	Installation von node_modules und Aufgaben überspringen
--no-git	Kein Git-Repository initialisieren
--open	Nach Abschluss im Browser starten und öffnen

Umgebungsvariablen

Name	Beschreibung
GITHUB_API_DOMAIN	Wenn Sie GitHub Enterprise oder einen Proxy verwenden, können Sie die GitHub-Domäne anpassen, die Bun für Downloads anfragt
GITHUB_TOKEN (oder GITHUB_ACCESS_TOKEN)	Dies ermöglicht bun create mit privaten Repositories oder wenn Sie ein Rate-Limit erhalten. GITHUB_TOKEN wird gegenüber GITHUB_ACCESS_TOKEN gewählt, wenn beide existieren.

Wie bun create funktioniert

Wenn Sie bun create ${template} ${destination} ausführen, passiert Folgendes:

WENN Remote-Vorlage

1. GET registry.npmjs.org/@bun-examples/${template}/latest und parsen
2. GET registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz
3. Dekomprimieren und extrahieren von ${template}-${latestVersion}.tgz nach ${destination}
   • Wenn es Dateien gibt, die überschreiben würden, warnen und beenden, es sei denn, --force wird übergeben

WENN GitHub-Repository

1. Herunterladen des Tarballs von der GitHub-API
2. Dekomprimieren und extrahieren nach ${destination}
   • Wenn es Dateien gibt, die überschreiben würden, warnen und beenden, es sei denn, --force wird übergeben

SONST WENN lokale Vorlage

1. Lokalen Vorlagenordner öffnen

2. Zielverzeichnis rekursiv löschen

3. Dateien rekursiv mit den schnellsten verfügbaren Systemaufrufen kopieren (auf macOS fcopyfile und Linux copy_file_range). Den node_modules-Ordner nicht kopieren oder durchsuchen, falls vorhanden (dies allein macht es schneller als cp)

4. Die package.json (wieder!) parsen, name zu ${basename(destination)} aktualisieren, den bun-create-Abschnitt aus der package.json entfernen und die aktualisierte package.json auf die Festplatte speichern.

   • WENN Next.js erkannt wird, bun-framework-next zur Liste der Abhängigkeiten hinzufügen
   • WENN Create React App erkannt wird, den Einstiegspunkt in /src/index.{js,jsx,ts,tsx} zu public/index.html hinzufügen
   • WENN Relay erkannt wird, bun-macro-relay hinzufügen, damit Relay funktioniert

5. Den npm-Client automatisch erkennen, wobei pnpm, yarn (v1) und zuletzt npm bevorzugt werden

6. Alle im "bun-create": { "preinstall" } definierten Aufgaben mit dem npm-Client ausführen

7. ${npmClient} install ausführen, es sei denn, --no-install wird übergeben ODER es sind keine Abhängigkeiten in der package.json

8. Alle im "bun-create": { "postinstall" } definierten Aufgaben mit dem npm-Client ausführen

9. git init; git add -A .; git commit -am "Initial Commit"; ausführen

   • gitignore in .gitignore umbenennen. NPM entfernt automatisch .gitignore-Dateien aus Paketen.
   • Wenn es Abhängigkeiten gibt, läuft dies in einem separaten Thread gleichzeitig, während node_modules installiert werden
   • Die Verwendung von libgit2, falls verfügbar, wurde getestet und war in Mikrobenchmarks 3x langsamer