Início Rápido do Bun JS

Visão Geral

Construa um servidor HTTP minimal com Bun.serve, execute-o localmente e então evolua-o instalando um pacote.

::: Pré-requisitos: Bun instalado e disponível no seu PATH. Veja instalação para configuração. :::

Inicialize um novo projeto com bun init.

bash

bun init my-app

Ele solicitará que você escolha um template, seja Blank, React ou Library. Para este guia, escolheremos Blank.

bash

bun init my-app

bash

✓ Selecione um template de projeto: Blank

- .gitignore
- CLAUDE.md
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc -> CLAUDE.md
- index.ts
- tsconfig.json (para autocompletar do editor)
- README.md

Isso cria automaticamente um diretório my-app com um app Bun básico.

Execute o arquivo index.ts usando bun run index.ts.

bash

cd my-app
bun run index.ts

bash

Hello via Bun!

Você deve ver uma saída no console dizendo "Hello via Bun!".

Substitua o conteúdo de index.ts pelo seguinte código:

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response('Bun!'),
  }
});

console.log(`Listening on ${server.url}`);

Execute o arquivo index.ts novamente usando bun run index.ts.

bash

bun run index.ts

bash

Listening on http://localhost:3000

Visite http://localhost:3000 para testar o servidor. Você deve ver uma página simples que diz "Bun!".

Vendo erros de TypeScript no Bun?

Se você usou bun init, o Bun terá instalado automaticamente as declarações TypeScript do Bun e configurado seu tsconfig.json. Se você estiver testando o Bun em um projeto existente, pode ver um erro de tipo no global Bun.

Para corrigir isso, primeiro instale @types/bun como uma dependência de desenvolvimento.

bash

bun add -d @types/bun

Então adicione o seguinte ao seu compilerOptions no tsconfig.json:

json

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "target": "ESNext",
    "module": "Preserve",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true
  }
}

Instale o pacote figlet e suas declarações de tipo. Figlet é um utilitário para converter strings em arte ASCII.

bash

bun add figlet
bun add -d @types/figlet # apenas usuários TypeScript

Atualize index.ts para usar figlet em routes.

import figlet from 'figlet';

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response('Bun!'),
    "/figlet": () => {
      const body = figlet.textSync('Bun!');
      return new Response(body);
    } 
  }
});

Execute o arquivo index.ts novamente usando bun run index.ts.

bash

bun run index.ts

bash

Listening on http://localhost:3000

Visite http://localhost:3000/figlet para testar o servidor. Você deve ver uma página simples que diz "Bun!" em arte ASCII.

bash

____              _
| __ ) _   _ _ __ | |
|  _ \| | | | '_ \| |
| |_) | |_| | | | |_|
|____/ \__,_|_| |_(_)

Vamos adicionar algum HTML. Crie um novo arquivo chamado index.html e adicione o seguinte código:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bun</title>
  </head>
  <body>
    <h1>Bun!</h1>
  </body>
</html>

Então, importe este arquivo em index.ts e sirva-o da rota raiz /.

import figlet from 'figlet';
import index from './index.html'; 

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": index, 
    "/figlet": () => {
      const body = figlet.textSync('Bun!');
      return new Response(body);
    }
  }
});

console.log(`Listening on ${server.url}`);

Execute o arquivo index.ts novamente usando bun run index.ts.

bash

bun run index.ts

txt

Listening on http://localhost:3000

Visite http://localhost:3000 para testar o servidor. Você deve ver a página HTML estática.

🎉 Parabéns! Você construiu um servidor HTTP simples com Bun e instalou um pacote.

Executar um script

O Bun também pode executar "scripts" do seu package.json. Adicione o seguinte script:

json

{
  "name": "quickstart",
  "module": "index.ts",
  "type": "module",
  "private": true,
  "scripts": { 
    "start": "bun run index.ts"
  }, 
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5"
  }
}

Então execute-o com bun run start.

bash

bun run start

bash

Listening on http://localhost:3000

INFO

Performance — bun run é aproximadamente 28x mais rápido que npm run (6ms vs 170ms de overhead).

Visão Geral ​

Vendo erros de TypeScript no Bun? ​

Executar um script ​

Visão Geral

Vendo erros de TypeScript no Bun?

Executar um script