Ứng dụng Bun + Preact

# Giới thiệu Bun là một công cụ mạnh mẽ giúp phát triển ứng dụng full-stack với TypeScript trở nên đơn giản hơn bao giờ hết. Với tốc độ chạy nhanh, máy chủ phát triển có khả năng tải lại nóng (HMR), và một bundler, chúng ta sẽ cùng nhau xây dựng một ứng dụng tối thiểu để phục vụ một trang HTML, gắn một component Preact, và cung cấp một API nhỏ. ## Nội dung ứng dụng Bạn sẽ có được: - Một máy chủ Bun đơn giản (phục vụ HTML và một route API nhỏ). - Một client Preact gắn vào `#root`. - Các script cho chế độ phát triển (có tải lại nóng) và sản xuất. ```plaintext src/ ├─ index.ts # entry máy chủ ├─ index.html # khung HTML └─ client.tsx # entry client ``` Đó là tất cả - không có gì phức tạp, chỉ đủ để khởi động một ứng dụng Bun full-stack. ## 1. Khởi tạo dự án Chạy lệnh sau để khởi tạo: ```bash bun init ``` Lệnh này sẽ tạo ra file `package.json`, `tsconfig.json`, và một vài cấu hình mặc định hữu ích. ## 2. Cài đặt Preact Để cài đặt Preact, sử dụng lệnh: ```bash bun add preact ``` Preact cung cấp cho chúng ta một API tương thích với React nhưng nhẹ hơn. Hiện tại, chúng ta sẽ chỉ sử dụng nó ở phía client. ## 3. Chỉ định TypeScript vị trí của JSX Thêm đoạn sau vào phần `compilerOptions` trong file `tsconfig.json`: ```json { "compilerOptions": { "jsxImportSource": "preact" } } ``` **Tại sao?** Với các runtime JSX hiện đại, TypeScript cần biết thư viện nào cung cấp các hàm JSX. Việc thiết lập `jsxImportSource` thành `preact` đảm bảo rằng các file `.tsx` của bạn sẽ sử dụng runtime của Preact, tránh lỗi “JSX not found” hoặc loại không khớp. ## 4. Tạo các file ứng dụng Chạy lệnh sau để tạo các file cần thiết: ```bash mkdir src \ && mv index.ts src/index.ts \ && touch src/index.html \ && touch src/client.tsx ``` Chúng ta sẽ giữ tất cả trong thư mục `src/` để dễ quản lý. `index.ts` sẽ là entry cho máy chủ, `index.html` là khung HTML, và `client.tsx` là entry cho Preact. ## 5. Thêm script vào `package.json` Chèn đoạn mã sau vào file `package.json`: ```json { "scripts": { "dev": "bun --hot src/index.ts", "start": "NODE_ENV=production bun src/index.ts" } } ``` - `dev` - khởi động Bun với tính năng tải lại nóng, cho phép Bun tự động chạy lại file khi có bất kỳ thay đổi nào. - `start` - chạy ở chế độ sản xuất (không có tải lại nóng). ## 6. Tạo khung HTML Chèn đoạn mã sau vào `src/index.html`: ```html Ứng dụng Bun + Preact

``` **Tại sao?** Đây là trang duy nhất mà máy chủ của chúng ta sẽ trả về cho tất cả các route. Dòng `

Bài viết về chủ đề#preact

Tổng hợp các bài viết về #preact

Tạo ứng dụng full-stack Bun + Preact chỉ trong vài phút 🚀#frontend#preact#bunjs

Chủ đề phổ biến

Tạo ứng dụng full-stack Bun + Preact chỉ trong vài phút 🚀