Wie setzt man eine Bun-Anwendung ein?

Bun ist eine JavaScript-Laufzeitumgebung, die schnell, leichtgewichtig und einfach zu verwenden ist. Sie ist in Zig geschrieben und wird von JavaScriptCore unterstützt, der JavaScript-Engine, die auch Safari betreibt.

Bun verfügt über einen eingebauten Node.js-kompatiblen Paketmanager, Test-Runner und Bundler. Außerdem bietet es einen minimalen Satz hoch optimierter APIs für die Durchführung gängiger Aufgaben, wie das Starten eines HTTP-Servers und das Schreiben von Dateien.

In diesem Artikel werden Sie eine einfache Web-API mit Bun erstellen und sie auf Back4app mit Back4app-Containern bereitstellen. Lesen Sie weiter, um mehr darüber zu erfahren, wie Sie eine Bun-Anwendung hosten.

Vorteile des Bun

Seit der ersten Ankündigung von Bun, noch vor der Veröffentlichung von V1 im September 2023, ist Bun in der JavaScript-Community immer beliebter geworden. Hier sind einige der Gründe dafür.

Geschwindigkeit

Bun ist in Zig geschrieben, einer Low-Level-Programmiersprache, die für die Systemprogrammierung entwickelt wurde und sich auf Leistung, Sicherheit und Lesbarkeit konzentriert. Sie soll eine moderne Alternative zu C und C++ sein.

Im Gegensatz zu Node.js und Deno, die die V8-JavaScript-Engine von Chrome verwenden, kommt hier die JavaScriptCore-Engine von Safari zum Einsatz.

Zusätzlich zu Zig und JavaScript Core verwendet Bun auch eine Reihe anderer Techniken, wie z. B. einen benutzerdefinierten Speicherzuweiser, der für JavaScript optimiert ist, und einen Just-in-Time-Compiler (JIT) zur Optimierung des Codes während der Ausführung.

Insgesamt macht die Kombination aus Zig, JavaScript Core und anderen Optimierungen Bun zu einer sehr schnellen JavaScript-Laufzeit im Vergleich zu anderen Laufzeiten.

Node.js-Kompatibilität

Bun ist als Drop-in-Ersatz für Node.js konzipiert und als solcher mit allen Node.js-APIs kompatibel.

Es hat auch alle eingebauten Node.js-Module, wie crypto, fs, path, etc. Sie können die verfügbaren und nicht verfügbaren Node.js-Module in der Bun.js-Dokumentation nachlesen.

Außerdem ist Bun ein npm-kompatibler Paketmanager. Das bedeutet, dass Sie Bun verwenden können, um Node.js-Pakete zu installieren und zu verwalten.

TypeScript-Unterstützung Out-of-Box

Bun bietet native und nahtlose Unterstützung für TypeScript und ist damit eine ausgezeichnete Wahl, wenn Sie TypeScript in Ihren Projekten bevorzugen oder benötigen.

TypeScript, eine erweiterte und statisch typisierte Version von JavaScript, führt erweiterte Sprachfunktionen und statische Typisierung zur Verbesserung der JavaScript-Entwicklung ein.

Mit Bun ist keine zusätzliche Konfiguration erforderlich, und es müssen keine zusätzlichen Setup- oder Build-Prozeduren durchgeführt werden, um die TypeScript-Funktionalität zu aktivieren.

Beschränkungen von Bun

Trotz seiner Vorteile hat Bun gewisse Einschränkungen, die Sie vor dem Einsatz in Ihrem Projekt berücksichtigen müssen.

Begrenzte Ressourcen

Bun ist noch relativ neu, was bedeutet, dass die Gemeinschaft noch klein ist. Es gibt nicht viele Ressourcen, die sich mit der Bun-js-spezifischen Entwicklung befassen, was bedeutet, dass es schwierig sein könnte, herauszufinden, wie man die Laufzeitumgebung verwendet.

Die Bun-Dokumentation ist jedoch umfassend und dient als wertvoller Bezugspunkt. Sollten Sie auf Schwierigkeiten stoßen, gibt es auch die Möglichkeit, über den Discord-Kanal Hilfe zu suchen.

Unterstützung für Windows

Bun bietet derzeit nur begrenzte Unterstützung für das Windows-Betriebssystem. Zum Zeitpunkt der Erstellung dieses Dokuments wird nur die Laufzeitumgebung unter Windows unterstützt.

