适用于 React 和 NodeJS 的最佳免费开源 SaaS 模板

2025-05-28

适用于 React 和 NodeJS 的最佳免费开源 SaaS 模板

介绍开放 SaaS 🎉

我们非常高兴地推出Open SaaS,它是适用于 React、NodeJS 和 Prisma 的完全免费、开源、生产级 SaaS 样板。

请参阅此处的实际操作:

Open SaaS 拥有您最近看到的那些付费 SaaS 启动器的所有功能,但它完全免费开源

我们觉得,花 300 到 2000 美元去买一些需要自己管理的样板代码简直是疯了。而且,很多样板代码严重依赖第三方服务。再加上托管和其他费用,光是把你的想法推广出去,就得花上一大笔钱。

正因如此,我们在 Open SaaS 中决定尽可能地尝试使用开源和免费服务。例如,我们托管的演示应用及其在OpenSaaS.sh上的管理仪表板,就由 Plausible Analytics 的自托管版本提供支持。想要在您的 SaaS 中使用相同的功能吗?Open SaaS 已经为您预先配置好了!

此外, Open SaaS 使用的Wasp 框架可以为您构建许多功能,例如 Auth 和 Cron Jobs,这样您就不必支付第三方服务费用或完全自己编写代码(我们稍后会详细解释这一点)。

人们已经使用开放 SaaS 构建了什么......

自 Open SaaS 正式发布以来,已有无数用户使用其开发了众多精彩应用,并创办了极具创意的企业。因此,我们想在此重点介绍其中一些案例。

以下是我们社区中一些应用程序的精选列表:

  1. Solon:Instagram/Whatsapp 卖家的 AI 销售代理,帮助客户进行产品探索。梭伦
  2. Captn.ai:AI代理以团队形式协同工作,自动创建、监控和优化 Google Ads 活动。船长
  3. Bleepify:借助人工智能,自动即时为视频配音或删除某些文字。对于快速使 YouTube 视频符合其行为准则非常有帮助。图片描述
  4. 获取 AI 博客文章:一款高质量、以 SEO 为中心的 Markdown 格式博客文章生成器图片描述

如果上述示例尚未激发您的构建灵感,请继续阅读下文,我们将讨论为什么构建开源 SaaS 模板、我们使用了什么堆栈以及它是如何工作的。

我们为何打造它……然后免费赠送

自我们正式发布以来,反馈非常积极。

图片描述

无数人对它赞不绝口,无数 SaaS 应用程序也已经用它构建,但我们也收到了一些问题,例如:

  • “它会一直免费吗?”
  • “你开源这个的动机是什么?”

因此我们想先回答这些问题。

图片描述

首先,是的,它是 100% 免费和开源的,并且将保持这种状态。

其次,我们相信,开发者、独立黑客和创业者组成的社区的集体智慧,能够创造出比个人或小团体更好的样板。当你从某个开发者那里购买 SaaS 入门产品时,你得到的已经是一个有主见的堆栈,除此之外,你还会得到一个按照他们认为最好的方式构建的应用程序——而这未必总是对你最有利。

第三,Open SaaS是由Wasp开发的项目,Wasp 是一个开源的 React + NodeJS + Prisma 全栈框架,功能强大。我们 Wasp 团队坚信,Wasp 非常适合快速高效地创建 SaaS 应用,我们希望这个模板能够证明这一点。此外,作为开发者,我们从其他开源项目中学到了很多东西,而且 Wasp 本身就是一个开源项目。

基本上,我们热爱开源哲学,并且我们想要回馈它。🙏

因此,我们希望在推广我们的开源全栈框架的同时,能够为开发者社区提供真正宝贵的资源。我们也乐于看到社区为其做出贡献,使其不断发展壮大,成为最佳的 SaaS 样板。

开放 SaaS 由什么组成

我们在 Open SaaS 上投入了大量精力,包括文档,以便开发人员可以自信而轻松地启动 SaaS 应用程序。

