Project Icon

saas

开源框架助力快速构建可扩展SaaS产品

SaaS Boilerplate是一个开源的网络应用程序框架,为开发者提供了构建SaaS产品的基础架构。它集成了用户认证、团队管理、订阅支付等核心功能,采用React、Next.js、Express等现代技术栈,并支持服务器端渲染。该框架还整合了AWS、Stripe等第三方服务,使开发者能够专注于创建差异化功能,加速SaaS产品的开发和上线过程。

image

Support Ukraine: link

SaaS Boilerplate

Open source web app that saves you many days of work when building your own SaaS product. The boilerplate comes with many basic SaaS features (see Features below) so that you can focus on features that differentiate your product.

If you want to learn how to build this project from scratch, check out our book: https://builderbook.org/book

The open source project is located in the saas folder. If you purchased our book, codebases for each of the book's chapters are located in the book folder.

We've used this saas project to build:

  • Builder Book - learn how to build full-stack web apps from scratch
  • SaaS Boilerplate - open source web app to build your own SaaS product
  • Work in biotech - job board for biotech startup companies
  • AI-cruiter - browser extension is built for recruiters managing a high volume of job applicants. AI-cruiter uses LLMs - like ChatGPT and PaLM 2 - to generate succinct and relevant summaries of your job applicants' resumes
  • Async - open source urgent vs non-urgent team communication tool for small teams
  • Async Labs - many custom dev projects

Live demo:

Sponsors

aws-activate-logo

1password-logo

Showcase

Check out projects built with the help of this open source app. Feel free to add your own project by creating a pull request.

  • Async: Open source web app for team communication, separate urgent vs. non-urgent conversations.
  • workinbiotech.com: Work in biotech, job board for small and young biotech companies
  • Retaino by Earl Lee: Save, annotate, review, and share great web content. Receive smart email digests to retain key information.
  • Builder Book: Open source web app to publish documentation or books.

Contents

Features

  • Server-side rendering for fast initial load and SEO.
  • User authentication with Google OAuth API and Passwordless, cookie, and session.
  • Production-ready Express server with compression, parser, and helmet.
  • Transactional emails (AWS SES): welcome, team invitation, and payment.
  • Adding email addresses to newsletter lists (Mailchimp): new users, paying users.
  • File upload, load, and deletion (AWS S3) with pre-signed request for: Posts, Team Profile, and User Profile.
  • Websockets with socket.io v3.
  • Team creation, Team Member invitation, and settings for Team and User.
  • Opinionated architecture:
    • keeping babel and webpack configurations under the hood,
    • striving to minimize number of configurations,
    • withAuth HOC to pass user prop and control user access to pages,
    • HOC extensions MyApp and MyDocument
    • server-side rendering with Material-UI,
    • model-specific components in addition to common components.
  • Universally-available environmental variables at runtime.
  • Custom logger (configure what not to print in production).
  • Useful components for any web app: ActiveLink, Confirm, Notifier, MenuWithLinks, and more.
  • Analytics with Google Analytics.
  • Production-ready, scalable architecture:
    • app - user-facing web app with Next/Express server, responsible for rendering pages (either client-side or server-side rendered). app sends requests via API methods to api Express server.
    • api - server-only code, Express server, responsible for processing requests for internal and external API infrastructures.
  • Subscriptions with Stripe:
    • subscribe/unsubscribe Team to plan,
    • update card information,
    • verified Stripe webhook for failed payment for subscription.

Running api locally:

  • Before running, create a .env file inside the api folder with the environmental variables as shown below. These variables are also listed in .env.example, which you can use as a template to create your own .env file inside the api foler.

api/.env:

# Used in api/server/server.ts
MONGO_URL_TEST=
MONGO_URL=
SESSION_NAME=
SESSION_SECRET=
COOKIE_DOMAIN=

# Used in api/server/google.ts
GOOGLE_CLIENTID=
GOOGLE_CLIENTSECRET=

# Used in api/server/aws-s3.ts and api/server/aws-ses.ts
AWS_REGION=
AWS_ACCESSKEYID=
AWS_SECRETACCESSKEY=

# Used in api/server/models/Invitation.ts and api/server/models/User.ts
EMAIL_SUPPORT_FROM_ADDRESS=

# Used in api/server/mailchimp.ts
MAILCHIMP_API_KEY=
MAILCHIMP_REGION=
MAILCHIMP_SAAS_ALL_LIST_ID=

----------
# All env variables above this line are needed for successful user signup

# Used in api/server/stripe.ts
STRIPE_TEST_SECRETKEY=sk_test_xxxxxx
STRIPE_LIVE_SECRETKEY=sk_live_xxxxxx

STRIPE_TEST_PLANID=plan_xxxxxx
STRIPE_LIVE_PLANID=plan_xxxxxx

STRIPE_LIVE_ENDPOINTSECRET=whsec_xxxxxx

# Optionally determine the URL
URL_APP="http://localhost:3000"
URL_API="http://localhost:8000"
PRODUCTION_URL_APP="https://saas-app.async-await.com"
PRODUCTION_URL_API="https://saas-api.async-await.com"
  • Your .env file file must have values for the required variables. To use all features and third-party integrations, also add the optional variables.

  • IMPORTANT: do not publish your actual values for environmentable variables in .env.example; this file is public and only meant to show you how your .env should look.

  • IMPORTANT: use your values for PRODUCTION_URL_APP and PRODUCTION_URL_API. These are values for domain name that you own.

  • IMPORTANT: The above environmental variables are available on the server only. You should add your .env file to .gitignore inside the api folder so that your secret keys are not stored on a remote Github repo.

  • To get value for MONGO_URL_TEST, we recommend you use a free MongoDB at MongoDB Atlas or $15/month MongoDB at Digital Ocean

  • Specify your own name and secret keys for Express session: SESSION_NAME and SESSION_SECRET

  • Get GOOGLE_CLIENTID and GOOGLE_CLIENTSECRET by following the official OAuth tutorial.
    Important: For Google OAuth app, callback URL is: http://localhost:8000/oauth2callback
    Important: You have to enable Google+ API in your Google Cloud Platform account.

  • Once .env is created, you can run the api app. Navigate to the api folder, run yarn install to add all packages, then run the command below:

    yarn dev
    

Running app locally:

  • Navigate to the app folder, run yarn to add all packages, then run yarn dev and navigate to http://localhost:3000:

    • A .env file in the app folder is not required to run, but you can create one to override the default variables. The environmental variables for .env in the app folder are shown below. You can also refer .env.example for creating your own .env file in the app folder.
      NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY="pk_test_xxxxxxxxxxxxxxx"
      NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLEKEY="pk_live_xxxxxxxxxxxxxxx"
      
      NEXT_PUBLIC_BUCKET_FOR_POSTS=
      NEXT_PUBLIC_BUCKET_FOR_TEAM_AVATARS=
      NEXT_PUBLIC_BUCKET_FOR_TEAM_LOGOS=
      
      NEXT_PUBLIC_URL_APP="http://localhost:3000"
      NEXT_PUBLIC_URL_API="http://localhost:8000"
      NEXT_PUBLIC_PRODUCTION_URL_APP=
      NEXT_PUBLIC_PRODUCTION_URL_API=
      
      NEXT_PUBLIC_API_GATEWAY_ENDPOINT=
      NEXT_PUBLIC_GA_MEASUREMENT_ID=
    
    • IMPORTANT: do not publish your actual values for environmentable variables in .env.example; this file is public and only meant to show you how your .env should look.

    • IMPORTANT: use your values for PRODUCTION_URL_APP and PRODUCTION_URL_API. These are values for domain name that you own.

    • To get NEXT_PUBLIC_GA_MEASUREMENT_ID, set up Google Analytics and follow these instructions to find your tracking ID.

    • To get NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY, go to your Stripe dashboard, click Developers, then click API keys.

  • For successful file uploading, make sure your buckets have proper CORS configuration. Go to your AWS account, find your bucket, go to Permissions > CORS configuration, add:

[
  {
    "AllowedHeaders":[
      "*"
    ],
    "AllowedMethods":[
      "PUT",
      "POST",
      "GET",
      "HEAD",
      "DELETE"
    ],
    "AllowedOrigins":[
      "http://localhost:3000",
      "https://saas-app.async-await.com"
    ],
    "ExposeHeaders":[
      "ETag",
      "x-amz-meta-custom-header"
    ]
  }
]
  • Make sure to update allowed origin with your actual values for NEXT_PUBLIC_URL_APP and NEXT_PUBLIC_PRODUCTION_URL_APP.

  • Once .env is created, you can run the app app. Navigate to the app folder, run yarn install to add all packages, then run the command below:

    yarn dev
    

