Bagaimana Cara Menerapkan Aplikasi Bun?

Bun adalah runtime JavaScript yang dirancang agar cepat, ringan, dan mudah digunakan. Bun ditulis dalam bahasa Zig dan didukung oleh JavaScriptCore, mesin JavaScript yang menggerakkan Safari.

Bun memiliki manajer paket, runner, dan bundler yang kompatibel dengan Node.js. Bun juga menyediakan satu set minimal API yang sangat dioptimalkan untuk melakukan tugas-tugas umum, seperti memulai server HTTP dan menulis berkas.

Pada artikel ini, Anda akan membuat API web sederhana dengan Bun dan menerapkannya di Back4app menggunakan kontainer Back4app. Teruslah membaca untuk mempelajari lebih lanjut cara meng-host aplikasi Bun.

Keuntungan dari Bun

Sejak pengumuman awal Bun, bahkan sebelum rilis V1 pada bulan September 2023, Bun telah menjadi semakin populer di komunitas JavaScript. Berikut adalah beberapa alasannya.

Kecepatan

Bun ditulis dalam Zig, bahasa pemrograman tingkat rendah yang dirancang untuk pemrograman sistem, dengan fokus pada kinerja, keamanan, dan keterbacaan. Dimaksudkan sebagai alternatif modern untuk C & C++.

Selain itu, tidak seperti Node.js dan Deno, yang menggunakan mesin JavaScript V8 milik Chrome, ia menggunakan mesin JavaScriptCore, yang memberi kekuatan pada Safari.

Selain Zig dan JavaScript Core, Bun juga menggunakan sejumlah teknik lain, seperti pengalokasi memori khusus yang dioptimalkan untuk JavaScript dan kompiler just-in-time (JIT) untuk mengoptimalkan kode saat dieksekusi.

Secara keseluruhan, kombinasi Zig, JavaScript Core, dan pengoptimalan lainnya membuat Bun menjadi runtime JavaScript yang sangat cepat jika dibandingkan dengan runtime lainnya.

Kompatibilitas Node.js

Bun dirancang untuk menjadi pengganti drop-in untuk Node.js, dan dengan demikian, Bun kompatibel dengan semua API Node.js.

Bun.js juga memiliki semua modul Node.js bawaan, seperti crypto, fs, path, dll. Anda dapat memeriksa modul-modul Node.js yang tersedia dan yang tidak tersedia pada dokumentasi Bun.js.

Selain itu, Bun adalah manajer paket yang kompatibel dengan npm. Artinya, Anda dapat menggunakan Bun untuk menginstal dan mengelola paket Node.js menggunakan Bun.

Dukungan TypeScript di Luar Kotak

Bun memiliki dukungan asli dan tanpa batas untuk TypeScript, menjadikannya pilihan yang sangat baik jika Anda lebih suka atau membutuhkan TypeScript dalam proyek Anda.

TypeScript, versi JavaScript yang diperluas dan diketik secara statis, memperkenalkan fitur-fitur bahasa tingkat lanjut dan pengetikan statis untuk meningkatkan pengembangan JavaScript.

Dengan Bun, tidak diperlukan konfigurasi tambahan, dan tidak ada persyaratan untuk penyiapan tambahan atau prosedur pembuatan untuk mengaktifkan fungsionalitas TypeScript.

Keterbatasan Bun

Terlepas dari kelebihannya, Bun memiliki keterbatasan tertentu yang perlu Anda pertimbangkan sebelum menggunakannya dalam proyek Anda.

Sumber Daya Terbatas

Bun masih relatif baru, artinya komunitasnya masih kecil. Tidak banyak sumber daya yang mencakup pengembangan khusus Bun-js, yang berarti Anda mungkin mengalami kesulitan untuk mengetahui cara menggunakan runtime.

Namun, dokumentasi Bun sangat komprehensif dan berfungsi sebagai titik referensi yang berharga. Jika Anda mengalami kesulitan, ada juga opsi untuk mencari bantuan melalui saluran Discord mereka.

Dukungan untuk Windows

Bun saat ini menyediakan dukungan terbatas untuk sistem operasi Windows. Pada saat penulisan, hanya runtime yang didukung pada Windows.

Test runner, manajer paket, dan bundler masih dalam tahap pengembangan dan, oleh karena itu, tidak berfungsi di Windows. Teruslah membaca untuk mengetahui lebih lanjut cara meng-host aplikasi Bun.

Membangun Aplikasi Bun

Sebelum Anda dapat menggunakan Bun, Anda harus menginstalnya.

