Skip to content
Minimal Hono App built with Vite, "real" React and React Router v7
Giống Next.js, không "thần kỳ" bằng, nhưng cho bạn sự tự do, linh động và mức độ quen thuộc nhất định, nếu bạn đến từ Express.js.
Starter Official Template “chính hãng” của Cloudflare
is an ultra-fast, lightweight framework for building web applications, and works fantastically with Cloudflare Workers. With Workers Assets, you can easily combine a Hono API running on Workers with a SPA to create a full-stack app.
Phiên bản cấu hình lại theo nhu cầu
v1 - Upgrade to Vite 8 (và các plugin đi kèm)
Đồng thời cho eslint nhận diện nốt các types sinh ra bởi worker.
v2 - Cài Tailwind CSS 4 ở devDependencies
Nếu không có nhu cầu sử dụng Shadcn thì làm đến bước này là được.
v3 - Cài Shadcn với Base UI, nâng cấp Typescript 6
Nâng cấp TS6 và thêm "ignoreDeprecations" để TS không càm ràm về baseUrl
Đồng thời cài thêm @types/node để phân giải được @ path alias
Để cài Shadcn, tôi đã làm theo hướng dẫn của Shadcn > Vite > Existing Projects
Lưu ý các thư mục này cần cấu hình đúng với thư mục client-app:
// components.json
"aliases": {
"components": "@/react-app/components",
"utils": "@/react-app/lib/utils",
"ui": "@/react-app/components/ui",
"lib": "@/react-app/lib",
"hooks": "@/react-app/hooks"
},
v4 - Cài React Router v7
Không cấu hình SSR, sử dụng API do Hono quản
Nâng cấp nốt eslint lên 8.58.2 để tương thích với React Router
v5 - Dùng loader() và action() của React Router để load và add dữ liệu
Tạo 1 shared type mẫu sử dụng chung giữa front-end và back-end
// url for sitemap
export interface UrlItem {
id: string;
url: string;
lastmod: string;
}
// url form object omit id
export type CreateUrlItem = Omit<UrlItem, "id">;
Cấu hình type trong ENV của Worker
Có <Suspense> và <Await> để lazy và show loading state
Thay đổi "compatibility_date": "2026-04-19" của Cloudflare Worker để chặn "navigational request" vào API (chỉ cho phép fetch() dữ liệu API)
v6a - Sử dụng basicAuth của Hono để auth API routes
Nhưng rất cơ bản, chỉ là Authentication pop-up window
Lưu mảng ALLOWED_ADMIN and ALLOWED_PWD trong secrets
Khi deploy lên Cloudflare Worker, sử dụng câu lệnh npm wrangler put secrets ALLOWED_ADMIN và tương tự.
v6b - Thay thế basicAuth bằng cookieAuth của Hono
Back-end sử dụng getSignedCookie() để auth protected API routes
Front-end sử dụng API /api/auth/me để trả lại user object
v7 - Cấu hình tối thiểu để kết nối và query đầu tiên với D1 Database
Cài đặt Drizzle ORM để quản lý D1
Để chạy được Drizzle CLI, cần cấu hình drizzle.config.ts (nếu không thì sử dụng ORM để kết nối và sử dụng dữ liệu luôn, vì migration đã có CMS như Payload lo)
npm i drizzle-orm
npm i -D drizzle-kit
Nếu là Existing Project, cần copy các file schema và migration cũ qua
// import
Cập nhật các script trong package.json để chạy migration, export, dump
Nếu run migration, thì phải import bằng dump (nếu import bằng bản export từ remote sẽ bị lỗi)
Nếu không run migration, thì import bằng bản export
v8 final - Hoàn chỉnh giao diện và sửa một số lỗi nhỏ
Cần chạy npm run build trước khi wrangler deploy
Lưu ý: Vite sẽ build luôn file .dev.vars vào bundle, mặc dù không expose ra internet nhưng cũng nên loại trừ nó ra bằng postbuild command
"postbuild": "rm -f dist/react_fullstack/.dev.vars"
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.