Symlink api in lambda:

In lambda directory we are symlinking api directory. You can run symlink command in lambda folder as mentioned below:

bash symlink ../api

Deploy to Heroku, AWS Elastic Beanstalk, API Gateway and AWS Lambda

We give detailed instructions inside Chapter 9 and 10 of our SaaS Boilerplate book: https://builderbook.org/book

Built with

For more detail, check package.json files in both app and api folders and project's root.

To customize styles, check this guide.

Screenshots

Google or passwordless login: 1_SaaS_login

Dropdown menu for settings: 2_SaaS_DropdownMenu

Personal settings: 3_SaaS_PersonalSettings

Team settings: 4_SaaS_TeamSettings

Creating a Discussion: 5_SaaS_Discussion_Creation

Writing a Post, Markdown vs. HTML view: 6_SaaS_Discussion_Markdown

7_SaaS_Discussion_HTML

Discussion between team members: 8_SaaS_Discussion_Dark

Billing settings: 9_SaaS_Billing

Purchasing a subscription: 10_SaaS_BuySubscription

Payment history: 12_SaaS_PaymentHistory

Contributing

Want to support this project? Consider buying our books.

Team

You can contact us at team@async-labs.com.

If you are interested in working with us, check out Async Labs.

License

All code in this repository is provided under the MIT License.

Project structure

├── .elasticbeanstalk
│   └── config.yml
├── .github
│   └── FUNDING.yml
├── .vscode
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── api
│   ├── .elasticbeanstalk
│   │   └── config.yml
│   ├── server
│   │   ├── api
│   │   │   ├── index.ts
│   │   │   ├── public.ts
│   │   │   ├── team-leader.ts
│   │   │   └── team-member.ts
│   │   ├── models
│   │   │   ├── Discussion.ts
│   │   │   ├── EmailTemplate.ts
│   │   │   ├── Invitation.ts
│   │   │   ├── Post.ts
│   │   │   ├── Team.ts
│   │   │   └── User.ts
│   │   ├── utils
│   │   │   ├── slugify.ts
│   │   │   └── sum.ts
│   │   ├── aws-s3.ts
│   │   ├── aws-ses.ts
│   │   ├── google-auth.ts
│   │   ├── logger.ts
│   │   ├── mailchimp.ts
│   │   ├── passwordless-auth.ts
│   │   ├── passwordless-token-mongostore.ts
│   │   ├── server.ts
│   │   ├── sockets.ts
│   │   └── stripe.ts
│   ├── static
│   │   └── robots.txt
│   ├── test/server/utils
│   │   ├── slugify.test.ts
│   │   └── sum.test.ts
│   ├── .eslintignore
│   ├── .eslintrc.js
│   ├──
项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手,通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能,支持100+编程语言,与主流编辑器无缝集成,显著提升开发效率和代码质量。

Project Cover

问小白

问小白是一个基于 DeepSeek R1 模型的智能对话平台,专为用户提供高效、贴心的对话体验。实时在线,支持深度思考和联网搜索。免费不限次数,帮用户写作、创作、分析和规划,各种任务随时完成!

Project Cover

白日梦AI

白日梦AI提供专注于AI视频生成的多样化功能,包括文生视频、动态画面和形象生成等,帮助用户快速上手,创造专业级内容。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案,通过智能技术简化视频制作流程。无论是企业宣传还是个人分享,有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

讯飞绘镜

讯飞绘镜是一个支持从创意到完整视频创作的智能平台,用户可以快速生成视频素材并创作独特的音乐视频和故事。平台提供多样化的主题和精选作品,帮助用户探索创意灵感。

Project Cover

讯飞文书

讯飞文书依托讯飞星火大模型,为文书写作者提供从素材筹备到稿件撰写及审稿的全程支持。通过录音智记和以稿写稿等功能,满足事务性工作的高频需求,帮助撰稿人节省精力,提高效率,优化工作与生活。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术,为商家提供一键生成商品图和营销文案的服务,显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台,让商品第一时间被种草。

Project Cover

Trae

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号