Exploring the basics of Hono, a fast and lightweight alternative to Express.
Tags: webdev, javascript, hono, programming
Published: 2023-09-10 12:59:06


### Express


Express has historically been a popular choice for constructing RESTful APIs and application backends. However, with the emergence of newer tools and technologies, Express's dominant position in these areas is facing competition.

 








### Hono 

Hono is such an alternative to express which is an ultrafast web framework which is capable of creating RESTful APIs and backends for your applications. According to a benchmark, It is about 12 times faster than express. 

### What is Hono?

According to the developers, 

Hono - [炎] means flame🔥 in Japanese - is a small, simple, and ultrafast web framework for the Edges. It works on any JavaScript runtime: Cloudflare Workers, Fastly Compute@Edge, Deno, Bun, Vercel, Netlify, Lagon, AWS Lambda, Lambda@Edge, and Node.js.


### How to install Hono

To create a new Hono project you can use the following command in the terminal

`npm create hono@latest <project-name>`

A new folder will be created based on the name you provided.


### Install dependencies

Now to install the dependencies, navigate to the folder of your project and run `npm i` in the terminal.



Congratulations, now you have setup a Hono project that could be used as a backend for your frontend frameworks such as React,Solid,Svelte or Vue.


### Understanding the project structure

The Hono project structure is simple and easy to understand. Most of the time, we will be working with the **Src** folder most of the time as it contains our code. We can also configure our typescript optionns in the `tsconfig.json` file.


### Basic Hello world application using Hono


In the `index.ts` file, we will delete all of the code and start from scratch.

At first, we import the Hono package which we have installed. 
 
`import { Hono } from 'hono'`

Initialize the library 
`const app = new Hono()`


Now with using this 'app' variable, we can create various routes for our application.


We will now create our index route '/' using Hono


`app.get('/', (c) => c.text('Congrats!'))`



We can also send data back in JSON format like a traditional api.

`

`app.get('/users', (c) => c.json({user_1:"Bob",user_2:"Mary"}))`


Now we will export the app so that Hono can run it

`export default app`

The final code should look something like this 

````typescript

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Congrats!'))

app.get('/users', (c) => c.json({user_1:"Bob",user_2:"Mary"}))

export default app

````

### Creating dynamic routes using Hono

We might need dynamic routes for our app. Dynamic routes allow us to build routes that take a dynamic value. For example when you see a video of youtube, instead of creating a new route for every video, they use a dynamic route. To create a dynamic route in Hono, we can just add a slug like 
`/user/:id`

Here we can use  this example 


````javascript
app.get('/user/:id',(c) => c.text("user id is " + c.req.param('id')))

````

The final code should look like this

````javascript
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Congrats!'))

app.get('/users', (c) => c.json({user_1:"Bob",user_2:"Mary"}))



app.get('/user/:id',(c) => c.text(`user id is ${c.req.param('id')}`))







export default app


### Conclusion

Hono makes it easy and simple to build RESTful APIis for our frontend frameworks such as solid,svelte,vue and react. The performance is also great. Overall it is giving tough competition to Express



````