Démarrage rapide

Ce guide vous fait passer de zéro à un site bext en cours d'exécution en moins de 5 minutes en utilisant PRISM, le framework natif de bext. PRISM est le chemin le plus rapide vers un site bext fonctionnel : aucune configuration, aucune étape de construction requise pendant le développement et la passe de compilation au moment de la construction démarre automatiquement.

Si vous disposez d'une application Next.js / Hono / Laravel existante que vous souhaitez diffuser via bext, passez à Frameworks → Next.js ou choisissez l'adaptateur correspondant dans présentation des frameworks.

Installer bext#

Le chemin le plus rapide est le binaire précompilé :

curl -fsSL https://bext.dev/install | sh

Cela installe le moteur, le compilateur et le framework correspondants sous ~/.local/bin. Définissez BEXT_INSTALL_DIR pour choisir un autre répertoire. Voir le guide d'installation pour d'autres options d'installation.

Vérifier:

bext --version
# bext 0.x.y

Créer manuellement un site PRISM#

PRISM est intentionnellement petit : quatre fichiers vous permettent d'obtenir un site en cours d'exécution.

mkdir my-site && cd my-site
mkdir -p src/app

src/app/page.tsx:

export default function HomePage(props: {
  searchParams?: { name?: string };
}) {
  const name = props.searchParams?.name ?? "world";
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>my-site</title>
      </head>
      <body>
        <h1>Hello, {name}!</h1>
        <p>Try /?name=you to change the greeting.</p>
      </body>
    </html>
  );
}

bext.config.toml:

[server]
listen = "127.0.0.1:3088"
app_dir = "."

[framework]
type = "prism"

[compile]
on_demand = true

[build]
watch_dirs = ["src"]

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@bext-stack/framework",
    "target": "es2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true
  }
}

package.json:

{
  "name": "my-site",
  "type": "module",
  "dependencies": {
    "@bext-stack/framework": "0.2.0"
  }
}

Installez et exécutez :

bun install
bext dev .

Ouvrez http://localhost:3088 — vous devriez voir « Bonjour tout le monde ! »

Ce qui vient de se passer#

Lorsque vous avez exécuté bext dev ., bext -server :

1. Lisez bext.config.toml et sciez [framework] type = "prism". Cela indique au répartiteur de requêtes d'acheminer via le pipeline PRISM au lieu des chemins génériques / Next.js / proxy.
2. src/app/ parcouru et itinéraires découverts — page.tsx est /, about/page.tsx serait /about, etc.
3. La première requête a déclenché une compilation à la demande des données correspondantes. itinéraire via bext - turbopack. La passe de compilation a plié les parties statiques de votre JSX en chaînes HTML (voir la passe de compilation ).
4. Les requêtes ultérieures ont atteint un isolement V8 chaud avec une page mise en cache contexte. Dans la fusillade actuelle de rendu uniquement, la passe de compilation de PRISM est en moyenne de de 15,7 µs sur une page de catalogue de 38,3 Ko validée en octets ; le chemin d'exécution automatique JSX est en moyenne de 75,3 µs. La latence des requêtes de bout en bout inclut également le routage, le cache, la répartition V8 et la surcharge HTTP.

Pas de bun build, pas de vite dev, pas de chaîne d'outils de développement/production séparée. Utilisez bext dev lors du montage et bext run pour la production.

Ajouter un itinéraire#

Créez src/app/about/page.tsx :

export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
      <p>Built with bext + PRISM.</p>
      <p><a href="/">← home</a></p>
    </main>
  );
}

Avec bext 0.2.11, ouvrez http://localhost:3088/about pendant que bext dev . est en cours d'exécution. Les itinéraires ajoutés, modifiés et supprimés se rechargent automatiquement, tout comme les modifications apportées aux modules TypeScript importés. Aucun redémarrage n'est nécessaire.

Ajouter une mise en page#

Créez src/app/layout.tsx :

export default function RootLayout(props: { children: any }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>my-site</title>
      </head>
      <body>
        <nav>
          <a href="/">home</a> · <a href="/about">about</a>
        </nav>
        {props.children}
      </body>
    </html>
  );
}

Retirez ensuite le <html> / <head> / <body> de page.tsx et about/page.tsx — la mise en page les enveloppe automatiquement.

Le répartiteur compose les mises en page à l'envers : RootLayout(NestedLayout(Page(props))). Chaque layout.tsx de la chaîne de répertoires encapsule le contenu le plus profond via son accessoire children.

Ajouter une île pour l'interactivité#

Les pages PRISM sont par défaut du pur HTML rendu par le serveur. Pour les bits interactifs, ajoutez un composant "use client" sous src/islands/ :

src/islands/Counter.tsx:

"use client";

import { useState } from "preact/hooks";

export default function Counter({ start = 0 }: { start?: number }) {
  const [n, setN] = useState(start);
  return <button onClick={() => setN(n + 1)}>Count: {n}</button>;
}

Utilisez-le depuis une page du serveur :

import Counter from "../islands/Counter";

export default function Page() {
  return (
    <main>
      <h1>Click below</h1>
      <Counter start={42} />
    </main>
  );
}

Le serveur affiche un espace réservé <bext-island> ; le chargeur client récupère /islands/Counter.js, analyse les accessoires du Attribut data-props et montages. Voir Îles pour l’histoire complète.

Ou avec des signaux bext (pas de React, ~3 Ko hydraté)#

Même composant, runtime différent – ​​pas de React dans le bundle, pas de nouveau rendu lors de la mise à jour. Le pipeline de build détecte automatiquement "use signals" et émet un bundle distinct par île qui utilise le runtime de signaux de bext au lieu de React :

"use signals";
/** @jsxImportSource @bext-stack/framework/signals */

import { signal } from "@bext-stack/framework/signals";

export default function Counter({ start = 0 }: { start?: number }) {
  const n = signal(start);
  return <button onClick={() => { n.value++; }}>Count: {n.value}</button>;
}

Montage via signalsIsland("Counter", Counter, { start: 42 }). Voir Signaux pour les primitives, la passe de compilation d'auto-wrap et <List> pour les tableaux réactifs.

Déployer#

bext est un binaire unique. La plupart des déploiements de production sont :

# On the server
bext run /var/www/my-site

… derrière un terminateur TLS (ou utilisez le TLS intégré de bext — voir Guides → TLS et HTTPS ).

Pour les hôtes multi-sites, passez en mode mascarade et laissez bext acheminer par nom d'hôte :

bext --nginx-masquerade

Voir Déploiement pour les unités systemd, Docker et les modèles de tunnel Cloudflare.

Prochaines étapes#