手动安装
最快创建一个 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