Premiers pas avec Bun pour les développeurs React

Bien que Bun en soit à ses débuts, il est doté de nombreuses fonctionnalités pour vous aider à créer, regrouper, tester et déployer votre application.

Chignon est une boîte à outils de développement de logiciels JavaScript tout-en-un. Il est extrêmement rapide, avec un bundler, un gestionnaire de packages et un exécuteur de tests intégrés. Son environnement d’exécution JavaScript remplace Node.js.

Notamment, Bun atteint son incroyable vitesse grâce à l’utilisation de Zig et JavaScriptCore et une formidable optimisation :

• Langage de programmation Zig : Zig est un langage de programmation système moderne conçu pour la performance et l’efficacité. Il propose des abstractions gratuites et la possibilité de compiler en code machine natif, dont Bun profite pleinement.

• Moteur JavaScriptCore : JavaScriptCore est le moteur JavaScript hautes performances utilisé par Safari. Bun étend JavaScriptCore avec une fonctionnalité à vitesse native implémentée dans Zig, ce qui améliore encore ses performances.

Il y a beaucoup de battage médiatique autour de Bun en ce moment. Presque tout le monde en dit du bien, comme celui-ci sur X:

Le but de ce guide est d’explorer comment les développeurs React peuvent tirer parti de la génialité de Bun pour améliorer l’expérience des développeurs du premier jour au déploiement.

Premiers pas avec Bun

Pour commencer avec Bun, vous devrez installer en exécutant la commande suivante sur votre ordinateur MacOS, Windows et Linux :

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

Pour les utilisateurs Windows, vous aurez besoin du sous-système Windows pour Linux (WSL) pour exécuter Bun, même si toutes les fonctionnalités de Bun ne sont pas encore disponibles pour Windows.

Vous pouvez également simplement utiliser Docker en exécutant les commandes suivantes sur votre terminal :

docker pull oven/bun
docker run --rm --init --ulimit memlock=-1:-1 oven/bun

Une fois votre installation terminée, vérifiez qu’elle a réussi en exécutant la commande ci-dessous :

bun --version

Cet article a été écrit avec la version 1.0.7.

Maintenant que Bun est installé, passons à son utilisation pour configurer l’application React. Nous verrons à la fois comment échafauder une nouvelle application React avec Bun CLI et comment intégrer Bun dans une application existante.

Création d’une nouvelle application React avec Bun

Il existe plusieurs façons de créer une application React : depuis la création de tout cela à partir de zéro jusqu’à l’utilisation d’un modèle tel que créer-réagir-applicationen utilisant Vite ou plus encore, en utilisant des frameworks React de qualité production comme Remixer, Suivant.js ou Gatsby. Toutes ces méthodes sont fournies avec leur système de build et sont basées sur le runtime Node.js.

Étant donné que le runtime Bun remplace Node.js, vous pouvez l’utiliser pour n’importe lequel de ces frameworks. Cependant, vous devrez peut-être le tester correctement pour vous assurer que tout fonctionne, car il est possible que certaines choses ne fonctionnent pas. comme prévu.

Les petits pains bun create La commande fournit un moyen pratique et efficace d’échafauder des modèles de projet à partir de la ligne de commande.

Voici comment le bun create La commande peut être utilisée pour créer un nouveau projet :

bun create <template> [<destination>]

Petit pain avec Vite

Commençons par créer une application React avec Bun et Vite. Pour créer une application React avec un modèle Vite, exécutez bun create vite app-name et suivez l’invite comme indiqué ci-dessous :

Après avoir répondu aux invites, le projet devrait être créé avec succès.

Ensuite, exécutez le bun install pour installer les dépendances. Voici à quoi devrait ressembler votre structure de répertoire une fois l’installation terminée :

.
├── README.md
├── bun.lockb
├── index.html
├── node_modules
├── package.json
├── public
│     └── vite.svg
├── src
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Jusqu’à présent, nous avons réussi à échafauder un projet React.js avec le modèle Vite et à installer toutes les dépendances du projet avec Bun CLI. Le généré bun.lockb le fichier est l’équivalent de package-lock.jsonmais pour Bun et au format binaire.

Vous pouvez utiliser le bun add [package-name] ou bun install [package-name] commandes pour installer de nouveaux packages NPM.

Chignon avec l’application Create React

Nous pouvons également créer une nouvelle application React avec Bun en utilisant le react-app modèle de chignon. Ce modèle crée un nouveau démarreur Create React App (CRA). Pour créer un nouveau démarreur Create React App à l’aide de Bun, exécutez la commande suivante :

bun create react-app todo-app

Le modèle Create React App ne bénéficie malheureusement pas de l’amélioration des performances offerte par Bun, la configuration peut donc prendre un certain temps car elle installera vos packages avec npm. Une fois la configuration terminée, la structure des répertoires ressemblera à ceci :

