How To Build A Serverless Api With Bun And Hono

5 hari yang lalu

There was a clip erstwhile Node.js was nan go-to runtime for JavaScript. For amended and sometimes for worse, if you wanted to build a JavaScript application, you were utilizing Node.js for nan backend. Because of wont and nan immense number of tools, libraries and frameworks that support Node.js, it remains a wide utilized choice. But successful caller years, caller runtimes person appeared to reside immoderate of nan challenges developers look pinch Node.js.

One of these caller backend runtimes is Bun, introduced successful 2021. Bun’s elevator transportation is that it is “like Node.js but designed for speed, modern workflows and pinch less devices to install,” which addresses galore of nan frustrations developers person had pinch Node.js. This is important because nan web successful 2025 looks a batch different than it did erstwhile Node.js was first created successful 2009.

Hono was created successful December 2021 by Japanese developer Yusuke Wada. According to its GitHub repository, Hono is “a small, elemental and ultrafast web model built connected Web Standards.” It was primitively built for Cloudflare Workers, but now useful “on immoderate JavaScript runtime,” including Node.js, Deno, Bun and Vercel (although Node support requires an adapter and Node ≥ 18).

Why Build an API pinch Bun and Hono?

Before we dive into building a serverless API, let’s look astatine immoderate akin devices now that nan marketplace is much competitive.

The Classic: Node.js and Express

This is simply a heavier — much boilerplate, slower startup times and larger representation footprint — architecture than Bun and Hono.

The Competitor: Deno and Oak

Of each nan options retired there, Deno and Oak are nan closest to Bun and Hono. Deno is simply a modern runtime — unafraid defaults, built-in tooling, capacity optimizations — pinch first-class TypeScript support, designed pinch information and developer-friendly defaults successful mind.

So why would you want to build an app pinch Bun and Hono?

Even successful a much competitory marketplace, location are clear benefits to this combination. First, there’s speed. Bun was built specifically for performance, making API responses highly fast. Then there’s simplicity. The setup is minimal, letting you attraction connected logic alternatively of configuration. This architecture is besides TypeScript-ready, making type-safe improvement easier. On apical of that, it’s serverless-friendly, pinch templates for Cloudflare, AWS Lambda and different platforms.

Let’s return it for a trial drive.

We’re going to build a elemental serverless API that:

Receives 2 numbers from nan browser;
Calculates nan sum;
Stores results successful representation and successful nan application.

Prerequisites for This Tutorial

Before starting, you should person nan pursuing installed connected your machine:

Bun
Bun Package Manager
An IDE (I usage VS Code)
Basic knowing of programming

Setting Up Your Bun and Hono Project

We person immoderate installs and basal setup to grip earlier we commencement our build. In a caller terminal model successful a caller task successful your IDE, let’s instal Bun and initialize a caller Hono project.

First, we request to instal Bun.

After a successful install, we’re fresh to initialize nan Hono project.

This is wherever you tin spot each nan templates Hono offers. We’re going to prime nan “bun” template followed by a “Y” for task dependencies, and nan Bun package manager.

For this project, we’re only going to request 2 files:

src/index.ts — This is portion of nan package we conscionable installed. This page will beryllium our API backend.
test.html — You’ll person to adhd this page successful nan hono-api file. This is our browser interface.

Building index.ts

All nan pursuing codification blocks tin beryllium added to nan aforesaid record successful this aforesaid order. I collapsed it down to do a heavy dive into nan functionality of our serverless API.

Imports and Initialization

CORS is nan middleware we’ll use. This allows nan API to beryllium accessed from a browser, preventing cross-origin issues.

Next, let’s alteration CORS. The codification beneath will use CORS to each routes.

The adjacent point we’re going to do is create nan in-memory storage. When we taxable numbers from nan browser, this codification will let a results array to besides look successful nan terminal. Even though we’re redeeming them successful nan terminal, they’re still impermanent and will clear erstwhile you restart nan server.

Building nan Routes

The first way we’re going to adhd is our guidelines route. This is simply a basal GET for nan / endpoint.

The adjacent way will beryllium different GET route, this clip pinch a URL parameter. You tin usage this to trial functionality by adding a connection to nan extremity of nan URL successful your browser. The connection will look successful nan browser’s page.

We’re now fresh to adhd our POST way /api/sum.

This codification will person 2 numbers from nan browser, validate their type, cipher nan sum, past shop it successful nan results array. It will log nan representation contents successful nan terminal. This codification returns nan sum successful JSON.

The past way we’re going to build is simply a GET route, /api/sum.

This will nonstop nan codification to nan browser arsenic JSON.

The past measurement is to export nan app.

Here is nan codification successful 1 copy/paste option:

Building test.html

test.html is simply a elemental web interface that connects nan frontend to nan backend. Since it’s basal HTML, we are not going to spell complete it successful depth. This is wherever you tin participate 2 numbers and adhd them together, and nan sum will beryllium displayed connected nan page. It besides logs nan stored results successful your terminal.

How to Run Your Serverless Application

Once your build is complete, you tin tally nan app pinch nan bid bun tally src/index.ts.

You tin unfastened nan test.html record manually successful your browser by double-clicking it successful your task files (on a Mac, I recovered it utilizing Finder).

The browser will look for illustration this: