Démarrage rapide avec Bun JS

Aperçu

Créez un serveur HTTP minimal avec Bun.serve, exécutez-le localement, puis faites-le évoluer en installant un package.

::: Prérequis : Bun installé et disponible dans votre PATH. Consultez installation pour la configuration. :::

Initialisez un nouveau projet avec bun init.

bash

bun init my-app

Cela vous demandera de choisir un modèle, soit Blank, React, ou Library. Pour ce guide, nous choisirons Blank.

bash

bun init my-app

bash

✓ Select a project template: Blank

- .gitignore
- CLAUDE.md
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc -> CLAUDE.md
- index.ts
- tsconfig.json (pour l'autocomplétion de l'éditeur)
- README.md

Cela crée automatiquement un répertoire my-app avec une application Bun de base.

Exécutez le fichier index.ts en utilisant bun run index.ts.

bash

cd my-app
bun run index.ts

bash

Hello via Bun!

Vous devriez voir une sortie de console indiquant "Hello via Bun!".

Remplacez le contenu de index.ts par le code suivant :

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

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

Exécutez à nouveau le fichier index.ts en utilisant bun run index.ts.

bash

bun run index.ts

bash

Listening on http://localhost:3000

Visitez http://localhost:3000 pour tester le serveur. Vous devriez voir une page simple qui dit "Bun!".

Vous voyez des erreurs TypeScript avec Bun ?

Si vous avez utilisé bun init, Bun aura automatiquement installé les déclarations TypeScript de Bun et configuré votre tsconfig.json. Si vous essayez Bun dans un projet existant, vous pourriez voir une erreur de type sur le global Bun.

Pour corriger cela, installez d'abord @types/bun comme dépendance de développement.

bash

bun add -d @types/bun

Ensuite, ajoutez ce qui suit à vos compilerOptions dans tsconfig.json :

json

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

Installez le package figlet et ses déclarations de type. Figlet est un utilitaire pour convertir des chaînes en ASCII art.

bash

bun add figlet
bun add -d @types/figlet # Utilisateurs TypeScript uniquement

Mettez à jour index.ts pour utiliser figlet dans 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);
    } 
  }
});

Exécutez à nouveau le fichier index.ts en utilisant bun run index.ts.

bash

bun run index.ts

bash

Listening on http://localhost:3000

Visitez http://localhost:3000/figlet pour tester le serveur. Vous devriez voir une page simple qui dit "Bun!" en ASCII art.

bash

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

Ajoutons du HTML. Créez un nouveau fichier appelé index.html et ajoutez le code suivant :

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>

Ensuite, importez ce fichier dans index.ts et servez-le depuis la route racine /.

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}`);

Exécutez à nouveau le fichier index.ts en utilisant bun run index.ts.

bash

bun run index.ts

txt

Listening on http://localhost:3000

Visitez http://localhost:3000 pour tester le serveur. Vous devriez voir la page HTML statique.

🎉 Félicitations ! Vous avez créé un serveur HTTP simple avec Bun et installé un package.

Exécuter un script

Bun peut également exécuter des "scripts" depuis votre package.json. Ajoutez le script suivant :

json

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

Ensuite, exécutez-le avec bun run start.

bash

bun run start

bash

Listening on http://localhost:3000

INFO

Performance — bun run est environ 28 fois plus rapide que npm run (6ms contre 170ms de surcharge).

Aperçu ​

Vous voyez des erreurs TypeScript avec Bun ? ​

Exécuter un script ​

Aperçu

Vous voyez des erreurs TypeScript avec Bun ?

Exécuter un script