小編精選 - 技術文章翻譯 · 06月06日

適用於 React 和 NodeJS 的最佳免費開源 SaaS 模板

展示開放 SaaS 🎉

我們非常高興推出Open SaaS ，這是適用於 React、NodeJS 和 Prisma 的完全免費、開源、生產級 SaaS 樣板。

在這裡查看它的實際效果：

https://www.youtube.com/watch?v=rfO5SbLfyFE

Open SaaS 擁有您最近看到的那些付費 SaaS 入門者的所有功能，除了它完全免費且開源。

我們覺得為一些需要自己管理的樣板程式碼支付 300-2,000 美元是瘋狂的。最重要的是，許多樣板文件嚴重依賴第三方服務。再加上託管和其他費用，您需要花費大量資金才能將您的想法推向世界。

這就是為什麼透過開放 SaaS，我們有意識地決定盡可能嘗試使用開源和免費服務。例如，我們在OpenSaaS.sh上託管的演示應用程式及其管理儀表板由 Plausible 分析的自架版本提供支援。希望您的 SaaS 具有相同的功能嗎？那麼，Open SaaS 已為您預先配置好！

此外，Open SaaS 使用的Wasp 框架可以為您建立許多功能，例如 Auth 和 Cron 作業，這樣您就不必支付第三方服務費用或完全自己編寫程式碼（我們稍後會更詳細地解釋這一點）。

人們已經在使用開放 SaaS 建置什麼...

自正式發布以來，已有大量人員使用 Open SaaS 建立了令人驚嘆的應用程式並推出了超級創意業務。因此，我們首先要強調其中的一些內容。

以下是我們社區中一些應用程式的精選清單：

Solon ：Instagram/whatsapp 賣家的人工智慧銷售代理，幫助客戶探索產品。

Captn.ai ：人工智慧代理團隊協作，自動建立、監控和優化 Google Ads 廣告活動。

Bleepify ：在人工智慧的幫助下，自動配音或立即從影片中刪除某些單字。對於快速使 YouTube 影片符合其行為準則非常有幫助。

圖片描述

取得 AI 部落格文章：以 Markdown 格式提供的高品質、專注於 SEO 的部落格文章產生器

圖片描述

如果上面的這些範例還沒有激發您的建造靈感，請繼續閱讀下面的內容，我們將討論為什麼建立開源 SaaS 模板、我們使用的堆疊以及它的工作原理。

為什麼我們要建造它......然後免費贈送它

自從我們正式發布以來，反饋非常積極。

圖片描述

很多人對它讚不絕口，並且已經用它建置了許多 SaaS 應用程式，但我們也收到了一些問題，例如：

“它會保持免費嗎？”
“您開源這個的動機是什麼？”

所以我們認為我們應該先回答這些問題。

圖片描述

首先，是的，它是 100% 免費和開源的，並將保持這種狀態。

其次，我們相信，開發者、獨立駭客和個人企業家社群的集體知識將比個人或小團體產生更好的樣板。當您從某些開發人員那裡購買SaaS 入門版時，您已經獲得了一個固執己見的堆棧，然後除此之外，您還獲得了按照他們認為最好的方式建置的應用程式- 但這可能並不總是最適合您。

第三， Open SaaS是Wasp的一個專案，一個超強的開源React + NodeJS + Prisma全端框架。我們 Wasp 團隊相信 Wasp 非常適合快速且有效率地建立 SaaS 應用程式，我們希望這個模板能夠證明這一點。另外，身為開發人員，我們從其他開源專案中學到了很多東西，而 Wasp 本身就是一個開源專案。

基本上，我們熱愛開源理念，並且希望將其發揚光大。 🙏

因此，我們希望能夠為開發者社群提供非常有價值的資產，同時宣傳我們的開源全端框架。我們很高興看到社區為其做出貢獻，以便它不斷發展並成為最好的 SaaS 樣板。

開放 SaaS 是由什麼組成的

我們在 Open SaaS 上投入了大量的精力，包括文件，以便開發人員可以自信、輕鬆地啟動 SaaS 應用程式。

