# 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):**

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

**ESM (modern):**

```bash
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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757903019954/bc8ebcda-cd19-4973-9c1c-58c148437ce3.png align="center")

lalu masuk ke directory **hono-esm.**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757902953162/138af621-a3f6-4134-8d87-ed69e946a66d.png align="center")

lanjut inisialisasi **node.js**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757903088886/722416b4-3f7f-498e-b8e7-3b892b819028.png align="center")

Alhamudulillah kita berhasil menginisialisasi node.js di directory kita.

### **b. Tambahkan Hono**

```bash
npm install hono
```

mari kita install **hono** dengan npm.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757903674988/0de5429b-2fb9-40af-9635-93b074fb231c.png align="center")

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:

```bash
{
  "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**.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757904822844/272484db-0dca-40ca-bde6-96cd76e99ab7.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757904267811/2c15fe9f-617c-464e-af38-129f3c2ff496.png align="center")

gambar di atas isi file package.json sebelum diubah.

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757904381851/3f5b49dc-e168-474d-bbb8-ef4211f8dcce.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757904447521/94069de4-51f5-4df6-8a74-f6a2342b9668.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757904573266/23627f97-b7bd-4b9f-8344-cae73dfa3e1e.png align="center")

## **4\. Membuat Server Sederhana**

Buat file `server.js`:

```bash
nano server.js
```

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757906151001/a50df971-fc07-445f-a4a6-01dea5c450fe.png align="center")

```bash
// 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:

```bash
node server.js
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757906264207/94d622e7-6fbb-4347-90bf-08408b173563.png align="center")

Eh, ada error, mari kita perbaiki.

sudah kita perbaiki, mari kita coba jalankan lagi.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757906742536/02261949-ef14-414b-b4f0-68f331eb1535.png align="center")

eh, error lagi.