DEV Community: Sylvain Gougouzian

Bun : Un serveur Web ???

Sylvain Gougouzian — Wed, 13 Sep 2023 23:17:28 +0000

Dans l'article précédent, nous avons vu comment manipuler les fichiers et répertoires avec Bun.

Dans ce nouvel article, nous allons voir comment créer un serveur web avec Bun.

Un serveur web, finalement c'est quoi ? C'est un passe-plat de fichiers qui peuvent être créés à la volée ou disponible dans des répertoires.

Nous allons aussi voir comment associer à ce serveur web un serveur de WebSockets qui permettra d'avoir des interactions simplifiées avec les clients.

Dans un troisième temps, nous verrons comment gérer les routes avec Bun.

Et pour terminer nous verrons comment SliDesk utilise le serveur pour afficher la présentation, et comment l'application utilise le serveur de WebSockets pour la synchronisation avec les notes et le contrôle de la présentation.

Coder un server en quelques lignes

En ces quelques lignes,

const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Bonjour le monde !");
  },
});

Bun crée un serveur web qui écoute sur le port 3000.

Le paramètre request est de type Request comme défini dans la Fetch API.

https://developer.mozilla.org/en-US/docs/Web/API/Request permet d'avoir un aperçu détaillé des propriétés de cet objet.

Donc grace à l'objet request, on peut détecter quelle url est demandée et donc faire le traitement associé.

La propriété fetch du paramètre de la fonction Bun.serve doit retourner un objet Response détaillé ici également https://developer.mozilla.org/en-US/docs/Web/API/Response.

La définition de la fonction serve est la suivante :

interface Bun {
  serve(options: {
    fetch: (req: Request, server: Server) => Response | Promise<Response>,
    hostname?: string,
    port?: number,
    development?: boolean,
    error?: (error: Error) => Response | Promise<Response>,
    tls?: {
      key?:
        | string
        | TypedArray
        | BunFile
        | Array<string | TypedArray | BunFile>,
      cert?:
        | string
        | TypedArray
        | BunFile
        | Array<string | TypedArray | BunFile>,
      ca?: string | TypedArray | BunFile | Array<string | TypedArray | BunFile>,
      passphrase?: string,
      dhParamsFile?: string,
    },
    maxRequestBodySize?: number,
    lowMemoryMode?: boolean,
  }): Server;
}

interface Server {
  development: boolean;
  hostname: string;
  port: number;
  pendingRequests: number;
  stop(): void;
}

Nous pouvons constater que seule la méthode fetch est obligatoire. Il est également possible de spécifier :

hostname : si l'on souhaite autre chose que localhost;
port : par défaut à 80, il est possible de donner une autre valeur;
development : si cette valeur est à true, un affichage détaillé est disponible lors d'une erreur;
error : dans le cas d'une erreur (page 404 par exemple), il est possible de préciser un comportement
tls : afin de naviguer de manière sécurisée, nous devons spécifier les informations de certificats.

Par exemple :

Bun.serve({
  fetch(req) {
    return new Response("Hello!!!");
  },
  tls: {
    key: Bun.file("./key.pem"), // path to TLS key
    cert: Bun.file("./cert.pem"), // path to TLS cert
    ca: Bun.file("./ca.pem"), // path to root CA certificate
  },
});

Finalement, faire un serveur avec Bun est simple.

"Chaussette, j'ai dit chaussette" - Le nain - 2001

J'ai connu un temps que les moins de 20 ans ne peuvent pas connaître, le monde sans WebSockets, un monde où l'on utilisait les XHR pour communiquer avec le serveur sans rafraichir la page.

Heureusement ce monde est révolu et les WebSockets sont arrivées, simplifiant grandement la communication entre les clients et le serveur.

Reprenons notre exemple si dessus :

const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Bonjour le monde !");
  },
});

Nous souhaitons utiliser l'url ws://localhost:3000 pour établir le canal de communication entre les clients et le serveur.

Pour cela, il faut modifier notre fonction fetch pour qu'elle puisse changer de protocole en fonction du canal utilisé (http(s) ou ws(s)).

const server = Bun.serve({
  port: 3000,
  fetch(request, server) {
    if (server.upgrade(request)) {
      // Bun va retourner une "101 - Switching Protocols"
      // si la mise à jour se passe bien
      return undefined;
    }
    return new Response("Bonjour le monde !");
  },
});

Aussi nous allons ajouter une propriété websocket à l'objet passé en paramètre de la fonction qui nous permettra de gérer les connexions, les disconnexions, les messages.

const server = Bun.serve({
  port: 3000,
  fetch(request, server) {
    if (server.upgrade(request)) {
      // Bun va renvoyer une "101 - Switching Protocols"
      // si la mise à jour se passe bien
      return undefined;
    }
    return new Response("Bonjour le monde !");
  },
  websocket: {
    open(ws) {
      ws.subscribe("mongroupe");
    },
    message(ws, message) {
      // on transmet le message à tout le groupe
      ws.publish("mongroupe", message);
    },
    close(ws) {
      ws.unsubscribe("mongroupe");
    },
  },
});

Juste avec les quelques lignes présentes ci-dessus, nous obtenons un serveur web et un serveur websocket performant.

A titre comparatif, sur son site, Bun montre un comparatif de ses performances avec les deux autres runtimes principaux du marché.

Comment gérer les routes ?

Comme nous pouvons le constater, le paramètre à fournir à la fonction serve n'a qu'une seule propriété fetch qui traite l'ensemble des requêtes web (http(s) et ws(s)).

Une des premières solutions seraient un traitement de la donnée request. Comme vu précédemment dans l'article, request est de type Request et dispose donc d'une propriété url qui nous permet de savoir quelle route nous souhaitons afficher.

Ainsi le code suivant peut être envisagé :

const server = Bun.serve({
  port: 3000,
  fetch(request, server) {
    if (server.upgrade(request)) {
      // Bun va renvoyer une "101 - Switching Protocols"
      // si la mise à jour se passe bien
      return undefined;
    }
    switch (request.url) {
      case "/":
        return new Response("index");
      case "/search":
        return new Response("page de recherche");
      // ...
      default:
        return new Response("Bonjour le monde !");
    }
  },
  websocket: {
    open(ws) {
      ws.subscribe("mongroupe");
    },
    message(ws, message) {
      // on transmet le message à tout le groupe
      ws.publish("mongroupe", message);
    },
    close(ws) {
      ws.unsubscribe("mongroupe");
    },
  },
});

Quand on a quelques routes, cette solution peut convenir, mais elle n'est pas dynamique.

Pour cela, Bun a implémenté un système de routes "à la Next.js".

Prenons la structure de fichiers suivante :

pages
├── index.tsx
├── settings.tsx
├── blog
│   ├── [slug].tsx
│   └── index.tsx
└── [[...catchall]].tsx

Bun dispose d'une classe FileSystemRouter qui permet ce traitement.

Ainsi nous pouvons configurer le système de la manière suivante :

const router = new Bun.FileSystemRouter({
  style: "nextjs",
  dir: "./pages",
  origin: "http://localhost",
  assetPrefix: "_next/static/",
});

Nous constatons qu'un paramètre style existe, ce qui sous-entend que Bun souhaite faire évoluer cette classe pour gérer d'autres modèles de gestion automatisée de routes.

Une fonction match permet de diriger correctement le traitement.

router.match("/");

Nous pouvons l'intégrer dans notre exemple de la partie précédente de la manière suivante.

Créons un répertoire de travail et entrons dans ce répertoire.

mkdir myserver
cd myserver

Utilisons la commande bun init pour instancier le projet.

bun init helps you get started with a minimal project and tries to guess sensible defaults. Press ^C anytime to quit

package name (myserver):
entry point (index.ts): index.js

Done! A package.json file was saved in the current directory.
 + index.js
 + .gitignore
 + jsconfig.json (for editor auto-complete)
 + README.md

To get started, run:
  bun run index.js

Ajoutons les bibliothèques react et react-dom :

bun add react react-dom

Modifions le fichier index.js par le contenu suivant :

#!/usr/bin/env bun
import { renderToReadableStream } from "react-dom/server";

const router = new Bun.FileSystemRouter({
  style: "nextjs",
  dir: "./pages",
});

Bun.serve({
  port: 3000,
  async fetch(request) {
    const match = router.match(request.url);
    const Component = await import(match.filePath);
    const stream = await renderToReadableStream(<Component.default />);

    return new Response(stream, {
      headers: { "Content-Type": "text/html; charset=utf-8" },
    });
  },
});

Créons un fichier pages/index.js :

import React from "react";
export default function Index() {
  return <p>Hello world!</p>;
}

Lançons notre serveur :

bun index.js

Allons sur notre navigateur préféré sur l'url http://localhost:3000 et là, la magie opère, nous obtenons une page avec écrit "Hello world!".

Cette solution est bien plus évoluée et utilise toute la puissance de React pour faire une application SSR (Server Side Rendering).

Et SliDesk dans tout ça ?

SliDesk a besoin d'un serveur web et d'un serveur websocket pour afficher la présentation et la vue du présentateur, et également les faire interagir entre elles.

Le code du serveur est proche de la première méthode proposée. En effet SliDesk n'est pas une SPA (Single Page Application), elle ne dispose pas de contenu qui s'affiche en fonction d'action, de paramètre. Il n'y a pas de base de données derrière. Il suffit "juste" de servir une page .html qui contient le css et le js nécessaire au bon fonctionnement. Seules les images sont les chemins inconnus.

Ainsi avec le code suivant, il est possible de gérer le multilingue (une page par langue), la page de notes et le serveur WebSockets qui permet de naviguer de manière synchronisée entre les "viewers".

import {
  langPage,
  defaultPage,
  favicon,
  notePage,
  webSockets,
  defaultAction,
} from "../utils/server";

const { log } = console;

export default class Server {
  static create(html, options, path) {
    globalThis.html = html;
    globalThis.path = path;
    // eslint-disable-next-line no-undef
    globalThis.server = Bun.serve({
      port: options.port,
      fetch(req) {
        const url = new URL(req.url);
        if (url.pathname.match(/^\/--(\w+)--\/$/g))
          return langPage(url.pathname);
        switch (url.pathname) {
          case "/":
            return defaultPage();
          case "/favicon.svg":
            return favicon();
          case "/notes":
            return notePage(options);
          case "/ws":
            return webSockets(req);
          default:
            return defaultAction(req, options);
        }
      },
      websocket: {
        open(ws) {
          ws.subscribe("slidesk");
        },
        message(ws, message) {
          ws.publish("slidesk", message);
        },
        close(ws) {
          ws.unsubscribe("slidesk");
        },
      },
    });
    if (options.notes)
      log(
        `Your speaker view is available on: \x1b[1m\x1b[36;49mhttp://${options.domain}:${options.port}/notes\x1b[0m`
      );
    log(
      `Your presentation is available on: \x1b[1m\x1b[36;49mhttp://${options.domain}:${options.port}\x1b[0m`
    );
    log();
  }

  static setHTML(html) {
    globalThis.html = html;
    globalThis.server.publish("slidesk", JSON.stringify({ action: "reload" }));
  }

  static send(action) {
    globalThis.server.publish("slidesk", JSON.stringify({ action }));
  }
}

Conclusion

Cet article nous a montré comment créer un serveur web et un serveur websocket en gérer des routes.

Le prochain article traitera de la partie build de Bun.

Bun : Fichiers et répertoires

Sylvain Gougouzian — Tue, 29 Aug 2023 19:38:49 +0000

Dans l'article précédent, nous avons découvert Bun et créé un programme qui affiche la version de Bun depuis la commande bunx monprogramme.

Dans cet article, nous allons voir comment Bun simplifie les interactions avec les fichiers.

Lire un fichier

Pour lire un fichier, il faut utiliser la fonction Bun.file().

Cette fonction est synchrone, contrairement à la lecture du contenu qui est asynchrone.

Ainsi, la lecture complète d'un fichier se fait de la manière suivante :

const myFile = Bun.file("./package.json");
const pkg = await myFile.json(); // il existe aussi text(), stream()
console.log(pkg.name); // devrait afficher "monprogramme"

La fonction file() prend en paramètre une chaîne de caractères qui définit le chemin du fichier à traiter et retourne un objet de type BunFile avec 2 propriétés utiles :

size : retourne la taille du fichier
type : retourne le MIME du fichier

file(path: string | number | URL, options?: { type?: string }): BunFile;

Structure de l'objet BunFile :

interface BunFile {
  readonly size: number;
  readonly type: string;

  text(): Promise<string>;
  stream(): Promise<ReadableStream>;
  arrayBuffer(): Promise<ArrayBuffer>;
  json(): Promise<any>;
  writer(params: { highWaterMark?: number }): FileSink;
}

On voit donc qu'il existe en plus des 2 propriétés, 5 fonctions qui permettent de manipuler le contenu :

text() : cette méthode retourne le contenu du fichier sous le format d'une chaîne de caractères ;
stream() : cette méthode retourne le contenu dans un objet ReadableStream ;
arrayBuffer() : cette méthode retourne le contenu dans un ArrayBuffer ;
json() : très utile dans la manipulation de fichier .json, cette méthode prend le contenu du fichier et le transforme en JSON pour faciliter la manipulation de celui-ci.

La méthode writer() est très utile dans la manipulation de Chunk, nous y reviendrons par la suite.

Écrire dans un fichier

Maintenant que nous avons vu comment lire un fichier, nous allons voir comment écrire dans un fichier existant ou non.

write(
  destination: string | number | BunFile | URL,
  input:
    | string
    | Blob
    | ArrayBuffer
    | SharedArrayBuffer
    | TypedArray
    | Response,
): Promise<number>;

Comme on peut le voir sur la définition de la méthode write(), cette méthode retourne une promesse. Elle est donc asynchrone.

Ainsi si nous modifions notre fichier bin/index.js de l'article précédent par :

#!/usr/bin/env bun

const data = `Bun version: ${Bun.version}`;
await Bun.write("output.txt", data);

En lançant la commande bun bin/index.js, nous obtenons un fichier à la racine output.txt contenant :

Bun version: 0.7.3

De ce fait, nous avons vu qu'il est très simple d'écrire une chaîne de caractères dans un fichier non existant.

Comme nous pouvons le constater dans la définition de la méthode, il est possible de passer autre chose qu'une chaîne de caractères, il est possible de passer une Response comme un BunFile.

Par exemple, il est simple de créer la copie d'un fichier :

#!/usr/bin/env bun

const data = `Bun version: ${Bun.version}`;
await Bun.write("output.txt", data);

const input = Bun.file("output.txt");
const output = Bun.file("copy.txt");
await Bun.write(output, input);

En relançant la commande bun bin/index.js ou la commande bunx monprogramme, nous obtenons maitenant 2 fichiers à la racine output.txt et copy.txt contenant tous les deux :

Bun version: 0.7.3

Ecrire un fichier en plusieurs fois pour économiser de la mémoire

Lorsque l'on manipule des fichiers lourds, on peut être parfois limité par la mémoire. Bun propose une solution en utilisant les FileSink.

Comme dit dans le chapitre "Lire un fichier", nous devions revenir sur la méthode writer().

C'est le moment.

Modifions notre fichier bin/index.js par le contenu suivant :

#!/usr/bin/env bun

const file = Bun.file("output.txt");
const writer = file.writer({ highWaterMark: 1024 * 1024 }); // 1MB

writer.write("Première ligne\n");
writer.write("Seconde ligne\n");

writer.flush();

writer.write("Troisième ligne\n");
writer.write("Dernière ligne\n");

writer.end();

writer.unref();

Une fois exécuté avec la commande bun bin/index.js ou la commande bunx monprogramme, nous obtenons le fichier output.txt avec le contenu suivant :

Première ligne
Seconde ligne
Troisième ligne
Dernière ligne

Maintenant essayons de comprendre les lignes que nous avons copiées.

const file = Bun.file("output.txt");

Nous souhaitons enregistrer notre contenu dans le fichier output.txt.

const writer = file.writer({ highWaterMark: 1024 * 1024 }); // 1MB

Nous créons un "buffer" dans lequel nous allons écrire. Ici nous avons précisé un highWaterMark à 1 Mo (1024 Ko, donc 1024 * 1024 octets). Ainsi une fois que le contenu du "buffer" dépasse cette limite, le contenu est écrit dans le fichier, libérant ainsi de la mémoire.

writer.write("Troisième ligne\n");

Cette ligne montre comment ajouter du contenu dans le "buffer".

writer.flush();

La méthode flush() permet d'écrire le contenu du "buffer" dans le fichier et libérer ainsi de la mémoire.

writer.end();

Cette ligne signifie d'écrire le contenu et de finaliser l'écriture.

writer.unref();

Cette ligne est optionnelle, mais très utile pour éviter des fuites de mémoire. On libère le référencement du "buffer". La méthode ref() permet de le référencer à nouveau.

Voilà, maintenant nous avons vu globalement comment écrire dans un fichier.

Répertoires : manipulation

Bun ne dispose pas d'API pour les répertoires (du moins pour la version actuelle lors de l'écriture de cet article).

Nous devons donc utiliser la bibliothèque fs présente dans Node.js.

Modifions notre célèbre fichier bin/index.js dans le dossier monprogramme par le code suivant :

#!/usr/bin/env bun
import { readdirSync } from "fs";

const data = `Bun version: ${Bun.version}`;
await Bun.write("output.txt", data);

const filenames = readdirSync(__dirname);

console.log("\n Binary directory filenames:");
filenames.forEach((file) => {
  console.log(file);
});

const localfilenames = readdirSync(".");

console.log("\nCurrent directory filenames:");
localfilenames.forEach((file) => {
  console.log(file);
});

Nous obtenons le résultat suivant :

$ bunx monprogramme

Binary directory filenames:
index.js

Current directory filenames:
output.txt

Nous avons donc la possibilité d'accèder aux fichiers présents dans le dossier du binaire qu'on execute avec __dirname et également la lecture du dossier d'où le programme s'exécute ".".

Imports

Traditionnellement, les imports se font sur des bibliothèques préalablement installées.

Avec Bun, pas forcément besoin d'installer ces bibliothèques :

import * from "commander"

En écrivant cette ligne, lors de l'exécution Bun va voir s'il connait cette bibliothèque, s'il ne l'a jamais rencontrée, il va la télécharger dans son cache.

Il est également possible de spécifier des versions avec la notation npm.

import * from "commander@11.0.0"

Bon, à part une gestion équivalente à la pnpm, rien de nouveau.

Eh bien si, les imports de fichiers de type json ou toml sont automatiquement convertis en Objet JavaScript.

Modifions notre fichier package.json de monprogramme :

{
  "name": "monprogramme",
  "version": "0.0.1",
  "bin": {
    "monprogramme": "./bin/index.js"
  }
}

Et modifions notre fichier bin/index.js par :

#!/usr/bin/env bun

import pkg from "../package.json";

const data = `version: ${pkg.version}`;
await Bun.write("output.txt", data);

Après une exécution de bunx monprogramme, on obtient un fichier output.txt qui contient :

version: 0.0.1

Un autre avantage de Bun est que si un format de fichier lui est inconnu, il importe le contenu du fichier et le stocke dans une chaîne de caractères.

Imaginons un fichier test.txt avec le contenu suivant :

Ceci est un test

Si nous faisons un import comme l'exemple suivant :

import test from "./test.txt";

console.log(test);

L'exécution du fichier devrait afficher Ceci est un test.

Comment SliDesk utilise les fichiers ?

SliDesk n'écrit pas de fichier, sauf si on utilise l'option --save pour générer des fichiers .html par langue pour les héberger sur Internet.

La lecture de fichier est utilisée pour les fichiers de traductions, et également pour les "assets" (images, fonts, ...) qui doivent être fournis pour la présentation.

L'avantage de Bun sur l'import des fichiers en tant que chaîne de caractères a été très utile. En effet, une volonté de simplification des "layouts" (modèles de fichiers pour le thème, les slides, l'interaction, ...) était voulue pour être des fichiers à part, facilement modifiables.

Dans le fichier core/Interpreter.js :

import layoutHTML from "../templates/layout.html.txt";
import themeCSS from "../templates/theme.css.txt";
import mainJS from "../templates/main.js.txt";
import gamepadJS from "../templates/gamepad.js.txt";
import qrcodeLibJS from "../templates/qrcode.lib.js.txt";

par exemple.

Dans le prochain article, nous verrons comment faire un serveur Web et gérer des WebSockets.

SliDesk : Une introduction par Bun

Sylvain Gougouzian — Wed, 23 Aug 2023 21:36:34 +0000

Faire des talks dans des conférences, c'est cool !
Avoir un bon outil pour cela, c'est encore mieux.

Mes premiers talks datent de 2015 et ils étaient rédigés sur https://slides.com .

Suite à une conférence d'@hsablonniere fin 2016 sur la Documentation As Code, j'ai découvert asciidoc et son environnement avec asciidoctor.

Ayant vu que Slides.com utilisait aussi RevealJS j'étais en terrain connu donc avec asciidoctor-revealjs.

Pendant quelques temps, j'ai abandonné les talks, les entreprises dans lesquelles je travaillais n'étaient pas dans les cibles visées par les conférences qui m'attiraient.

Mon arrivée chez @zenikait a changé la donne. L'ADN de cette ESN est de participer aux conférences et d'en sponsoriser certaines, elle permet également à ses collaborateurs de participer autant côté speaker qu'attendee.

Ainsi, j'ai commencé mes premiers talks et donc me remettre à "asciidoctor-revealjs".

Aussi, j'aime avoir des outils efficients, qui suffisent à mon besoin.

J'aime coder mes outils pour découvrir l'envers des choses, voir les problématiques que les concepteurs d'autres projets du même type ont eu et comment les résoudre.

SliDesk est né de cette idée là.

Après un premier passage sous node.js avec lequel je m'amuse depuis de nombreuses années, je me suis dit pourquoi ne pas tenter l'aventure avec le nouveau challenger https://bun.sh !

Bun : kézako ?!?

Bun se veut être une boîte à outils et un environnement d'exécution bien plus rapide que Node.js ou Deno.

Il est codé en Zig (https://ziglang.org).

Son installation est très simple :

curl -fsSL https://bun.sh/install | bash

Une fois installé, vous aurez accès au runtime et au sdk automatiquement.

Un des premiers points qui m'a séduit dans Bun, c'est la non-existence des node_modules lorsque l'on souhaite juste lancer un projet JS avec des dépendances. A l'image de pnpm, les bibliothèques sont stockées à un unique endroit, soulageant ainsi nos espaces de stockages.

Dès qu'il trouvera une bibliothèque qu'il ne connait pas lors de la lecture du code source, Bun la télécharge et l'installe dans son dépôt interne. Il se base sur le site https://npmjs.com pour trouver les bibliothèques versionnées.

Il fonctionne comme les autres runtimes avec des packages globaux ou locaux par projets.

A l'instar de Node.js, il est possible de créer des binaires qui peuvent être exécuté dans un terminal.

Pour cela, il faut mettre dans le fichier package.json :

{
  "bin": {
    "slidesk": "./bin/index.js"
  }
}

et dans le fichier ./bin/index.js, il faut commencer par :

#!/usr/bin/env bun

La commande `bun link`

Un des gros avantages avec Bun quand on code un outil comme SliDesk, c'est la commande bun link.

Petite explication par l'exemple.

Créons un répertoire monprogramme et déplaçons-nous dedans.

Créons un fichier package.json :

{
  "name": "monprogramme",
  "bin": {
    "monprogramme": "./bin/index.js"
  }
}

Cette instruction a pour objectif de signaler à Bun que lorsqu'on veut utiliser "monprogramme", au lieu de chercher dans le registre npmjs.com, il prendra celui-ci.

Ainsi, après une utilisation de bun link dans le répertoire où le fichier package.json cité précédemment est créé, elle nous répondra :

bun link v0.7.3 (a9b3d583)
Success! Registered "monprogramme"

To use monprogramme in a project, run:
  bun link monprogramme

Or add it in dependencies in your package.json file:
  "monprogramme": "link:monprogramme"

Créons un "exécutable"

Toujours dans le répertoire monprogramme, nous allons créer un fichier bin/index.js pour correspondre aux données saisies dans le fichier package.json précédemment instancié.

Dans ce fichier, nous allons donc préciser qu'il s'agit d'un exécutable Bun et il va afficher la version de Bun.

#!/usr/bin/env bun

console.log(`Bun version: ${Bun.version}`);

Pour le tester on peut faire un bun bin/index.js qui nous affichera : Bun version: 0.7.3.

Puis je le "link" avec bun link.

Testons cet "exécutable"

Dans un autre répertoire, lançons la commande bun link monprogramme. La commande me renvoie :

bun link v0.7.3 (a9b3d583)

 installed monprogramme@link:monprogramme with binaries:
  - monprogramme


 1 packages installed [3.00ms]

Si on regarde dans le répertoire, aucun fichier n'est présent. Le package a été installé dans le répertoire de cache de Bun.

Maintenant testons la commande bunx monprogramme, elle retourne bien le texte Bun version: 0.7.3. bunx est un alias de bun x automatiquement activé lors de l'installation de Bun.

Et voilà la fin de l'introduction à Bun. Dans le prochain article nous verrons comment manipuler les répertoires et fichiers avec Bun.