我們還花了一些時間檢查其他免費的開源 SaaS 啟動器，並希望確保 Open SaaS 具有可立即投入生產的啟動器的所有正確功能，而不顯得臃腫。我們認為我們已經在很大程度上實現了這一點，儘管我們將繼續加入功能並隨著時間的推移進行改進。

目前的主要特點如下：

🔐 身份驗證（電子郵件驗證、Google、github）
📩 電子郵件（sendgrid、emailgun、SMTP）
📈 管理儀表板（合理或谷歌分析）
🤑 Stripe 付款（只需加入您的訂閱產品 ID）
⌨️ 端對端類型安全性（無需配置）
🤖 OpenAI 整合（AI 驅動的範例應用程式）
📖 Astro 博客
🧪 與劇作家進行端到端測試
🚀 部署在任何地方
📄 完整的文件和社群支持

值得深入了解其中每個功能的細節，所以讓我們開始吧。

授權

感謝 Wasp，Open SaaS 附帶了許多可能的身份驗證方法：

使用者名稱和密碼（最簡單/最容易進行開發測試）
已驗證電子郵件並重設密碼
Google 和/或 Github 社群登入

這就是 Wasp 真正發揮作用的地方，因為設定全端 Auth 並取得預先配置的 UI 元件所需要做的就是：

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

嚴重地。就是這樣！

只需確保您已設定社交身份驗證並擁有 API 金鑰以及定義的User和ExternalAuth實體，就可以開始了。不用擔心，這部分內容已在Open SaaS Docs中詳細記錄和解釋。

最重要的是，Open SaaS 預先配置了一些範例，說明如何自訂和建立一些真正強大的身份驗證流程。

管理儀表板和分析

透過利用Wasp 的工作功能，Open SaaS 每小時從 Plausible 或 Google 的網站分析（您的選擇！）和 Stripe 的資料 API 中提取資料，並將其保存到我們的資料庫中。然後，該資料將顯示在我們的管理儀表板上（前往OpenSaaS.sh查看其實際情況）。好的部分是，要為您自己的應用程式存取這些資料，您所要做的就是按照我們的指南獲取分析 API 金鑰，插入提供的腳本，然後就可以開始了！

再次強調，Wasp 讓整個過程變得非常簡單。透過已經為您定義的查詢 API 和取得我們需要的資料的功能，Open SaaS 然後在main.wasp設定檔中使用 Wasp 作業：

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

就是這樣！ Wasp 負責為您設定和執行 cron 作業。

條紋支付

如果您是以前從未建立過自己的 SaaS 的開發人員，那麼與 Stripe 這樣的支付處理器整合可能是您將面臨的少數挑戰之一。

當我建立第一個 SaaS CoverLetterGPT.xyz時，我的情況就是如此。這實際上是我建造它的主要動機之一；了解如何將 Stripe 支付整合到應用程式以及 OpenAI API 中。

儘管 Stripe 因擁有豐富的文件而聞名，但這個過程仍然令人畏懼。你必須：

建立正確的產品類型
設定 webhook 端點
告訴 Stripe 將正確的 Webhook 事件傳送給您
正確使用事件
處理重複付款和失敗付款
在上線之前透過 CLI 進行正確測試

這就是為什麼為您設定 Stripe 訂閱付款是一個巨大的勝利。

但比這更重要的是，為您方便地記錄整個過程！這就是為什麼 Open SaaS在我們的文件中為您提供方便的 Stripe 指南🙂

端對端類型安全

Open SaaS 是使用 Typescript 建置的，因為它是一個全棧應用程式，所以從後端到前端的類型安全可以成為真正的救星。我的意思是，一些固執己見的堆疊在此基礎上變得非常流行。

幸運的是，Wasp 為您提供開箱即用的端到端類型安全性（無需配置！），因此 Open SaaS 可以輕鬆利用它。

這是一個例子：

讓 Wasp 了解您的伺服器操作：

    // main.wasp

    action getResponse {
      fn: import { getResponse } from "@server/actions.js",
      entities: [Response]
    }

輸入並實施您的伺服器操作。

    // src/srever/actions.ts

    type RespArgs = {
      hours: string;
    };

    const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { }