Mã nguồn ứng dụng web full-stack React type-safe, tích hợp Cloudflare Workers
Mã nguồn này là giải pháp khởi tạo ứng dụng web full-stack với React và Cloudflare Workers, tập trung vào type safety, hiệu suất cao và khả năng mở rộng. Phù hợp cho các dự án SaaS, blog, hoặc hệ thống quản lý,...
- Ngôn ngữ lập trình: TypeScript (strict mode)
- Framework:
- Frontend: React, React Router (file-based routing, type generation tự động)
- Backend: Hono trên Cloudflare Workers
- Giao diện: TailwindCSS, shadcn/ui (Radix UI + Lucide icons), Sonner toasts
- Cơ sở dữ liệu: Cloudflare D1 (SQLite) với Drizzle ORM cho truy vấn type-safe
- Công cụ: package manager + runner (bun, npm, yarn, pnpm), Vite (build), Vitest (testing)
Tính năng chính:
- Server-Side Rendering (SSR) cho tốc độ tải nhanh và hỗ trợ SEO
- Type safety từ database đến UI, đảm bảo mở rộng tính năng không lỗi
- Giao diện responsive, hỗ trợ dark mode, forms hoạt động không cần JavaScript
- Triển khai trên Cloudflare edge, chi phí thấp hơn AWS/Vercel
- Dễ dàng thêm tính năng như đăng nhập (OAuth/JWT), thanh toán (Stripe, VNPay), hoặc bất kỳ ý tưởng nào của bạn.
Dành cho Developer:
- Tùy chỉnh routes trong `/app/routes/`, APIs trong `/workers/api/`, schema trong `/database/schema.ts`
- Tuỳ chỉnh và sử dụng UI components của shadcn/ui CLI, giữ type safety
- Quản lý database D1 và migrations qua Cloudflare Dashboard
- Cấu hình secrets qua `.dev.vars` hoặc Cloudflare Dashboard
Dành cho End-User:
- Giao diện mobile-first, trải nghiệm mượt mà với toasts hiện đại
- Hỗ trợ thêm tính năng như quản lý tài khoản, thay đổi giao điện, ngôn ngữ
Ví dụ ứng dụng website có thể xây dựng:
- Website tuyển dụng: Nhà tuyển dụng đăng tin, ứng viên tìm kiếm và ứng tuyển
- SaaS quản lý công việc: Tạo và duyệt task, thống kê dashboard
- Blog/E-commerce: Hiển thị bài viết/sản phẩm, tích hợp tìm kiếm và thanh toán
So với Next.js (phức tạp, chi phí cao) hoặc Remix (ít linh hoạt), mã nguồn này nhẹ, tối ưu cho Cloudflare, và dễ tùy chỉnh.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Sau khi mua, bạn nhận file `.zip` chứa mã nguồn ứng dụng React tích hợp Cloudflare Workers. Dưới đây là hướng dẫn cài đặt ngắn gọn.
Yêu cầu:
- Package manager - ở đây tôi dùng Bun 1.2.18 (cài tại https://bun.sh)
- Node.js v22.18.0 (dùng nvm để quản lý)
- Cloudflare account (miễn phí)
Kiểm tra:
bun --version # Phải là 1.2.18
node --version # Phải là v22.17.0
Cài đặt:
1. Giải nén file `.zip` vào thư mục (ví dụ: `my-project`).
2. Mở terminal, vào thư mục:
cd my-project
3. Cài dependencies:
bun install
4. Chạy migrations:
bun run db:generate
bun run db:migrate
5. Chạy dev server:
bun run dev
Truy cập: `http://localhost:5173`
6. Build và deploy:
- Build: `bun run build`
- Preview: `bun run start` (localhost:4173)
- Deploy lên Cloudflare:
bun run db:migrate-production
bun run deploy
Cần secrets trong .env: `CLOUDFLARE_API_TOKEN`, `CLOUDFLARE_ACCOUNT_ID`, `D1_DATABASE_ID`, `D1_DATABASE_NAME`.
Lưu ý:
- Lỗi type: Chạy `bun run typecheck`.
- Tùy chỉnh: Thêm routes trong `/app/routes/`, APIs trong `/workers/api/`
Nếu cần thêm chi tiết, hãy cho tôi biết!