想要构建一个SaaS应用程序吗？这个启动模板将帮助你利用这两个工具——Encore.ts和Next.js——创建一个可扩展且可用于生产的应用程序。

它使用Clerk用于身份验证，集成Stripe处理支付，并使用Tailwind和shadcn/ui进行样式和组件的处理。

示例: https://encorets-saas-starter.vercel.app

特点

• 营销登陆页面（/）
• 价格页面（/pricing），链接至 Stripe Checkout 页面
• 仪表盘页面（/dashboard）
• 订阅管理（/dashboard/subscription）

技术堆栈

• 后端框架: Encore.ts
• 前端框架: Next.js
• 身份验证: Clerk
• 支付处理: Stripe
• UI组件库: Tailwind & shadcn/ui

安装或更新Encore程序

可以安装Encore软件：

• macOS: brew install encoredev/tap/encore （使用 Homebrew 安装 encore）
• Linux: curl -L https://encore.dev/install.sh | bash （使用 curl 下载并执行安装脚本）
• Windows: Invoke-WebRequest https://encore.dev/install.ps1 | Invoke-Expression：嘿，这里是为 Windows 的命令，使用 Invoke-WebRequest 下载脚本，然后使用 Invoke-Expression 执行。

注意：此启动器需要Encore v1.46.9或更高版本，如果你安装的是旧版本的Encore，请运行encore version update来更新版本。

创建一个应用

从这个模板创建一个本地版应用：

在终端中输入以下命令： encore app create my-app-name --example=ts/saas-starter （创建一个名为my-app-name的应用，使用ts/saas-starter示例）

点击全屏进入全屏模式，点击退出全屏

接着安装前端依赖：

在你的终端里输入以下命令:

cd my-app-name/frontend  （切换到前端目录）
pnpm install            （安装依赖）

。

点全屏观看/播放 取消全屏

如果没有的话，你可以创建一个Clerk账户（如果还没有的话）。接着，在Clerk仪表板中创建一个新的应用。

请确保应用程序已准备好支持组织功能，您可以在组织管理设置页面上启用这些功能。

秘密：

如果你将应用部署在 Vercel（请参阅下方的部署说明），可以在 Vercel 项目的设置里找到 集成 部分，将 Clerk 应用与你的 Vercel 项目连接起来。
别忘了运行 vercel env pull 命令。

否则，前往你的应用的“API Keys”页面。复制“Publishable Key”和其中一个“Secret Key”。在前端项目的.env.local文件中添加它们。

    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={PUBLISHABLE_KEY}
    CLERK_SECRET_KEY={SECRET_KEY}

点击全屏/点一下退出

你也需要将以下变量添加到你的前端项目。

// 公开的职员登录URL
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"

全屏 退出全屏

要将它们添加到Encore中，请转到您的应用的_ API密钥_页面。复制“发布密钥”和其中一个“密钥”。

在你的终端中（在你的Encore应用目录下），执行以下命令：

$ encore secret set --prod ClerkSecretKey
# 设置生产环境下的ClerkSecretKey密钥

点击这里全屏模式，点击这里退出全屏

接下来，为开发密钥值也做同样的操作。最安全的方式是再创建一个密钥值（Clerk 允许你创建多个）。
一旦你有了开发密钥，就像之前一样设置。

$ encore secret set --dev ClerkSecretKey  # 在开发模式下设置职员密钥

切换到全屏模式，退出全屏

如果没有 Stripe 账户，请先创建一个。然后，创建你的 Stripe 账户，并确保设置好产品和定价方案。还需要配置账单客户面板。

你还需要在 Stripe 中将你的后端设置为 webhook 终点，并将该地址设置为 https://YOUR_DOMAIN/stripe/webhook。

目前，定价方案存储在frontend/lib/plans.ts，但你也可以从Stripe获取它们，或者如果你愿意，存储在数据库里。

秘密大揭秘：

在Stripe的控制面板中，前往开发人员页面并创建一个新API密钥。复制“私钥”的秘密部分。

在你的终端中（在你的Encore应用目录下），执行：

    $ encore secret set --dev StripeSecretKey
设置开发环境下的Stripe密钥

全屏模式 全屏退出

为了能够验证进入的 webhook 请求，你需要从 Stripe 仪表板的 Webhook 页面复制签名密钥（signing secret），并通过在 Encore 中运行以下命令将其添加到 Encore 中：