Untuk menginstal Bun di macOS, WSL, dan Linux, jalankan perintah di bawah ini:

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

Menyiapkan Lingkungan Pengembangan Anda

Untuk membuat proyek Bun baru, jalankan perintah di bawah ini:

bun init

Menjalankan perintah di atas akan menginisialisasi sebuah proyek Bun kosong di direktori proyek Anda.

Untuk tutorial ini, Anda akan membuat API sederhana dengan Elysia, salah satu kerangka kerja server HTTP Bun tercepat (Menurut tolokukur mereka ).

Jalankan perintah di bawah ini untuk menginstal Elysia dan dependensi lain yang diperlukan untuk proyek ini:

bun add elysia knex dotenv pg

Ketergantungan lain yang terinstal dalam perintah tersebut meliputi:

• Knex, pembuat kueri. Anda akan menggunakan ketergantungan ini untuk menyederhanakan interaksi dengan basis data Anda.
• dotenv, paket ini membantu Anda mengelola variabel lingkungan dalam proyek Anda.
• pg (driver database Postgres) untuk berinteraksi dengan database Postgres Anda.

Selanjutnya, inisialisasi knex dalam proyek Anda dengan menjalankannya:

knex init

Perintah di atas membuat file knexfile.js. File ini berisi opsi konfigurasi untuk basis data Anda.

Ganti kode dalam file dengan blok kode di bawah ini:

require("dotenv").config();

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

Selanjutnya, buat berkas db.js di direktori root proyek Anda dan tambahkan blok kode di bawah ini ke dalamnya.

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

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

export default knex(knexFile[environment]);

Selanjutnya, buat file .env dan tambahkan detail koneksi basis data atau URI Anda ke file tersebut.

Sebagai contoh:

DATABASE_URL = <YOUR_DATABASE_URI>

Ganti “YOUR_DATABASE_URI” dengan URL database Anda.

Catatan: Pastikan Anda menambahkan file .env ke file .gitignore untuk memastikan Anda tidak memasukkan informasi pribadi ke kontrol versi.

Membuat Model Basis Data Anda

Untuk membuat model database Anda menggunakan Knex, Anda akan membuat file migrasi dan menulis perintah create SQL menggunakan Knex.

Jalankan perintah di bawah ini untuk membuat migrasi pertama Anda:

knex migrate:make blog

Selanjutnya, ganti kode dalam file migrasi yang dihasilkan dengan blok kode di bawah ini:

