Note

Vous n'avez pas besoin de bun create pour utiliser Bun. Vous n'avez besoin d'aucune configuration. Cette commande existe pour rendre le démarrage un peu plus rapide et facile.

---

Créez un nouveau projet Bun avec bun create. Il s'agit d'une commande flexible qui peut être utilisée pour créer un nouveau projet à partir d'un composant React, d'un paquet npm create-<template>, d'un dépôt GitHub ou d'un modèle local.

Si vous cherchez à créer un nouveau projet vide, utilisez bun init.

À partir d'un composant React

bun create ./MyComponent.tsx transforme un composant React existant en un environnement de développement complet avec rechargement à chaud et builds de production en une seule commande.

$ bun create ./MyComponent.jsx # .tsx également pris en charge

Note

🚀 Successeur de Create React App — bun create <component> fournit tout ce que les développeurs adoraient dans Create React App, mais avec des outils modernes, des builds plus rapides et un support backend.

Comment cela fonctionne

Lorsque vous exécutez bun create <component>, Bun :

1. Utilise le bundler JavaScript de Bun pour analyser votre graphe de modules.
2. Collecte toutes les dépendances nécessaires pour exécuter le composant.
3. Analyse les exports du point d'entrée pour trouver un composant React.
4. Génère un fichier package.json avec les dépendances et scripts nécessaires pour exécuter le composant.
5. Installe toutes les dépendances manquantes avec bun install --only-missing.
6. Génère les fichiers suivants :
   • ${component}.html
   • ${component}.client.tsx (point d'entrée pour le frontend)
   • ${component}.css (fichier css)
7. Démarre automatiquement un serveur de développement frontend.

Utiliser TailwindCSS avec Bun

TailwindCSS est un framework CSS utilitaire extrêmement populaire utilisé pour styliser les applications web.

Lorsque vous exécutez bun create <component>, Bun analyse votre fichier JSX/TSX pour détecter les noms de classes TailwindCSS (et tous les fichiers qu'il importe). S'il détecte des noms de classes TailwindCSS, il ajoutera les dépendances suivantes à votre package.json :

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

Nous configurons également bunfig.toml pour utiliser le plugin TailwindCSS de Bun avec Bun.serve()

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

Et un fichier ${component}.css avec @import "tailwindcss"; en haut :

@import "tailwindcss";

Utiliser shadcn/ui avec Bun

shadcn/ui est un outil de bibliothèque de composants extrêmement populaire pour construire des applications web.

bun create <component> analyse tous les composants shadcn/ui importés depuis @/components/ui.

S'il en trouve, il exécute :

# En supposant que bun a détecté des imports vers @/components/ui/accordion et @/components/ui/button
bunx shadcn@canary add accordion button # et tous les autres composants

Puisque shadcn/ui utilise lui-même TailwindCSS, bun create ajoute également les dépendances TailwindCSS nécessaires à votre package.json et configure bunfig.toml pour utiliser le plugin TailwindCSS de Bun avec Bun.serve() comme décrit ci-dessus.

De plus, nous configurons ce qui suit :

• tsconfig.json pour aliaser "@/*" vers "src/*" ou . (selon s'il y a un répertoire src/)
• components.json pour que shadcn/ui sache que c'est un projet shadcn/ui
• Un fichier styles/globals.css qui configure Tailwind v4 de la manière attendue par shadcn/ui
• Un fichier ${component}.build.ts qui build le composant pour la production avec bun-plugin-tailwind configuré

bun create ./MyComponent.jsx est l'un des moyens les plus faciles d'exécuter localement du code généré par des LLM comme Claude ou ChatGPT.

Depuis npm

bun create <template> [<destination>]

En supposant que vous n'ayez pas de modèle local avec le même nom, cette commande téléchargera et exécutera le paquet create-<template> depuis npm. Les deux commandes suivantes se comporteront de manière identique :

bun create remix
bunx create-remix

Consultez la documentation du paquet create-<template> associé pour une documentation complète et des instructions d'utilisation.

Depuis GitHub

Cela téléchargera le contenu du dépôt GitHub sur le disque.

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

Optionnellement, spécifiez un nom pour le dossier de destination. Si aucune destination n'est spécifiée, le nom du dépôt sera utilisé.

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

Bun effectuera les étapes suivantes :

• Télécharger le modèle
• Copier tous les fichiers du modèle dans le dossier de destination
• Installer les dépendances avec bun install.
• Initialiser un nouveau dépôt Git. Optez pour ne pas le faire avec l'option --no-git.
• Exécuter le script start configuré du modèle, s'il est défini.

NOTE

Par défaut, Bun n'écrasera _pas_ les fichiers existants. Utilisez l'option `--force` pour écraser les fichiers existants.

Depuis un modèle local

Avertissement

Contrairement aux modèles distants, l'exécution de bun create avec un modèle local supprimera entièrement le dossier de destination s'il existe déjà ! Soyez prudent.

Le templateur de Bun peut être étendu pour prendre en charge des modèles personnalisés définis sur votre système de fichiers local. Ces modèles doivent se trouver dans l'un des répertoires suivants :

• $HOME/.bun-create/<name> : modèles globaux
• <project root>/.bun-create/<name> : modèles spécifiques au projet

Note

Vous pouvez personnaliser le chemin du modèle global en définissant la variable d'environnement BUN_CREATE_DIR.

Pour créer un modèle local, accédez à $HOME/.bun-create et créez un nouveau répertoire avec le nom souhaité de votre modèle.

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

Ensuite, créez un fichier package.json dans ce répertoire avec le contenu suivant :

{
  "name": "foo"
}

Vous pouvez exécuter bun create foo ailleurs sur votre système de fichiers pour vérifier que Bun trouve correctement votre modèle local.

Configuration

Vous pouvez spécifier des scripts de configuration pré et post-installation dans la section "bun-create" du package.json de votre modèle 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 'Installing...'", // une seule commande
    "postinstall": ["echo 'Done!'"], // un tableau de commandes
    "start": "bun run echo 'Hello world!'"
  }
}

Les champs suivants sont pris en charge. Chacun d'eux peut correspondre à une chaîne ou un tableau de chaînes. Un tableau de commandes sera exécuté dans l'ordre.

Champ	Description
postinstall	s'exécute après l'installation des dépendances
preinstall	s'exécute avant l'installation des dépendances

Après avoir cloné un modèle, bun create supprimera automatiquement la section "bun-create" du package.json avant de l'écrire dans le dossier de destination.

Référence

Options CLI

Option	Description
--force	Écraser les fichiers existants
--no-install	Ignorer l'installation de node_modules et des tâches
--no-git	Ne pas initialiser de dépôt git
--open	Démarrer et ouvrir dans le navigateur après avoir terminé

Variables d'environnement

Nom	Description
GITHUB_API_DOMAIN	Si vous utilisez une entreprise GitHub ou un proxy, vous pouvez personnaliser le domaine GitHub que Bun interroge pour les téléchargements
GITHUB_TOKEN (ou GITHUB_ACCESS_TOKEN)	Cela permet à bun create de fonctionner avec des dépôts privés ou si vous êtes limité par le taux. GITHUB_TOKEN est choisi plutôt que GITHUB_ACCESS_TOKEN si les deux existent.

Comment bun create fonctionne

Lorsque vous exécutez bun create ${template} ${destination}, voici ce qui se passe :

SI modèle distant

1. GET registry.npmjs.org/@bun-examples/${template}/latest et analyser
2. GET registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz
3. Décompresser et extraire ${template}-${latestVersion}.tgz dans ${destination}
   • S'il y a des fichiers qui écraseraient, avertir et quitter sauf si --force est passé

SI dépôt GitHub

1. Télécharger le tarball depuis l'API GitHub
2. Décompresser et extraire dans ${destination}
   • S'il y a des fichiers qui écraseraient, avertir et quitter sauf si --force est passé

SINON SI modèle local

1. Ouvrir le dossier du modèle local

2. Supprimer le répertoire de destination récursivement

3. Copier les fichiers récursivement en utilisant les appels système les plus rapides disponibles (sur macOS fcopyfile et Linux, copy_file_range). Ne pas copier ou traverser le dossier node_modules s'il existe (cela seul le rend plus rapide que cp)

4. Analyser le package.json (encore !), mettre à jour name pour être ${basename(destination)}, supprimer la section bun-create du package.json et sauvegarder le package.json mis à jour sur le disque.

   • SI Next.js est détecté, ajouter bun-framework-next à la liste des dépendances
   • SI Create React App est détecté, ajouter le point d'entrée dans /src/index.{js,jsx,ts,tsx} à public/index.html
   • SI Relay est détecté, ajouter bun-macro-relay pour que Relay fonctionne

5. Détecter automatiquement le client npm, en préférant pnpm, yarn (v1), et enfin npm

6. Exécuter toutes les tâches définies dans "bun-create": { "preinstall" } avec le client npm

7. Exécuter ${npmClient} install sauf si --no-install est passé OU s'il n'y a pas de dépendances dans package.json

8. Exécuter toutes les tâches définies dans "bun-create": { "postinstall" } avec le client npm

9. Exécuter git init; git add -A .; git commit -am "Initial Commit";

   • Renommer gitignore en .gitignore. NPM supprime automatiquement les fichiers .gitignore des paquets.
   • S'il y a des dépendances, cela s'exécute dans un thread séparé de manière concurrente pendant l'installation de node_modules
   • L'utilisation de libgit2 si disponible a été testée et a performé 3x plus lentement dans les microbenchmarks