Der Testrunner, der Paketmanager und der Bundler befinden sich noch in der Entwicklung und funktionieren daher nicht unter Windows. Lesen Sie weiter, um mehr darüber zu erfahren, wie Sie eine Bun-App hosten.

Erstellen einer Bun-App

Bevor Sie Bun verwenden können, müssen Sie es installieren.

Um Bun auf macOS, WSL und Linux zu installieren, führen Sie den folgenden Befehl aus:

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

Einrichten Ihrer Entwicklungsumgebung

Um ein neues Bun-Projekt zu erstellen, führen Sie den folgenden Befehl aus:

bun init

Wenn Sie den obigen Befehl ausführen, wird ein leeres Bun-Projekt in Ihrem Projektverzeichnis initialisiert.

Für das Tutorial werden Sie eine einfache API mit Elysia, einem der schnellsten Bun-HTTP-Server-Frameworks (laut ihren Benchmarks), erstellen.

Führen Sie den folgenden Befehl aus, um Elysia und andere für dieses Projekt erforderliche Abhängigkeiten zu installieren:

bun add elysia knex dotenv pg

Zu den weiteren Abhängigkeiten, die mit dem Befehl installiert werden, gehören:

• Knex, ein Query Builder. Sie werden diese Abhängigkeit nutzen, um die Interaktion mit Ihrer Datenbank zu vereinfachen.
• dotenv, dieses Paket hilft Ihnen, Umgebungsvariablen in Ihrem Projekt zu verwalten.
• pg (Postgres-Datenbanktreiber) für die Interaktion mit Ihrer Postgres-Datenbank.

Als nächstes initialisieren Sie knex in Ihrem Projekt, indem Sie es ausführen:

knex init

Mit dem obigen Befehl wird eine Datei knexfile.js erstellt. Diese Datei enthält Konfigurationsoptionen für Ihre Datenbank.

Ersetzen Sie den Code in der Datei durch den unten stehenden Codeblock:

require("dotenv").config();

export const development = {
  client: "pg",
  connection: process.env.DATABASE_URL,
  migrations: {
    directory: "./db/migrations",
  }
};

Erstellen Sie als Nächstes eine Datei db.js in Ihrem Projektstammverzeichnis und fügen Sie den folgenden Codeblock hinzu.

const knex = require("knex");
const knexFile = require("./knexfile.js");

const environment = process.env.NODE_ENV || "development";

export default knex(knexFile[environment]);

Als Nächstes erstellen Sie eine .env-Datei und fügen der Datei Ihre Datenbankverbindungsdetails oder URI hinzu.

Zum Beispiel:

DATABASE_URL = <YOUR_DATABASE_URI>

Ersetzen Sie “YOUR_DATABASE_URI” durch die URL Ihrer Datenbank.

Hinweis: Stellen Sie sicher, dass Sie Ihre .env-Datei zu Ihrer .gitignore-Datei hinzufügen, um sicherzustellen, dass Sie keine privaten Informationen an die Versionskontrolle übertragen.

Erstellen Ihres Datenbankmodells

Um Ihr Datenbankmodell mit Knex zu erstellen, erstellen Sie eine Migrationsdatei und schreiben einen SQL-Befehl zum Erstellen mit Knex.

Führen Sie den folgenden Befehl aus, um Ihre erste Migration zu erstellen:

knex migrate:make blog

Ersetzen Sie dann den Code in der generierten Migrationsdatei durch den unten stehenden Codeblock:

/**
 * @param { import("knex").Knex } knex
 * @returns { Promise<void> }
 */
export function up (knex) {
  return knex.schema.createTable("blog", (table) => {
    table.increments("id").primary();
    table.string("title").notNullable();
    table.string("content").notNullable();
    table.string("author").notNullable();
    table.timestamp("created_at").defaultTo(knex.fn.now());
  });
}

/**
 * @param { import("knex").Knex } knex
 * @returns { Promise<void> }
 */
export function down (knex) {
  return knex.schema.dropTable("blog");
}

Führen Sie schließlich den folgenden Codeblock aus, um Ihre Migrationsdatei auszuführen:

knex migrate:latest

Der obige Befehl führt die Migrationsdatei aus, die Sie zuvor erstellt haben, und erstellt so eine Blog-Tabelle in Ihrer Datenbank.

Erstellen eines Bun-Elysia-Servers

In diesem Schritt werden Sie einen einfachen API-Server erstellen.

Öffnen Sie Ihre index.ts-Datei und fügen Sie den folgenden Codeblock hinzu:

