In this task, you will set up the project for building the Posts API using Hono.js.
Hono.js is a minimalistic web framework for building web applications. It is designed to be simple, lightweight, and easy to use. Hono.js provides a set of tools and utilities to help you build web applications quickly and efficiently.
Create a new directory for the API project:
mkdir apiUsing the Hono CLI, scaffold a Hono project:
cd api
pnpm create hono@latestYou will be asked a series of questions:
? Target directory .
? Which template do you want to use? nodejs
? Do you want to install project dependencies? Y
? Which package manager do you want to use? pnpmOnce the project is created, navigate to the project directory:
.
├── README.md
├── .gitignore
├── package.json
├── pnpm-lock.yaml
├── src
│ └── index.ts
└── tsconfig.jsonDelete the README.md file. If you have a .gitignore file in the root directory, remove the one created by the Hono CLI.
package.json fileThe package.json file contains the project configuration and dependencies. Here is the initial package.json file:
{
"name": "api",
"scripts": {
"dev": "tsx watch src/index.ts"
},
"dependencies": {
"@hono/node-server": "^1.12.0",
"hono": "^4.4.11"
},
"devDependencies": {
"@types/node": "^20.11.17",
"tsx": "^4.7.1"
}
}Update the name field to posts-api.
Notice the dev script that uses tsx to watch the src/index.ts file. This script will automatically restart the server when you make changes to the code. The tsx command is a TypeScript compiler that compiles the TypeScript code to JavaScript. The watch flag tells tsx to watch for changes in the file and recompile it automatically.
The main dependencies are @hono/node-server and hono. The @hono/node-server package provides an adaptor for run the Hono server on Node.js, and the hono package is the core library for building Hono applications.
tsconfig.json fileHono is written in TypeScript and has first-class support for TypeScript. The tsconfig.json file is the TypeScript configuration file that tells the TypeScript compiler how to compile the code.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"skipLibCheck": true,
"types": [
"node"
],
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx",
}
}src/index.ts fileThe src/index.ts file is the entry point of the application. It contains the following 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
})Let’s break down the code: this script is fundamentally made up of two parts: the first part is the creation of the Hono app instance and the definition of the routes, and the second part is the server setup and start.
The Hono class is the core of the Hono framework. It is used to create a new Hono app instance. The app object is used to define the routes and middleware for the application.
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.text('Hello Hono!')
})In the code above, we create a new Hono app instance and define a route that responds with Hello Hono! when the root URL is accessed.
The serve function is used to start the server. It takes an object with two properties: fetch and port. The fetch property is the request handler function that is passed to the server, and the port property is the port number on which the server will run.
Hono apps can be run on different platforms, such as Deno, Node.js, Cloudfare Workers, AWS Lambda, etc. The @hono/node-server package provides an adaptor to run Hono apps on Node.js.
import { serve } from '@hono/node-server'
const port = 3000
console.log(`Server is running on port ${port}`)
serve({
fetch: app.fetch, // assuming `app` is the Hono app instance
port
})In the code above, we set the port number to 3000 and log a message to the console. We then call the serve function with the fetch property set to app.fetch and the port property set to 3000.
Let’s separate the Hono app instance and the server setup into separate files.
Create a new file src/app.ts and move the Hono app instance code into it:
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.text('Hello Hono!')
})
export default appNext, rename the src/index.ts file to src/server.ts and update the code as follows:
import { serve } from '@hono/node-server'
import app from './app'
const port = 3000
console.log(`Server is running on port ${port}`)
serve({
fetch: app.fetch,
port
})Finally, update the dev script in the package.json file to reflect the changes:
{
"scripts": {
"dev": "tsx watch src/server.ts"
},
}Start the server by running the following command:
pnpm devYou should see the following output:
Server is running on port 3000Open your browser and navigate to http://localhost:3000. You should see the message Hello Hono!.
First, install Prettier as a development dependency:
pnpm add --save-dev --save-exact prettierNext, create a .prettierrc.json file in the web folder. This file will contain the Prettier configuration.
touch .prettierrc.jsonAdd the following configuration to the .prettierrc.json file:
{
"semi": true,
"trailingComma": "all",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"endOfLine": "auto"
}Add a Prettier script to the package.json file:
"prettier": "prettier --write \"src/**/*.ts\" --config \".prettierrc.json\""Run the Prettier script to format the code:
pnpm prettierWe are now ready to commit the changes to the Git repository. Initialize a new Git repository, add the files, and commit the changes:
git init -b main
git add .
git commit -m "Initial commit"We will defer deployment to a later tutorial.
In this first task, we set up the foundation for building our Posts API using Hono.js. Specifically, we created a new Hono.js app, dove into the initial boilerplate code, refactored it to separate concerns by separating the Hono app instance and server setup, launched and tested our API server, installed and configured Prettier for code formatting, and committed all changes to our Git repository.