我们还花了一些时间研究其他免费的开源 SaaS Starter,希望确保 Open SaaS 具备生产级 Starter 的所有功能,同时又不至于过于臃肿。我们认为我们已经基本实现了这一点,但我们会继续添加功能并随着时间的推移不断改进。

目前的主要特点如下:

  • 🔐 身份验证(电子邮件验证、谷歌、github)
  • 📩 电子邮件(sendgrid、emailgun、SMTP)
  • 📈 管理仪表板(合理或谷歌分析)
  • 🤑 Stripe 付款(只需添加您的订阅产品 ID)
  • ⌨️ 端到端类型安全(无需配置)
  • 🤖 OpenAI 集成(AI 驱动的示例应用程序)
  • 📖 Astro 博客
  • 🧪 与 Playwright 进行端到端测试
  • 🚀 随处部署
  • 📄 完整文档和社区支持

值得详细了解每个功能,所以让我们开始吧。

授权

图片描述

得益于 Wasp,Open SaaS 附带了许多可能的 Auth 方法:

  • 用户名和密码(最简单/最容易进行开发测试)
  • 电子邮件已验证并重置密码
  • Google 和/或 Github 社交登录

这就是 Wasp 真正闪耀的地方,因为设置全栈 Auth 和获取预配置的 UI 组件所需的全部内容如下:

//main.wasp
app SaaSTemplate {
  auth: {
    userEntity: User,
    methods: {
      usernameAndPassword: {},
      google: {},
      gitHub: {},
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

真的。就是这样!

只需确保您已设置社交身份验证、API 密钥以及定义好您的UserExternalAuth实体,即可开始使用。不用担心,这些步骤在Open SaaS 文档中有详细的文档和说明。

最重要的是,Open SaaS 预先配置了一些关于如何定制和创建一些真正强大的身份验证流程的示例。

管理仪表板和分析

图片描述

通过利用Wasp 的作业功能,Open SaaS 每小时从 Plausible 或 Google 的站点分析(您选择!)以及 Stripe 的数据 API 中提取数据,并将其保存到我们的数据库中。这些数据随后会显示在我们的管理面板上(访问OpenSaaS.sh查看实际操作)。更棒的是,要为您自己的应用访问这些数据,您只需按照我们的指南获取分析 API 密钥,插入提供的脚本,即可开始使用!

再次强调,Wasp 让整个过程变得非常简单。Open SaaS 已经为你定义了查询 API 和获取所需数据的功能,然后它会在main.wasp配置文件中使用 Wasp 作业:

job dailyStatsJob {
  executor: PgBoss,
  perform: {
    fn: import { calculateDailyStats } from "@server/workers/calculateDailyStats.js"
  },
  schedule: {
    cron: "0 * * * *" 
  },
  entities: [User, DailyStats, Logs, PageViewSource]
}
Enter fullscreen mode Exit fullscreen mode

就这样!Wasp 会帮你设置并运行 cron 任务。

Stripe 付款

图片描述

如果您是以前从未构建过自己的 SaaS 的开发人员,那么与 Stripe 等支付处理器集成可能是您将面临的少数挑战之一。

当我构建我的第一个 SaaS 产品CoverLetterGPT.xyz时,情况就是这样的。这实际上是我构建它的主要动机之一:学习如何将 Stripe 支付以及 OpenAI API 集成到应用程序中。

尽管 Stripe 以其出色的文档而闻名,但这个过程仍然令人望而生畏。你必须:

  • 创建正确的产品类型
  • 设置 webhook 端点
  • 告诉 Stripe 向您发送正确的 webhook 事件
  • 正确使用事件
  • 处理重复付款和失败付款
  • 上线前通过 CLI 进行正确测试

这就是为什么为您设置 Stripe 订阅付款是如此成功。

但更重要的是,我们能为您提供便捷的全流程文档!正因如此,Open SaaS 的文档中提供了便捷的 Stripe 指南🙂

图片描述

端到端类型安全

Open SaaS 是用 Typescript 构建的,而且由于它是一款全栈应用,从后端到前端的类型安全可以说是救星。我的意思是,一些固执己见的堆栈正是基于这一点而变得非常流行。

幸运的是,Wasp 为您提供了开箱即用的端到端 Typesafety(无需配置!),因此 Open SaaS 可以轻松利用它。

以下是一个例子:

  1. 让 Wasp 了解您的服务器操作:

    // main.wasp
    
    action getResponse {
      fn: import { getResponse } from "@server/actions.js",
      entities: [Response]
    }
    
  2. 输入并实施您的服务器操作。

    // src/srever/actions.ts
    
    type RespArgs = {
      hours: string;
    };
    
    const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { }
    
  3. 导入并在客户端调用它。 客户端类型将被正确推断!
    图片描述

    图片描述

人工智能示例应用程序(带 OpenAI API)

图片描述

人工智能正在让新的应用创意成为可能,这也是我们看到开发者对创建 SaaS 应用兴趣复苏的部分原因。正如我上面提到的,我开发的第一个 SaaS 应用CoverLetterGPT就是这类“GPT 包装器”之一,我很自豪地说,它带来了约 350 美元的 MRR(每月经常性收入)的可观被动收入。

我个人认为,我们正处于软件开发的最佳阶段,开发新的、有利可图的人工智能应用程序有很大的潜力,尤其是对于“独立黑客”和“个体经营者”而言。

这就是为什么 Open SaaS 推出了一款 AI 日程安排助手演示应用。您只需输入待完成的任务及其分配时间,AI Scheduler 就会为您创建一份详细的日程安排。

图片描述

底层机制是使用 OpenAI 的 API 为每个任务分配优先级,并将其分解为详细的子任务,包括咖啡休息时间!它还利用 OpenAI 的函数调用功能,将响应返回到用户定义的 JSON 对象中,以便客户端每次都能正确使用它。此外,我们计划在未来添加开源 LLM,敬请期待!

演示 AI Scheduler 可以帮助开发人员学习如何有效地使用 OpenAI API,并激发一些有创意的 SaaS 应用程序想法!

轻松部署,随处可见。

很多流行的 SaaS 入门级应用都使用依赖托管的框架,这意味着你只能依赖一家提供商进行部署。虽然这些选择可能比较简单,但对你的应用来说,未必总是最佳选择。

Wasp 为您部署全栈应用程序提供了无限可能:

  • 一键部署Fly.iowasp deploy
  • 在任何您喜欢的地方使用wasp build和部署 Dockerfiles 和客户端!

的优点在于wasp deploy它会自动生成和部署您的数据库、服务器和客户端,以及为您设置环境变量。

Open SaaS 还内置了环境变量和常量验证器,以确保您已正确设置部署所需的一切,以及文档中的部署指南

图片描述

最后,您拥有自己的代码并可以自由地将其部署到任何地方,而无需受供应商锁定。

帮助我们,帮助你

想支持我们的免费开源计划吗?那就去GitHub 上点赞支持我们吧🙏

https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_search&rid=giphy.gif&ct=g

⭐️ 给 Open SaaS 一颗星🙏

现在就去构建您的 SaaS!

我们希望 Open SaaS 能够赋能更多开发者,让他们能够交付自己的想法和业余项目。我们也希望能够获得开发者的反馈和建议,以便我们能够将其打造成最佳的 SaaS 样板入门工具。

因此,如果您有任何意见或发现任何错误,请在此处提交问题

如果您发现 Open SaaS 和/或 Wasp 有用,最简单的支持方式就是给我们一颗星:

文章来源:https://dev.to/wasp/the-best-free-open-source-saas-template-for-react-nodejs-263
PREV
🥇最好的 Web 框架并不存在🚫
NEXT
🕵️‍♂️ 自学的艺术:如何自学任何编程概念🤓