//index.ts
const { Elysia } = require("elysia");
let db = require("./db");

db = db.default;

const app = new Elysia();

Im folgenden Codeblock haben Sie Elysia importiert und eine Instanz des Elysia-Frameworks (app) erstellt.

Erstellen von Route Handlern

Als Nächstes werden Sie Routen-Handler für Ihre Anwendung erstellen. Die Handler, die Sie erstellen, werden für die folgenden Routen verwendet:

• POST /posts/einen-neuen-Beitrag-erstellen
• GET /posts
• GET /posts/:id
• PATCH /posts/:id/update-post
• DELETE /posts/:id/delete-post

Fügen Sie den folgenden Codeblock in Ihre index.ts-Datei ein, um den Handler für “/posts/create-new-post” zu erstellen:

app.post("/posts/create-new-post", async (context) => {
  try {
    //Extract the title, content and author from the request body
    const { title, content, author } = context.body;

    //Insert the post into the database
    const post = await db("blog").insert({
      title,
      content,
      author,
    });

    //Send response to the client
    return new Response(JSON.stringify(post));
  } catch (error: any) {
    //Send error to the client
    return new Response(error.message, { status: 500 });
  }
});

Der obige Codeblock ist ein Routing-Handler für Ihren Endpunkt, der neue Beiträge zu Ihrer Datenbank hinzufügt.

Fügen Sie den unten stehenden Codeblock in Ihre index.ts-Datei ein, um den Handler zu erstellen, der alle Ihre Beiträge “/posts” abruft:

app.get("/posts", async (context) => {
  try {
    //Get all posts from the database
    const posts = await db.select("*").from("blog");

    //Send response to the client
    return new Response(JSON.stringify(posts));
  } catch (error: any) {
    //Send error to the client
    return new Response(error.message, { status: 500 });
  }
});

Fügen Sie den folgenden Codeblock in Ihre index.ts-Datei ein, um den Handler zu erstellen, der einen einzelnen Beitrag mit der ID “/posts/:id” abruft:

app.get("/posts/:id", async (context) => {
  //Extract the id from the request params
  const { id } = context.params;

  //Get the post from the database
  const post = await db("blog").where({ id });

  //If the post is not found, send a 404 response
  if (post.length === 0) {
    return new Response("Post not found", { status: 404 });
  }

  //Send response to the client
  return new Response(JSON.stringify(post));
});

Fügen Sie den unten stehenden Codeblock in Ihre index.ts-Datei ein, um den Handler zu erstellen, der einen einzelnen Beitrag mit den Daten in der Nutzlast durch die ID “/posts/:id/update-post” aktualisiert:

app.patch("/posts/:id/update-post", async (context) => {
  //Extract the id from the request params
  const { id } = context.params;

  //Extract the title and content from the request body
  const { title, content } = context.body;

  //Update the post in the database
  const post = await db("blog").where({ id }).update(
    {
      title,
      content,
    },
    ["id", "title", "content"]
  );

  //Send response to the client
  return new Response(JSON.stringify(post));
});

Fügen Sie den folgenden Codeblock in Ihre index.ts-Datei ein, um den Handler zu erstellen, der einen einzelnen Beitrag mit der ID “/posts/:id/delete-post” löscht:

app.delete("/posts/:id/delete-post", async (context) => {
  //Extract the id from the request params
  const { id } = context.params;

  //Delete the post from the database
  const post = await db("blog").where({ id }).del();

  //Send response to the client
  return new Response(JSON.stringify(post));
});

Fügen Sie schließlich den folgenden Codeblock hinzu, um den PORT für Ihre Anwendung festzulegen.

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

Führen Sie den folgenden Befehl aus, um Ihre Anwendung zu starten:

bun --watch index.ts

Bereitstellen einer Bun-App auf Back4app-Containern

Für die Bereitstellung Ihrer Bun-App sind einige Schritte erforderlich.

Schritt 1: Schreiben einer Dockerdatei

Um ein Dockerfile zu erstellen, führen Sie den folgenden Befehl in Ihrem Terminal aus.

touch Dockerfile

Wenn Sie den obigen Befehl ausführen, wird eine Dockerdatei im Stammverzeichnis Ihres Projekts erstellt.

Als Nächstes öffnen Sie Ihr Dockerfile und fügen den folgenden Codeblock hinzu:

FROM oven/bun

WORKDIR /app

COPY package.json .
COPY bun.lockb .

RUN bun install

COPY . .

EXPOSE 3000

