Thiết lập thủ công

Cách nhanh nhất để tạo một trang web Saasfly mới là sử dụng create saasfly như được hiển thị trong Hướng dẫn cài đặt.

yêu cầu hệ thống

Node.js - 18.17 trở lên..
Bun - 1.0 trở lên.
OS - macOS, Windows (bao gồm WSL) và Linux đều được hỗ trợ.

Nhân tiện, chúng tôi khuyên bạn nên sử dụng NVM (Node Version Manager) để chạy các phiên bản khác nhau của Node.js.

1. Hướng dẫn cài đặt

Để tạo thủ công một ứng dụng Saasfly mới, bạn chỉ cần thực hiện một vài bước:

Kho lưu trữ Fork và Clone từ GitHub

Vui lòng mở https://github.com/saasfly/saasfly và fork kho lưu trữ này.

Fork là bản sao của một kho lưu trữ. Fork một kho lưu trữ cho phép bạn tự do thử nghiệm các thay đổi mà không ảnh hưởng đến dự án gốc.

Sao chép kho lưu trữ đã phân nhánh (vui lòng thay thế <your_username> thành tên tài khoản GitHub của bạn):

git clone https://github.com/<your_username>/saasfly.git

Bạn sẽ thấy quy trình nhân bản:

remote: Enumerating objects: 402, done.
remote: Counting objects: 100% (402/402), done.
remote: Compressing objects: 100% (298/298), done.
remote: Total 402 (delta 77), reused 386 (delta 65), pack-reused 0
Receiving objects: 100% (402/402), 963.18 KiB | 130.00 KiB/s, done.
Resolving deltas: 100% (77/77), done.

Cài đặt các phụ thuộc

Để có trải nghiệm tốt hơn, vui lòng sử dụng Bun (Cách cài đặt Bun) thay vì npm hoặc yarn.

Sử dụng bun để cài đặt các phụ thuộc:

bun i

Có thể mất vài phút, sau đó bạn sẽ thấy:

+ @saasfly/api@workspace:packages/api
+ @saasfly/auth@workspace:packages/auth
+ @saasfly/common@workspace:packages/common
+ @saasfly/db@workspace:packages/db
+ @saasfly/eslint-config@workspace:tooling/eslint-config
+ @saasfly/nextjs@workspace:apps/nextjs
+ @saasfly/prettier-config@workspace:tooling/prettier-config
+ @saasfly/stripe@workspace:packages/stripe
+ @saasfly/tailwind-config@workspace:tooling/tailwind-config
+ @saasfly/typescript-config@workspace:tooling/typescript-config
+ @saasfly/ui@workspace:packages/ui
+ @turbo/[email protected] (v1.12.4 available)
+ [email protected]
+ [email protected]
+ [email protected] (v1.12.4 available)
+ [email protected]

1296 packages installed [1133.89s]

Tạo các loại Prisma

Hãy đảm bảo bạn đang ở trong thư mục saasfly, sau đó sử dụng bun để tạo kiểu Prisma:

cd packages/db/
bun db:generate

Đầu ra:

✔ Generated Kysely types(1.7.1) to./ prisma in 1.32s

2. Bắt đầu Saasfly

Bạn nên thực hiện các bước dưới đây để chạy máy chủ.

Thiết lập các biến môi trường

Vào thư mục saasfly, sao chép tệp .env.example, đổi tên thành .env.local và nhập các biến của bạn.

cd saasfly
cp .env.example .env.local

Đảm bảo bạn có Postgres DB (Nếu bạn không có Postgres, hãy nhấp vào đây) và đã tạo cơ sở dữ liệu mới.

POSTGRES_URL phải có trong tệp .env.local của bạn:

# Ví dụ định dạng
# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"

POSTGRES_URL="postgres://postgres:[email protected]:5432/saasfly"

Sau đó, sử dụng bun để tạo bảng cơ sở dữ liệu:

bun db:push

Đầu ra:

🚀  Your database is now in sync with your Prisma schema. Done in 151ms

┌─────────────────────────────────────────────────────────┐
│  Update available 5.9.1 -> 5.10.2                       │
│  Run the following to update                            │
│    npm i --save-dev prisma@latest                       │
│    npm i @prisma/client@latest                          │
└─────────────────────────────────────────────────────────┘

Nếu có gì không ổn, bạn có thể trao đổi với chúng tôi trên Discord, chúng tôi rất vui lòng giải đáp mọi thắc mắc về Saasfly.

Chạy bản dựng đầu tiên

Vì một số thành phần cơ bản cần phải biên dịch ngay nên trước tiên bạn phải run build .

bun run build

Chạy máy chủ phát triển

Sử dụng bun run để khởi động máy chủ web của bạn:

bun run dev:web

@saasfly/nextjs:dev: cache bypass, force executing ad8bea47f156e113
@saasfly/nextjs:dev: $ bun with-env next dev
@saasfly/nextjs:dev: $ dotenv -e ../../.env.local -- next dev
@saasfly/nextjs:dev:    ▲ Next.js 14.1.0
@saasfly/nextjs:dev:    - Local:        http://localhost:3000
@saasfly/nextjs:dev:
@saasfly/nextjs:dev:    automatically enabled Fast Refresh for 1 custom loader
@saasfly/nextjs:dev:  ✓ Ready in 12.1s

Nếu mọi việc diễn ra tốt đẹp, Saasfly sẽ chạy dự án của bạn trên http://localhost:3000 và bạn có thể thấy kết quả:

Xin chúc mừng! Bây giờ bạn có thể bắt đầu viết mã để xây dựng SaaS của mình.

Nếu bạn mới sử dụng Saasfly, hãy xem tài liệu cấu trúc dự án để biết tổng quan về tất cả các tệp và thư mục có thể có trong ứng dụng của bạn.

Chạy với Stripe

Vui lòng đọc bài viết Stripe. Sau đó sử dụng bun dev để chạy với Stripe:

bun dev