# Setting Up a Hono Project with Node.js ESM

Hallo Everyone welcome back to my article.  
Today I want to discuss a simple example of using hono with `Node.js` ESM.

##   
1\. What is Hono?

  
Hono is a modern web framework for JavaScript/TypeScript that runs on a variety of runtimes.  
Cloudflare Workers The name Hono comes from Japanese and means small fire 🔥 — perfect for a lightweight, fast, and simple framework.

## 2.Why Node.js ESM

Node.js adopted ECMAScript Modules (ESM) primarily to align with the official JavaScript standard for module management, bringing a standardized and modern approach to code organization and sharing within the Node.js ecosystem.

  
ESM advantages:

* Syntax is consistent with browse.
    
* Supports modern tree-shaking & Modularization.
    
* More ready for TypeScript and modern bundlres.
    

## 3\. Setting up a Hono with `Node.js` ESM

* initialize the project :
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757901851051/409b8487-7bbb-4b1c-b78c-98f9f6ec4058.png align="center")

* Add Hono :
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757902538453/34f7b56a-a51b-4fae-968f-18653eb46860.png align="center")

* Enable ESM in `Node.js`
    
    Add in \``package.json —> {"type": "module"}`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757903104978/658e16f9-2941-4807-89a4-e287a66738d9.png align="center")

Create a Simple Server

create files `server.js`.

then fill in the `server.js` file like this :

```apache
import { Hono } from "hono";
import { serve } from "@hono/node-server";
 
const app = new Hono();
 
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>
  `);
});
 
app.get("/text", (c) => c.text("Ini adalah respons teks biasa."));
 
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}`);
});
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757904103842/f893675d-274f-4130-87dc-95cc40fcdbfa.png align="center")

  
If you can, run this code in the terminal using this code:

```apache
node server.js
```

If you experience an Error like this when you want to run server.js use the code above :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757906340092/4590a9c1-92d0-4a5f-a9a9-181f47850779.png align="center")

Use this code to Confirm it :

```apache
npm i @hono/node-server
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757906488860/d7a3f212-65f2-4e2c-8049-33d7b41f4728.png align="center")

If you have tried it, try running the previous code again.

The Result :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757906581781/5e54ae71-3d11-450b-86ac-94449989aafc.png align="center")

Then Copy the text “ `http://localhost:3000` “, Then Paste the text in your browser.

If you have searched in your respective browsers, a page like this will appear :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1757906846690/53fdd3f3-1993-433b-a95c-ae8ad627c2cf.png align="center")

> The End !!! Congratulation for those who understand this article and can implement it.

---

That's all from me. I apologize if there are any wrong words or anything else and thank you for reading my article. Always look forward to my next article!!!.