Đã đăng vào Thứ Năm, 3:34 SA 3 phút đọc

Xây dựng ứng dụng SaaS Production-Ready

Bạn đang có ý định xây dựng một ứng dụng SaaS? Mẫu thiết kế khởi đầu này sẽ giúp bạn tạo một ứng dụng có thể mở rộng và sẵn sàng đưa vào sản xuất bằng Encore.ts và Next.js. Hãy cùng khám phá nhé!

Tính năng

Trang landing marketing (/)
Trang giá cả (/pricing), kết nối với Stripe Checkout
Trang bảng điều khiển (/dashboard)
Quản lý gói đăng ký (/dashboard/subscription)

Công nghệ sử dụng

Backend framework: Encore.ts
Frontend framework: Next.js
Xác thực: Clerk
Thanh toán: Stripe
Thư viện giao diện: Tailwind & shadcn/ui

Bắt đầu

1. Cài đặt hoặc cập nhật Encore

Cài đặt Encore:

macOS: brew install encoredev/tap/encore
Linux: curl -L https://encore.dev/install.sh | bash
Windows: iwr https://encore.dev/install.ps1 | iex

Lưu ý: Mẫu khởi đầu này yêu cầu Encore v1.46.9+. Nếu bạn đang sử dụng phiên bản cũ hơn, hãy cập nhật bằng:

encore version update

2. Tạo ứng dụng

Tạo một ứng dụng từ mẫu này bằng lệnh:

encore app create my-app-name --example=ts/saas-starter

Sau đó cài đặt các dependency của frontend:

cd my-app-name/frontend
pnpm install

3. Thiết lập Clerk

Tạo tài khoản Clerk nếu chưa có.
Trong Clerk Dashboard, tạo một ứng dụng mới.
Đảm bảo ứng dụng đã bật tính năng Organization management.

Thêm biến môi trường:

Nếu bạn triển khai ứng dụng trên Vercel, hãy kết nối ứng dụng Clerk với Vercel trong mục Integrations.

Sau đó chạy:

vercel env pull

Nếu không dùng Vercel, vào API Keys trên Clerk, sao chép Publishable Key và Secret Key, sau đó thêm vào file .env.local của frontend:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={PUBLISHABLE_KEY}
CLERK_SECRET_KEY={SECRET_KEY}
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"

Cấu hình biến môi trường cho Encore:

encore secret set --prod ClerkSecretKey
encore secret set --dev ClerkSecretKey

4. Thiết lập Stripe

Tạo tài khoản Stripe nếu chưa có.
Tạo sản phẩm & gói giá trên Stripe.
Cấu hình billing customer portal.
Thêm webhook endpoint, đặt URL là: https://YOUR_DOMAIN/stripe/webhook

Tiếp theo, thêm biến môi trường:

Trên Stripe Dashboard, vào Developers → API Keys → Tạo Secret Key.
Thêm secret vào Encore: encore secret set --dev StripeSecretKey

Sao chép Webhook Signing Secret từ Webhook Page, thêm vào Encore:

encore secret set --dev StripeWebhookSigningSecret

Kiểm thử thanh toán

Dùng thông tin thẻ thử nghiệm của Stripe:

Số thẻ: 4242 4242 4242 4242
Ngày hết hạn: Bất kỳ ngày nào trong tương lai
CVC: Bất kỳ số 3 chữ số

Cấu hình biến môi trường trên Vercel:

Thêm các biến môi trường sau vào Project Settings trên Vercel:

VERCEL_ENV="development"
NEXT_PUBLIC_VERCEL_ENV="development"
VERCEL_GIT_PULL_REQUEST_ID=""
NEXT_PUBLIC_VERCEL_GIT_PULL_REQUEST_ID=""

Chạy ứng dụng cục bộ

Chạy backend với Encore:

cd backend
encore run

Chạy frontend với Next.js:

cd frontend
pnpm run dev

Đồng bộ backend & frontend

Khi thay đổi API trên Encore, hãy cập nhật client bằng lệnh:

pnpm run gen # Deployed Encore staging environment
# or
pnpm run gen:local # Locally running Encore backend

Triển khai ứng dụng

1. Triển khai backend trên Encore

Commit & push code lên Encore:

git add -A .
git commit -m 'Commit message'
git push encore

Sau đó, hãy giám sát deployment trên Cloud Dashboard của Encore.

2. Triển khai frontend trên Vercel

Tạo repo GitHub & push project lên.
Tạo dự án trên Vercel & kết nối với repo.
Chọn thư mục gốc là frontend.

Cấu hình CORS & URL frontend

Cập nhật FRONTEND_URL trong backend/config.ts.
Thêm cấu hình CORS vào encore.app nếu gặp lỗi CORS:

"global_cors": {
  // allow_origins_without_credentials specifies the allowed origins for requests
  // that don't include credentials. If nil it defaults to allowing all domains
  // (equivalent to ["*"]).
  "allow_origins_without_credentials": [
    "<ORIGIN-GOES-HERE>"
  ],

  // allow_origins_with_credentials specifies the allowed origins for requests
  // that include credentials. If a request is made from an Origin in this list
  // Encore responds with Access-Control-Allow-Origin: <Origin>.
  //
  // The URLs in this list may include wildcards (e.g. "https://*.example.com"
  // or "https://*-myapp.example.com").
  "allow_origins_with_credentials": [
    "<DOMAIN-GOES-HERE>"
  ]
}

Hoàn tất

Bây giờ bạn đã có một ứng dụng SaaS sẵn sàng cho production. Cảm ơn các bạn đã theo dõi!

development