Quick Start with Hono: Simple Setup Guide (Bite-sized article)

Introduction

Have you ever heard of a web framework called Hono?
Recently, I've come across the name "Hono" in various media and decided to try it out myself.
Today, I'll be sharing a brief overview of Hono along with a simple initial setup guide, partly as a memo for myself.

What is Hono?

Hono is a lightweight and fast web framework built on TypeScript.
I'm still new to it and haven't explored all its features yet, but Hono's main strengths seem to be its high-speed and lightweight routing and its multi-runtime support. It works seamlessly across various JavaScript runtimes, such as Cloudflare, Deno, Bun, AWS, Node.js, and more, using the same codebase.

In my regular web development work, I often use the MERN stack and primarily rely on Express as my backend framework. However, Hono appears to have better TypeScript compatibility and higher flexibility compared to Express, which makes it a promising candidate for becoming one of the leading frameworks in the near future.

Additionally, being a relatively new player in the field of web frameworks, Hono has a lot of potential and could very well establish itself as a next-generation framework used across various platforms and environments in the coming years.

Setup

When setting up the environment, Hono offers convenient templates that allow you to get started easily. This time, let’s use npm to begin.

First, run the following command:

npm create hono@latest hono-myapp

After running the command, you will be prompted to select a template. Choose the one that best suits your project’s environment. For this article, select the nodejs template.

After the installation is finished, a project file containing the minimum necessary items will be created, so cd it and run npm run dev.

If there are no errors or problems, try opening localhost and see if Hello World appears.

Adding a Simple Route

So far, we have only run the template files, so let's add a bit of code to enhance the project. Next, we'll use Hono to create a route that accepts dynamic parameters. You should find an index.ts file inside the src folder of the directory we created earlier. Let’s edit this file and add a route like app.get('/hello/:name') to handle a path parameter called name and return its value in the response.

Add the following code snippet to your existing code:

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
});

:name part is a path parameter that allows us to dynamically capture the value in the URL. Using c.req.param('name'), we can extract the value of :name and display it in the response as Hello, {name}!.

With the server running, try accessing the following URLs:

http://localhost:3000/branches/John → Displays: Hello, John!
http://localhost:3000/branches/Alice → Displays: Hello, Alice!

In this way, you can change the name part dynamically to show different messages based on the input.

Here’s the final version of the complete code:

import { serve } from '@hono/node-server'
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
})

const port = 3000
console.log(`Server is running on port ${port}`)

serve({
  fetch: app.fetch,
  port
})

Conclusion

Initially, I had planned to dive a bit deeper into Hono, but I decided to keep this article short and concise by focusing on Hono’s overview and setup process. As a result, the content might feel a little incomplete.

However, I will continue experimenting with Hono, and if I discover new insights or tips in the future, I’ll be sure to share them in a follow-up post.

Thank you very much for reading until the end, and I hope to see you again in my future articles. I appreciate your continued support!

The above is the detailed content of Quick Start with Hono: Simple Setup Guide (Bite-sized article). For more information, please follow other related articles on the PHP Chinese website!