CMD ["bun", "index.ts"]

In der obigen Dockerdatei gibt die erste Zeile FROM oven/bun das zu verwendende Basis-Image an. Dieses Abbild ist ein vorgefertigtes Abbild, das die Bun-Laufzeitumgebung und alle ihre Abhängigkeiten enthält.

Die nächste Zeile, WORKDIR /app, legt das Arbeitsverzeichnis für das Image fest. Dies ist das Verzeichnis, in das der Anwendungscode kopiert und ausgeführt werden soll.

Die folgenden beiden Zeilen, COPY package.json . und COPY bun.lockb ., kopieren die Dateien package.json und bun.lockb aus dem aktuellen Verzeichnis in das Image. Diese Dateien werden von der Bun-Laufzeitumgebung benötigt, um die Abhängigkeiten der Anwendung zu installieren.

Die nächste Zeile, RUN bun install, installiert die Abhängigkeiten der Anwendung unter Verwendung der Bun-Laufzeitumgebung.

Die nächste Zeile, COPY ..., kopiert das gesamte aktuelle Verzeichnis in das Image. Dies beinhaltet den Anwendungscode und alle anderen notwendigen Dateien.

Die nächste Zeile, EXPOSE 3000, gibt den Port 3000 des Containers für die Außenwelt frei. Dies ist der Port, an dem die Anwendung lauschen wird.

Die letzte Zeile, CMD ["bun", "index.ts"], gibt den Befehl an, der beim Starten des Containers ausgeführt werden soll. Dieser Befehl startet die Bun-Laufzeit und führt die index.ts-Datei der Anwendung aus.

Zum Schluss stellen Sie Ihren Code auf GitHub ein.

Schritt 2: Erstellen einer Back4app-Anwendung

Der nächste Schritt, um eine Bun-Anwendung zu hosten, besteht darin, eine neue Anwendung auf Back4App zu erstellen. Melden Sie sich zunächst bei Ihrem Back4App-Konto an oder melden Sie sich an, wenn Sie noch keines haben. Sobald Sie eingeloggt sind, befinden Sie sich auf dem Back4App-Dashboard.

Klicken Sie auf die Schaltfläche “NEW APP” und wählen Sie die Option“Containers as a Service“.

Als nächsten Schritt, um eine Bun-App zu hosten, verbinden Sie Ihr GitHub-Konto mit Ihrem Back4app-Konto. Das Verbinden Ihres Kontos ermöglicht Back4app den Zugriff auf Repositories in Ihrem Konto.

Sie können entscheiden, ob Sie den Zugriff auf alle Repositories in Ihrem Konto oder auf bestimmte Repositories gewähren möchten. Wählen Sie die Anwendung aus, die Sie bereitstellen möchten, in diesem Fall die Anwendung, die Sie in diesem Lernprogramm erstellt haben, und klicken Sie auf Auswählen.

Nachdem Sie auf die Schaltfläche Auswählen geklickt haben, werden Sie zu einer Konfigurationsseite weitergeleitet, auf der Sie Details zu Ihrer Anwendung angeben, z. B. den PORT und die Umgebungsvariablen.

Nachdem Sie die Details ausgefüllt haben, klicken Sie auf die Schaltfläche App erstellen. Damit wird der Bereitstellungsprozess gestartet. Ihr Deployment sollte erfolgreich sein und Sie erhalten eine URL, um auf Ihre App zuzugreifen. Wenn es jedoch fehlschlägt, können Sie die Vorteile der Back4app ChatGPT-Integration nutzen, um die Probleme zu lösen, die Sie mit Ihrem Dockerfile haben.

Alternativ können Sie Ihre Bereitstellungsfehler auch manuell mithilfe der detaillierten Protokolle und der Anleitung zur Fehlerbehebung von Back4app beheben.

Schlussfolgerung

In diesem Artikel haben Sie die JavaScript-Laufzeitumgebung von Bun, ihre Vorteile und offensichtlichen Einschränkungen kennengelernt. Sie haben auch untersucht, wie Sie eine Bun-Anwendung mit Elysia, Knex und PostgreSQL erstellen können.

Schließlich haben Sie sich mit Back4app-Containern beschäftigt und erfahren, wie Sie Ihre Bun-Anwendungen auf der Plattform bereitstellen können.

Bei der Verwendung von Bun ist zu beachten, dass es sich noch in der Anfangsphase befindet und in der Zukunft noch einige größere Änderungen vorgenommen werden könnten.

FAQ