├── README.md
├── package-lock.json
├── package.json
├── public
└── src

Supprimer le package-lock.json fichier et exécuter bun install pour configurer correctement le projet pour Bun. Cela créera un nouveau bun.lockb fichier dans le répertoire racine.

Même si Vite et Create React App n’utilisent actuellement pas le runtime Bun par défaut, une application React créée avec Bun à l’aide du modèle Vite est nettement plus rapide qu’une application créée avec le modèle Create React App. En effet, Vite est déjà rapide et utilise son propre bundler, et Bun fournit une prise en charge et une optimisation natives supplémentaires.

De plus, l’utilisation de Bun avec Vite va encore plus loin puisque le bunx La commande vous donne la possibilité d’exécuter votre application React avec le runtime Bun en ajoutant un --bun drapeau. Ce qui peut accélérer la vitesse de votre application.

bunx --bun vite

Mais en termes d’installation de packages avec le bun install ou bun add commande pour les projets créés avec Vite et ceux créés avec CRA, les performances sont les mêmes.

Voyons ensuite comment passer progressivement à l’utilisation de Bun dans une application React existante.

Intégration de Bun dans une application React existante

Créer une application React Bun-aware consiste principalement à créer le bun.lockb fichier en exécutant bun install. Après cela, vous pouvez utiliser Bun CLI pour gérer les packages et exécuter d’autres tâches, telles que le démarrage du serveur, l’exécution de tests, etc.

Pour essayer cela, clonez ce référentielretirer le package-lock.json fichier puis exécutez bun install. Vous pouvez faire tout cela en une seule commande en exécutant le code ci-dessous :

git clone https://github.com/pmbanugo/bun--react-example-template.git
cd bun--react-example-template
rm package-lock.json
bun install

Votre répertoire de projet devrait maintenant inclure le bun.lockb et vous pouvez exécuter n’importe quel script défini dans le projet à l’aide de Bun.

Utiliser Bun comme testeur

Les performances de Bun peuvent être exploitées pour exécuter des tests, obtenir un retour plus rapide sur le code et réduire les coûts. Imaginez exécuter des tests sur un monorepo qui prennent 30 minutes, mais l’utilisation du programme d’exécution de tests de Bun pourrait réduire ce temps à quelques minutes, voire quelques secondes. Cela vous fait gagner beaucoup de temps et de ressources.

Bun est livré avec un programme d’exécution de test rapide, intégré et compatible avec Jest. Cela signifie que vous pouvez passer à Bun sans avoir à modifier vos tests existants qui utilisent Jest ou des packages de tests similaires (par exemple Vitest).

Configurons l’application que nous avons générée initialement avec Vite pour utiliser Bun pour le test. La page d’accueil générée par défaut contient le code ci-dessous :

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '../public/vite.svg'
import './App.css'
function App() {
  const [count, setCount] = useState(0);
  console.log(viteLogo);
  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}
export default App

Le rendu devrait ressembler à ceci :

Écrivons un test pour vérifier que le compteur augmente de un lorsqu’on clique dessus. Pour ce faire, nous allons installer React Testing Library et Happy Dom, qui nous permettent de tester efficacement les composants React.

ℹ️ JSDom n’est pas encore supporté dans Bun. Vous devrez passer à Happy Dom si vous souhaitez utiliser Bun.

Pour installer React Testing Library et Happy Dom, exécutez les commandes suivantes :

bun install @happy-dom/global-registrator @testing-library/react -d

Créer un fichier de test ./src/counter.test.tsx puis copiez et collez le code ci-dessous.

import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import App from './App'
import { describe, expect, test } from 'bun:test' // replaced jest or vitest to bun
    
describe('App', () => {
  test('counter increments when button is clicked', async () => {
    render(<App />)
    const button = screen.getByText('count is 0');
    fireEvent.click(button);
    // Use waitFor to wait for the DOM to update
    await waitFor(() => {
      // Expect the counter to be 1
      expect(screen.getByText('count is 1')).toBeTruthy()
   });
  });
});

Avant d’exécuter des tests nécessitant des API de navigateur, vous devez précharger le Global Registrator de Happy DOM et créer un bunfig.toml fichier à la racine de votre projet. Le bunfig.toml le fichier doit contenir les lignes suivantes :

[test]
preload = "./happydom.ts"

Le happydom.ts le fichier doit contenir le code suivant :

import { GlobalRegistrator } from "@happy-dom/global-registrator";
GlobalRegistrator.register();

Une fois ces étapes terminées, vous pouvez exécuter vos tests à l’aide du bun test commande

Maintenant que nous savons comment utiliser Bun pour les tests. Automatisons ce processus à l’aide de GitHub Action.

Utiliser Bun avec l’action GitHub

Vous pouvez utiliser Bun dans un workflow GitHub Actions pour créer ou exécuter des scripts et des tests. L’équipe Bun a créé un Action GitHub officielle que vous pouvez ajouter aux étapes de votre flux de travail. Nous allons l’utiliser pour automatiser l’exécution du test que nous avons écrit lorsqu’un nouveau commit est poussé vers la branche principale.

Créer un test.yml fichier dans le .github/workflows/ répertoire et ajoutez-y le code suivant :

name: Test Workflow
on:
  push:
    branches:
      - main
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install and set up Bun
        uses: oven-sh/setup-bun@v1

      - name: Install packages
        run: bun install

      - name: Run tests
        run: bun test

Lorsque le flux de travail s’exécute, vous devriez voir un résultat similaire à celui de la capture d’écran ci-dessous.

Le flux de travail s’est terminé si rapidement qu’on a l’impression qu’il est interrompu : vous savez, ce n’est qu’un simple test. 😉 Le temps nécessaire pour terminer peut varier en fonction de la complexité de vos tests, de la latence du réseau, etc.

Lorsque vous avez fini de créer et de tester votre application React, vous souhaitez la déployer, n’est-ce pas ? Explorons comment vous pouvez déployer votre application React avec Bun.

Déployer des applications React avec Bun

Le déploiement d’une application React varie en fonction de votre hôte préféré et si vous exécutez une application SPA ou SSR. Pour un site statique, vous pouvez regrouper et exporter les fichiers d’application vers n’importe quel hôte de fichiers statiques, les déployer avec Docker ou utiliser des plateformes comme Vercel ou FlyCD. Quelle que soit l’option que vous choisissez, Bun CLI vous facilite grandement la tâche.

Générer une version de production statique

Pour générer une build pour l’application Vite, mettez à jour le script de build dans votre fichier package.json pour :

"scripts": {
     ...
        "build": "bunx --bun vite build",
     ...
},

Puis cours bun build pour créer une version optimisée pour vous dans le ./dist annuaire.

Vous pouvez télécharger les actifs de construction statique sur n’importe quelle plate-forme d’hébergement statique.

Utiliser Docker

Une autre option consiste à déployer en tant que conteneur Docker. Bun possède une image Docker qui vous permet de créer et de déployer à l’aide de Docker.

Pour ce faire, créez un fichier Docker (./Dockerfile) à la racine de votre projet et ajoutez-y le contenu suivant :

FROM oven/bun:1
WORKDIR /app
COPY . .
RUN bun install
     
ARG PORT
EXPOSE 3000
     
CMD ["bun", "run", "start"]

Ce Dockerfile utilise l’image Docker officielle pour créer, installer et exécuter l’application dans votre conteneur Docker. Assurez-vous de mettre à jour votre package.json pour exposer le port et l’hôte afin que l’application puisse être accessible.

Mettez à jour le script de démarrage avec ce qui suit :

"scripts": {
     ...
    "start": "vite --port 3000 --host 0.0.0.0",
     ...
},

Créez et exécutez le conteneur Docker avec la commande suivante :

docker build -t bun-example .
docker run --name bun-example -d -p 3000:3000 bun-example

Conseils et pièges

1. React Query ne fonctionne pas encore avec Bun 1.0.7

Si votre projet utilise React Query, vous souhaiterez peut-être attendre un peu avant de migrer, selon ceci émettre un commentaire par Jarred Sumnerle créateur de Bun, il existe déjà un PR qui corrigera ce problème dans une future mise à jour.

2. Utilisation de l’API intégrée de Bun dans TypeScript

Pour installer les définitions TypeScript pour les API intégrées de Bun, installez bun-types.

$ bun add -d bun-types # dev dependency

Incluez ensuite "bun-types" dans le compilerOptions.types dans ton tsconfig.json:

{
  "compilerOptions": {
+     "types": ["bun-types"]
  }
}

À ce stade, vous devriez pouvoir faire référence au Bun global dans vos fichiers TypeScript sans voir d’erreurs dans votre éditeur.

console.log(Bun.version);

Vous pouvez vérifier le TypeScript de Bun Documentation pour plus d’informations.

Conclusion

Bun est un projet intéressant, même pour les développeurs React : il vise à fournir le meilleur outil pour le développement Web moderne avec une expérience et des performances améliorées pour les développeurs. Même s’il n’en est qu’à ses débuts, il est doté de nombreuses fonctionnalités pour vous aider à créer, regrouper, tester et déployer votre application.

Jusqu’à présent, nous n’avons fait qu’effleurer la surface de ce qui est possible avec Bun, visitez La documentation pour apprendre plus.

Bon piratage !