Learn Hono with Node.js ESM

Assalamu ‘alaikum wa rakhmatullahi wa barakaatuh

Halo semuanya, hari ini kita akan belajar hono dengan node.js ESM.

Mari kita mulai belajar kita dengan bacaan basmallah bersama-sama.

Ok, lets gooo.

1. Apa itu Hono?

Hono adalah web framework modern untuk JavaScript/TypeScript yang berjalan di berbagai runtime, seperti:

• Bun

• Node.js

• Deno

• Cloudflare Workers Nama Hono berasal dari bahasa Jepang yang berarti api kecil 🔥 — cocok untuk framework yang ringan, cepat, dan sederhana.

Kalau Express.js sudah lama populer, maka Hono bisa dibilang generasi baru framework minimalis yang mengutamakan:

• Performa tinggi (dibanding Express lebih cepat).

• Dukungan ESM (ECMAScript Module).

• API sederhana tapi modern.

2. Kenapa Node.js ESM?

Secara default, banyak project lama Node.js masih menggunakan CommonJS (CJS) dengan require(). Namun, sejak Node.js v14 ke atas, ESM (import/export) sudah menjadi standar.

Keunggulan ESM:

• Sintaks konsisten dengan browser.

• Mendukung tree-shaking & modularisasi modern.

• Lebih siap untuk TypeScript dan bundler modern.

Contoh perbedaan:

CommonJS (lama):

const express = require("express");
const app = express();

ESM (modern):

import { Hono } from "hono";
const app = new Hono();

3. Setup Project Hono dengan Node.js ESM

a. Inisialisasi project

Pertama-tama mari kita buat direktori di git bash.

lalu masuk ke directory hono-esm.

lanjut inisialisasi node.js

Alhamudulillah kita berhasil menginisialisasi node.js di directory kita.

b. Tambahkan Hono

npm install hono

mari kita install hono dengan npm.

Alhamdulillah kita telah berhasil menginstall hono.

Hasil Proses:

• added 1 package: Ini menunjukkan bahwa npm berhasil menginstal satu package baru, yaitu hono.

• and audited 2 packages in 4s: Ini berarti npm juga melakukan pemeriksaan keamanan (audit) terhadap total 2 package (yaitu hono dan package lain yang mungkin dibutuhkan) dan proses ini memakan waktu 8 detik.

• found 0 vulnerabilities: Ini adalah hasil yang sangat baik. Artinya, tidak ada kerentanan (vulnerabilities) atau masalah keamanan yang ditemukan pada package yang baru saja dipasang.

c. Aktifkan ESM di Node.js

Edit package.json → tambahkan:

{
  "type": "module"
}

selanjutnya kita perlu menambahkan “type”: “module” di file package.json.

Untuk mengubah file kita bisa ketikkan nano nama file. Disini kita ketikkan nano package.json karena kita ingin mengubah file package.json.

gambar di atas isi file package.json sebelum diubah.

dan gambar di bawah isi file package.json yang telah diubah.

lalu kita keluar dari file package.json dengan mengetik ctrl + y. Lalu ketik y.

lalu klik enter, maka kita akan keluar dari file package.json.

4. Membuat Server Sederhana

Buat file server.js:

nano server.js

setelah dibuat dan masuk file server.js, kita langsung aja isi file tersebut.

// server.js
import {hono} from "hono";
import {serve} from "@hono/hono-server";

const app = new Hono();

// Rute utama (/) menyajikan HTML sederhana
app.get("/", (c) => {
  return c.html(`
    <h1>Sample Doc API</h1>
    <p>Rute yang tersedia:</p>
    <ul>
    <li><a href="/text">/text</a> - Menampilkan teks biasa</li>
    <li><a href="/json">/json</a> - Menampilkan output JSON</li>
    </ul>
  `);
});

// Rute untuk teks
app.get("/text", (c) => { c.text("Ini adalah respons teks biasa."));

// Rute untuk JSON
app.get("/json" (c) => {c.json({ data: "ini adalah respons JSON", status: "ok" }));

serve(app, (info) => {
  console.log(`Server berjalan di http://localhost:${info.port}`);

Jalankan:

untuk menjalankan server kita bisa gunakan perintah:

node server.js

Eh, ada error, mari kita perbaiki.

sudah kita perbaiki, mari kita coba jalankan lagi.

eh, error lagi.