手動安裝
最快創建一個 Saasfly 應用的方式是使用 create saasfly
,可以參考自動安裝 Saasfly 的教程。
系統要求
順便說一下,我們推薦您使用 NVM (Node Version Manager) 在本地管理不同的 Node.js 版本。
1. 手動安裝
手動創建一個 Saasfly 應用,只需要簡單的幾步:
從 GitHub Fork & Clone Saasfly 倉庫
請打開 https://github.com/saasfly/saasfly,並且 fork 這個倉庫。
一次 fork 是將倉庫復製一遍。Fork 倉庫允許您自由地嘗試更改,而不會影響原始項目。
Clone 被 fork 的倉庫,(請替換 <your_username>
該部分成您 GitHub 的賬號名稱):
git clone https://github.com/<your_username>/saasfly.git
您將看到倉庫被 clone 的過程:
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 0Receiving objects: 100% (402/402), 963.18 KiB | 130.00 KiB/s, done.Resolving deltas: 100% (77/77), done.
安裝相關依賴
為了更好的體驗,請使用 Bun (How to install Bun) 來代替 npm 或者 yarn。
使用 bun
安裝相關依賴:
bun i
這個過程可能會花費幾分鐘的時間,然後您會看到:
+ @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] (v1.12.4 available)
1296 packages installed [1133.89s]
生成 Prisma Types
請確保在 saasfly 文件夾下,然後使用 bun
生成 Prisma types:
cd packages/db/bun db:generate
輸出結果:
✔ Generated Kysely types(1.7.1) to./ prisma in 1.32s
2. 啟動 Saasfly
您應該執行以下操作來啟動服務。
設置環境變量
進入 saasfly 文件夾, 復製 .env.example
文件,並將復製出來的新文件重命名為 .env.local
,然後進入文件寫入你的環境變量。
cd saasflycp .env.example .env.local
請確保您有一個可使用的 Postgres DB (如果您還沒有 Postgres,請點擊這裏) 並且已創建了一個數據庫。
POSTGRES_URL
必須要在 .env.local
文件中定義:
# 格式例子:# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"
POSTGRES_URL="postgres://postgres:[email protected]:5432/saasfly"
然後,使用 bun
去創建數據庫表(tables):
bun db:push
輸出結果:
🚀 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 │└─────────────────────────────────────────────────────────┘
如果在執行過程中出了什麽問題,您可以通過 Discord 聯系我們,我們非常榮幸去回答關於 Saasfly 的任何事情。
先執行一次構建
因為一些基本組件是編譯時(compile-time)需要的,您應該先進行 run build
。
bun run build
啟動本地 Web 服務
使用 bun run
去啟動您的 web 服務:
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
如果一切順利,Saasfly 現在應該在 http://localhost:3000 上為您的項目提供服務,您可以看到結果:
![手動安裝 Saasfly](/images/WechatIMG18.jpg)
恭喜您!現在您可以開始編寫代碼構建您的 SaaS 了。
如果您是第一次使用 Saasfly,可以參考項目結構 文檔以了解應用程序中所有可能的文件和文件夾的概述。
啟動 Web 服務並同時啟動 Stripe 服務
請閱讀該文章 Stripe。然後使用 bun dev
去啟動 Stripe 服務:
bun dev