/**
 * @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");
}

Terakhir, jalankan blok kode di bawah ini untuk menjalankan file migrasi Anda:

knex migrate:latest

Perintah di atas mengeksekusi file migrasi yang telah Anda buat sebelumnya, sehingga membuat tabel Blog di database Anda.

Membuat Server Bun-Elysia

Pada langkah ini, Anda akan membuat server API sederhana.

Buka file index.ts Anda dan tambahkan blok kode di bawah ini:

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

db = db.default;

const app = new Elysia();

Pada blok kode di bawah ini, Anda telah mengimpor Elysia dan membuat sebuah instance dari kerangka kerja Elysia (aplikasi).

Membuat Penangan Rute

Selanjutnya, Anda akan membuat penangan rute untuk aplikasi Anda. Penangan yang Anda buat akan digunakan untuk rute-rute berikut:

• POST /posts/buat-postingan-baru
• GET /posts
• GET /posts/:id
• PATCH /posts/:id/update-post
• MENGHAPUS /posts/:id/hapus-post

Tambahkan blok kode di bawah ini ke berkas index.ts Anda untuk membuat penangan untuk “/posts/create-new-post”:

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

Blok kode di atas adalah penangan rute untuk titik akhir Anda yang menambahkan pos baru ke basis data Anda.

Tambahkan blok kode di bawah ini ke berkas index.ts Anda untuk membuat penangan yang mengambil semua postingan Anda “/posts”:

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

Tambahkan blok kode di bawah ini ke berkas index.ts Anda untuk membuat penangan yang mengambil satu postingan dengan id “/posts/:id”:

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

Tambahkan blok kode di bawah ini ke berkas index.ts Anda untuk membuat penangan yang memperbarui satu pos dengan data di dalam payload dengan id “/posts/:id/update-post”:

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

Tambahkan blok kode di bawah ini ke berkas index.ts Anda untuk membuat penangan yang menghapus satu postingan dengan id “/posts/:id/delete-post”:

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

Terakhir, tambahkan blok kode di bawah ini untuk mengatur PORT untuk aplikasi Anda.

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

Jalankan perintah di bawah ini untuk memulai aplikasi Anda:

bun --watch index.ts

Menerapkan Aplikasi Bun Bakar di Wadah Back4app

Menerapkan aplikasi Bun Anda memerlukan beberapa langkah.

Langkah 1: Menulis berkas Docker

Untuk membuat berkas Docker, jalankan perintah di bawah ini pada terminal Anda.

touch Dockerfile

Menjalankan perintah di atas akan membuat sebuah Dockerfile di direktori root proyek Anda.

Selanjutnya, buka Dockerfile Anda dan tambahkan blok kode di bawah ini ke dalamnya:

FROM oven/bun

WORKDIR /app

COPY package.json .
COPY bun.lockb .

RUN bun install

COPY . .

EXPOSE 3000

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

Pada berkas Docker di atas, baris pertama, FROM oven/bun, menentukan citra dasar yang akan digunakan. Citra ini adalah citra yang telah dibuat sebelumnya yang berisi runtime Bun dan semua dependensinya.

Baris berikutnya, WORKDIR /app, menetapkan direktori kerja untuk image. Ini adalah direktori di mana kode aplikasi akan disalin dan dijalankan.

Dua baris berikut, COPY package.json . dan COPY bun.lockb ., menyalin berkas package.json dan bun.lockb dari direktori saat ini ke dalam image. File-file ini diperlukan untuk runtime Bun untuk menginstal dependensi aplikasi.

Baris berikutnya, RUN bun install, menginstal ketergantungan aplikasi menggunakan runtime Bun.

Baris berikutnya, COPY . ., menyalin seluruh direktori saat ini ke dalam gambar. Ini termasuk kode aplikasi dan file lain yang diperlukan.

Baris berikutnya, EXPOSE 3000, mengekspos port 3000 dari kontainer ke dunia luar. Ini adalah port yang akan didengarkan oleh aplikasi.

Baris terakhir, CMD ["bun", "index.ts"], menentukan perintah yang akan dijalankan saat kontainer dimulai. Perintah ini akan memulai runtime Bun dan menjalankan berkas index.ts aplikasi.

Terakhir, dorong kode Anda ke GitHub.

Langkah 2: Buat Aplikasi Back4app

Langkah selanjutnya untuk meng-host aplikasi Bun adalah membuat aplikasi baru di Back4App. Pertama, masuk ke akun Back4App Anda atau daftar jika Anda belum memilikinya. Setelah Anda masuk, Anda akan menemukan diri Anda di dasbor Back4App.

Klik tombol “APLIKASI BARU” dan pilih opsi“Wadah sebagai Layanan“.

Sebagai langkah selanjutnya untuk meng-host aplikasi Bun, hubungkan akun GitHub Anda ke akun Back4app. Menghubungkan akun Anda memungkinkan Back4app mengakses repositori di akun Anda.

Anda bisa memutuskan untuk memberikan akses ke semua repositori di akun Anda atau repositori tertentu. Pilih aplikasi yang ingin Anda terapkan, dalam hal ini, aplikasi yang Anda buat dalam tutorial ini, dan klik Pilih.

Setelah mengklik tombol Pilih, Anda akan diarahkan ke halaman konfigurasi, di mana Anda akan mengisi rincian tentang aplikasi Anda, seperti PORT dan variabel lingkungan.

Setelah mengisi detailnya, klik tombol Buat Aplikasi. Ini akan memulai proses penyebaran. Deployment Anda seharusnya berhasil, dan Anda akan mendapatkan URL untuk mengakses aplikasi Anda, tetapi jika gagal, Anda bisa memanfaatkan integrasi Back4app ChatGPT untuk menyelesaikan masalah yang Anda hadapi dengan Dockerfile Anda.

Atau, Anda dapat memecahkan masalah kesalahan penerapan secara manual menggunakan log terperinci dan panduan pemecahan masalah Back4app.

Kesimpulan

Pada artikel ini, Anda telah menjelajahi runtime JavaScript Bun, kelebihan, dan keterbatasannya. Anda juga telah mempelajari cara membuat aplikasi Bun menggunakan Elysia, Knex, dan PostgreSQL.

Terakhir, Anda telah menjelajahi kontainer Back4app dan cara menggunakan aplikasi Bun Anda di platform ini.

Ketika menggunakan Bun, penting untuk dicatat bahwa Bun masih dalam tahap awal dan mungkin akan memperkenalkan beberapa perubahan besar di kemudian hari.

PERTANYAAN YANG SERING DIAJUKAN