运行以下命令: 
$ encore secret set --dev StripeWebhookSigningSecret
# 设置用于Stripe webhook签名的密钥

进入全屏模式 退出全屏模式

一旦你准备将其部署到生产环境，为生产环境创建独立的密钥和Webhook签名密钥，然后运行：

运行以上命令来设置Stripe的密钥
$ encore secret set --prod StripeSecretKey
$ encore secret set --prod StripeWebhookSigningSecret

全屏，退出全屏

支付测试.

为了测试 Stripe 的支付，请使用如下测试卡详情：

卡号（卡号）：4242 4242 4242 4242
有效期：任意未来的日期
CVC，任意三个数字（CVC）

Vercel 的环境变量

默认情况下，Vercel 特定的环境变量在本地未被设置，所以你需要自己添加这些变量。这可以在 Vercel 项目的设置页面中完成。

请添加以下环境变量 在开发过程中 ：

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

按Enter键进入全屏模式，再按Enter键退出

运行你的Encore后端服务：

切换到后端目录，运行encore命令。

进入全屏 退出全屏

这将会失败，除非您按照上述说明设置了Stripe和Clerk的密钥。

在另一个终端窗口里，运行 React 前端，使用 Next.js，如下所示：

    cd frontend
    pnpm run dev

切换到前端目录并运行开发环境。使用 pnpm 运行开发脚本。

进入全屏 退出全屏

创建一个请求客户端

每次更改 Encore 端点时，重新生成请求客户端代码，以保持后端和前端之间的接口同步。

    pnpm run gen # 部署 Encore 预发布环境的这条命令
    # 或：
    pnpm run gen:local # 本地启动 Encore 后端服务

进入全屏模式，退出全屏模式

或考虑在“部署”后添加一个简短的说明，以使其更自然。例如：“部署（简而言之）”。如果后续文本将进一步解释部署的上下文，则可以保持单独的“部署”。

再来一遍

把你的后端放到 Encore 的免费云开发测试环境中，

    git add -A .
    git commit -m '信息内容'
    git push 再推送

全屏模式 退出全屏

然后前往Cloud Dashboard监控您的部署并找到您的生产环境的URL地址。

在那里你可以看到指标和跟踪信息，还可以将你的应用程序连接到GitHub仓库，这样每次有新提交时就能自动部署。此外，你还可以连接自己的AWS或GCP账户来部署应用程序。

你的SaaS后端部分现在部署到云了，做得不错！

Vercel 上的 Next.js 应用

1. 在 GitHub 上创建一个仓库，并将项目推送到该仓库。
2. 在 Vercel 上创建一个新的项目，并将项目与你的 GitHub 仓库关联起来。
3. 选择 frontend 目录作为 Vercel 项目的根目录。

后端需要知道前端部署的位置，以便从 Stripe 正确地返回重定向 URL。这也有助于 CORS 正常工作。

要解决这个问题，你需要更新两个配置文件就可以了。

首先，将 backend/config.ts 文件中的 FRONTEND_URL 常量改为指向你前端部署的地方。

其次，如果你遇到在从前端调用Encore API时的CORS问题，你可能需要指定哪些来源可以访问你的API（通过浏览器访问）。你通过在encore.app 文件中指定global_cors键来实现这一点，该键的结构如下：

    "global_cors": {
      // allow_origins_without_credentials 指定了不包含凭证的请求允许的源。如果为空值，默认允许所有域名。
      "allow_origins_without_credentials": [
        "<ORIGIN-GOES-HERE>"
      ],

      // allow_origins_with_credentials 指定了包含凭证的请求允许的源。如果请求的源在这个列表中，则 Encore 将返回 Access-Control-Allow-Origin: <Origin>。
      //
      // 列表中的 URL 可以使用通配符（例如 "https://*.example.com"）。
      "allow_origins_with_credentials": [
        "<DOMAIN-GOES-HERE>"
      ]
    }

全屏模式 退出全屏

这两个都默认为托管演示应用“https://encorets-saas-starter.vercel.app”。

在这里可以找到更多关于CORS配置的信息: https://encore.dev/docs/ts/develop/cors

你的SaaS应用程序现在已经可以扩展并准备好投入生产了，运行起来了。继续加油，不断开发你的SaaS产品！

• 如果你有任何问题：加入我们的 Discord 频道
• 在 GitHub 上给 Encore 点个赞
• 查看更多的开源应用示例