1Create Project
Create a backend folder next to the frontend folder (my-todo).
# Navigate to the parent folder (where my-todo is located)
cd ..
# Create backend folder
mkdir my-todo-api
cd my-todo-api
# Initialize project
npm init -y
# Install Hono
npm install hono @hono/node-server
# Install TypeScript (optional)
npm install -D typescript @types/node tsxTerm Tip: npm init / package.json
- npm init: Command to create a new Node project setup file.
- package.json: Metadata file containing scripts and dependencies.
- Script: Named command shortcuts you can run with npm.
- Deep dive: Tools and terminal basics
2Write Your First API
Create a src/index.ts file and enter the following code.
import { Hono } from 'hono';
import { serve } from '@hono/node-server';
import { cors } from 'hono/cors';
const app = new Hono();
// CORS setup (for frontend connection)
app.use('*', cors({
origin: ['http://localhost:5173'],
credentials: true,
}));
// Health check
app.get('/health', (c) => {
return c.json({ status: 'ok' });
});
// Hello API
app.get('/api/hello', (c) => {
const name = c.req.query('name') || 'World';
return c.json({ message: `Hello, ${name}!` });
});
// Start server
serve({ fetch: app.fetch, port: 8000 });
console.log('🚀 Server running on http://localhost:8000');Run the Server
# Run the server
npx tsx src/index.ts
# Test (in a new terminal)
curl http://localhost:8000/health
curl http://localhost:8000/api/hello?name=ChooraiTerm Tip: CORS / Endpoint
- Endpoint: A URL path where your API receives requests.
- CORS: Browser permission rules for cross-origin frontend/backend calls.
- Deep dive: CORS troubleshooting
If you see {"status": "ok"}, the server is running correctly.
3Todo CRUD API
Now let's add a todo management API. Ask AI with the prompt below.
AI Prompt
Copy and use
"Create a Todo CRUD API with Hono. Requirements: 1. In-memory storage (using Map) 2. Todo type: id, title, is_completed, created_at 3. API Endpoints: - GET /api/v1/todos - List (page, page_size query) - POST /api/v1/todos - Create (title required) - GET /api/v1/todos/:id - Get single item - PATCH /api/v1/todos/:id - Update (toggle is_completed) - DELETE /api/v1/todos/:id - Delete 4. Input validation (reject empty titles) 5. Error response handling Add to the existing code."
Send this to your AI assistant.
Expected Result API
# Create a todo
curl -X POST http://localhost:8000/api/v1/todos \
-H "Content-Type: application/json" \
-d '{"title": "Learn Hono"}'
# List todos
curl http://localhost:8000/api/v1/todos
# Mark as complete
curl -X PATCH http://localhost:8000/api/v1/todos/1 \
-H "Content-Type: application/json" \
-d '{"is_completed": true}'
# Delete
curl -X DELETE http://localhost:8000/api/v1/todos/14Final Folder Structure
my-todo-api/
├── src/
│ ├── index.ts # Entry point + router
│ ├── types/
│ │ └── index.ts # Todo type definitions
│ └── storage/
│ └── index.ts # In-memory storage
├── package.json
└── tsconfig.json # (optional)The completed example code is available on the GitHub repository .
FastAPI vs Hono
| Category | Hono | FastAPI |
|---|---|---|
| Language | JavaScript/TypeScript | Python |
| Same as frontend | Yes, same language | No, different language |
| Auto documentation | No | Yes, via /docs |
| Best for | JS-only devs, quick start | Python preference, ML integration |