Nota
Você não precisa do bun create para usar o Bun. Você não precisa de nenhuma configuração. Este comando existe para tornar o início um pouco mais rápido e fácil.
Crie um novo projeto Bun com bun create. Este é um comando flexível que pode ser usado para criar um novo projeto a partir de um componente React, um pacote npm create-<template>, um repositório GitHub, ou um template local.
Se você está procurando criar um novo projeto vazio, use bun init.
A partir de um componente React
bun create ./MyComponent.tsx transforma um componente React existente em um ambiente de desenvolvimento completo com hot reload e builds de produção em um único comando.
$ bun create ./MyComponent.jsx # .tsx também suportadoNota
🚀 Sucessor do Create React App — bun create <component> fornece tudo que os desenvolvedores amavam no Create React App, mas com ferramentas modernas, builds mais rápidos e suporte backend.
Como isto funciona
Quando você roda bun create <component>, o Bun:
- Usa o bundler JavaScript do Bun para analisar seu grafo de módulos.
- Coleta todas as dependências necessárias para rodar o componente.
- Escaneia as exportações do entry point por um componente React.
- Gera um arquivo
package.jsoncom as dependências e scripts necessários para rodar o componente. - Instala quaisquer dependências faltando usando
bun install --only-missing. - Gera os seguintes arquivos:
${component}.html${component}.client.tsx(entry point para o frontend)${component}.css(arquivo css)
- Inicia um servidor de desenvolvimento frontend automaticamente.
Usando TailwindCSS com Bun
TailwindCSS é um framework CSS utility-first extremamente popular usado para estilizar aplicações web.
Quando você roda bun create <component>, o Bun escaneia seu arquivo JSX/TSX por nomes de classe TailwindCSS (e quaisquer arquivos que importa). Se detectar nomes de classe TailwindCSS, adicionará as seguintes dependências ao seu package.json:
{
"dependencies": {
"tailwindcss": "^4",
"bun-plugin-tailwind": "latest"
}
}Também configuramos bunfig.toml para usar o plugin TailwindCSS do Bun com Bun.serve()
[serve.static]
plugins = ["bun-plugin-tailwind"]E um arquivo ${component}.css com @import "tailwindcss"; no topo:
@import "tailwindcss";Usando shadcn/ui com Bun
shadcn/ui é uma ferramenta de biblioteca de componentes extremamente popular para construir aplicações web.
bun create <component> escaneia por quaisquer componentes shadcn/ui importados de @/components/ui.
Se encontrar algum, roda:
# Assumindo que bun detectou imports para @/components/ui/accordion e @/components/ui/button
bunx shadcn@canary add accordion button # e quaisquer outros componentesComo shadcn/ui usa TailwindCSS, bun create também adiciona as dependências TailwindCSS necessárias ao seu package.json e configura bunfig.toml para usar o plugin TailwindCSS do Bun com Bun.serve() conforme descrito acima.
Adicionalmente, configuramos o seguinte:
tsconfig.jsonpara alias"@/*"para"src/*"ou.(dependendo se existe um diretóriosrc/)components.jsonpara que shadcn/ui saiba que é um projeto shadcn/ui- arquivo
styles/globals.cssque configura Tailwind v4 da maneira que shadcn/ui espera - arquivo
${component}.build.tsque builda o componente para produção combun-plugin-tailwindconfigurado
bun create ./MyComponent.jsx é uma das maneiras mais fáceis de rodar código gerado por LLMs como Claude ou ChatGPT localmente.
A partir do npm
bun create <template> [<destination>]Assumindo que você não tem um template local com o mesmo nome, este comando irá baixar e executar o pacote create-<template> do npm. Os seguintes dois comandos se comportarão identicamente:
bun create remix
bunx create-remixConsulte a documentação do pacote create-<template> associado para documentação completa e instruções de uso.
A partir do GitHub
Isto baixará o conteúdo do repositório GitHub para o disco.
bun create <user>/<repo>
bun create github.com/<user>/<repo>Opcionalmente especifique um nome para a pasta de destino. Se nenhum destino for especificado, o nome do repo será usado.
bun create <user>/<repo> mydir
bun create github.com/<user>/<repo> mydirO Bun executará os seguintes passos:
- Baixar o template
- Copiar todos os arquivos do template para a pasta de destino
- Instalar dependências com
bun install. - Inicializar um repositório Git fresco. Opt out com a flag
--no-git. - Rodar o script
startconfigurado do template, se definido.
NOTE
Por padrão o Bun _não sobrescreverá_ quaisquer arquivos existentes. Use a flag `--force` para sobrescrever arquivos existentes.A partir de um template local
Aviso
Ao contrário de templates remotos, rodar bun create com um template local deletará toda a pasta de destino se ela já existir! Tenha cuidado.
O templater do Bun pode ser estendido para suportar templates customizados definidos no seu sistema de arquivos local. Estes templates devem viver em um dos seguintes diretórios:
$HOME/.bun-create/<name>: templates globais<project root>/.bun-create/<name>: templates específicos do projeto
Nota
Você pode customizar o caminho do template global definindo a variável de ambiente BUN_CREATE_DIR.
Para criar um template local, navegue até $HOME/.bun-create e crie um novo diretório com o nome desejado do seu template.
cd $HOME/.bun-create
mkdir foo
cd fooEntão, crie um arquivo package.json naquele diretório com o seguinte conteúdo:
{
"name": "foo"
}Você pode rodar bun create foo em outro lugar no seu sistema de arquivos para verificar que o Bun está encontrando corretamente seu template local.
Setup de lógica
Você pode especificar scripts de setup pré e pós-instalação na seção "bun-create" do package.json do seu template 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...'", // um único comando
"postinstall": ["echo 'Done!"], // um array de comandos
"start": "bun run echo 'Hello world!'"
}
}Os seguintes campos são suportados. Cada um destes pode corresponder a uma string ou array de strings. Um array de comandos será executado em ordem.
| Campo | Descrição |
|---|---|
postinstall | roda após instalar dependências |
preinstall | roda antes de instalar dependências |
Após clonar um template, bun create automaticamente removerá a seção "bun-create" do package.json antes de escrever para a pasta de destino.
Referência
Flags CLI
| Flag | Descrição |
|---|---|
--force | Sobrescrever arquivos existentes |
--no-install | Pular instalação de node_modules e tarefas |
--no-git | Não inicializar um repositório git |
--open | Iniciar e abrir no navegador após terminar |
Variáveis de ambiente
| Nome | Descrição |
|---|---|
GITHUB_API_DOMAIN | Se você está usando um GitHub enterprise ou um proxy, você pode customizar o domínio GitHub que o Bun acessa para downloads |
GITHUB_TOKEN (ou GITHUB_ACCESS_TOKEN) | Isto permite que bun create funcione com repositórios privados ou se você for limitado por rate. GITHUB_TOKEN é escolhido sobre GITHUB_ACCESS_TOKEN se ambos existirem. |
Como bun create funciona
Quando você roda bun create ${template} ${destination}, eis o que acontece:
SE template remoto
- GET
registry.npmjs.org/@bun-examples/${template}/lateste parseia - GET
registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz - Descomprime e extrai
${template}-${latestVersion}.tgzpara${destination}- Se houver arquivos que sobrescreveriam, avisa e sai a menos que
--forceseja passado
- Se houver arquivos que sobrescreveriam, avisa e sai a menos que
SE repositório GitHub
- Baixa o tarball da API do GitHub
- Descomprime e extrai para
${destination}- Se houver arquivos que sobrescreveriam, avisa e sai a menos que
--forceseja passado
- Se houver arquivos que sobrescreveriam, avisa e sai a menos que
SENÃO SE template local
Abre pasta do template local
Deleta diretório de destino recursivamente
Copia arquivos recursivamente usando as system calls mais rápidas disponíveis (no macOS
fcopyfilee Linux,copy_file_range). Não copia ou atravessa pastanode_modulesse existir (isto sozinho torna mais rápido quecp)Parseia o
package.json(novamente!), atualizanamepara ser${basename(destination)}, remove a seçãobun-createdopackage.jsone salva opackage.jsonatualizado em disco.- SE Next.js for detectado, adiciona
bun-framework-nextà lista de dependências - SE Create React App for detectado, adiciona o entry point em
/src/index.{js,jsx,ts,tsx}parapublic/index.html - SE Relay for detectado, adiciona
bun-macro-relaypara que Relay funcione
- SE Next.js for detectado, adiciona
Auto-detecta o cliente npm, preferindo
pnpm,yarn(v1), e por últimonpmRoda quaisquer tarefas definidas em
"bun-create": { "preinstall" }com o cliente npmRoda
${npmClient} installa menos que--no-installseja passado OU não haja dependências no package.jsonRoda quaisquer tarefas definidas em
"bun-create": { "postinstall" }com o cliente npmRoda
git init; git add -A .; git commit -am "Initial Commit";- Renomeia
gitignorepara.gitignore. NPM automaticamente remove arquivos.gitignorede aparecer em pacotes. - Se houver dependências, isto roda em uma thread separada concorrentemente enquanto node_modules estão sendo instalados
- Usar libgit2 se disponível foi testado e teve performance 3x pior em microbenchmarks
- Renomeia