Hono - Javascript framework

Introduction

There are a lot of Javascript frameworks for the frontend, backend, and full-stack. In terms of new frameworks, I‘m not interested in new ones as there are already more popular ones that are widely used and are beneficial since businesses and corporations more widely use them.

While browsing the internet I came across a Javascript framework called Hono, I thought why try and use this one but then I noticed it had support for Cloudflare workers which is something I was currently using for a personal project.

hono-site.png

According to the website, Hono was created with Cloudflare workers in mind so going forward I plan to use it when I need a Cloudflare worker for a specific project.

How to create an Hono project

Use the following command to create an Hono project.

npm create hono@latest

You will be prompted with questions that will create the project based on the answers given.

The below options will create a NodeJS project.

  • Target directory
    • hono
  • Which template do you want to use?
    • nodejs
  • Do you want to install project dependencies?
    • yes
  • Which package manager do you want to use?
    • npm

After the project is created change into the directory of the new project.

cd hono

The project can be run using npm, the site will be available at http://localhost:3000 in the web browser.

npm run dev

Open the main index.ts file in the project and you will see the following sample code. 

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

const app = new Hono()

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

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

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

Update the index.ts by adding the below code and then saving the file.

This code adds a new route that outputs different text.

app.get('/new-path', (c) => {
  return c.text('Whoop! Whoop!')
})

Go to the URL http://localhost:3000/new-path and you should see the expected text output.