saas 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
saas 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
saas 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT License
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发
开源组织
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-11-30

软件简介

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.

Live demo:

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.

  • 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. Built with React, Material-UI, Next, Express, Mongoose, MongoDB.
  • Async: Asynchronous communication and project management tool.

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.
    • we prepared both apps for easy deployment to now by vercel.
  • 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 listed below.
    This file must have values for the required variables.
    To use all features and third-party integrations, also add the optional variables.

    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_API=
    PRODUCTION_URL_APP=
    
    # in pages/_document.tsx and lib/withAuth.tsx
    GA_MEASUREMENT_ID=
    

    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.

  • 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:
      STRIPE_TEST_PUBLISHABLEKEY=pk_test_xxxxxxxxxxxxxxx
      STRIPE_LIVE_PUBLISHABLEKEY=pk_live_xxxxxxxxxxxxxxx
    
      BUCKET_FOR_POSTS=
      BUCKET_FOR_TEAM_AVATARS=
      BUCKET_FOR_TEAM_LOGOS=
    
      URL_APP=http://localhost:3000
      URL_API=http://localhost:8000
      PRODUCTION_URL_API=
      PRODUCTION_URL_APP=
    
      API_GATEWAY_ENDPOINT=
      GA_MEASUREMENT_ID=
    
    • To get GA_MEASUREMENT_ID, set up Google Analytics and follow these instructions to find your tracking ID.
    • To get 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 URL_APP and 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
    

Deploy with Heroku

To deploy the two apps (api and app), you can follow these instructions to deploy each app individually to Heroku:

https://github.com/async-labs/builderbook/blob/master/README.md#deploy-to-heroku

You are welcome to deploy to any cloud provider. Eventually, we will publish a tutorial for AWS Elastic Beanstalk.

If you need help deploying your SaaS Boilerplate app, or variation of it, you can hire us. Email us for more details: team@async-await.com.

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? Sign up at async and/or buy our book, which teaches you how to build this project from scratch.

Sponsors

Team

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

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
│   ├── .gitignore
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.server.json
│   └── yarn.lock
├── app
│   ├── .elasticbeanstalk
│   │   └── config.yml
│   ├── components
│   │   ├── common
│   │   │   ├── Confirmer.tsx
│   │   │   ├── LoginButton.tsx
│   │   │   ├── MemberChooser.tsx
│   │   │   ├── MenuWithLinks.tsx
│   │   │   ├── MenuWithMenuItems.tsx
│   │   │   └── Notifier.tsx
│   │   ├── discussions
│   │   │   ├── CreateDiscussionForm.tsx
│   │   │   ├── DiscussionActionMenu.tsx
│   │   │   ├── DiscussionList.tsx
│   │   │   ├── DiscussionListItem.tsx
│   │   │   └── EditDiscussionForm.tsx
│   │   ├── layout
│   │   │   ├── index.tsx
│   │   ├── posts
│   │   │   ├── PostContent.tsx
│   │   │   ├── PostDetail.tsx
│   │   │   ├── PostEditor.tsx
│   │   │   └── PostForm.tsx
│   │   ├── teams
│   │   │   └── InviteMember.tsx
│   ├── lib
│   │   ├── api
│   │   │   ├── makeQueryString.ts
│   │   │   ├── public.ts
│   │   │   ├── sendRequestAndGetResponse.ts
│   │   │   ├── team-leader.ts
│   │   │   └── team-member.ts
│   │   ├── store
│   │   │   ├── discussion.ts
│   │   │   ├── index.ts
│   │   │   ├── invitation.ts
│   │   │   ├── post.ts
│   │   │   ├── team.ts
│   │   │   └── user.ts
│   │   ├── confirm.ts
│   │   ├── isMobile.ts
│   │   ├── notify.ts
│   │   ├── resizeImage.ts
│   │   ├── sharedStyles.ts
│   │   ├── theme.ts
│   │   └── withAuth.tsx
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── billing.tsx
│   │   ├── create-team.tsx
│   │   ├── discussion.tsx
│   │   ├── invitation.tsx
│   │   ├── login-cached.tsx
│   │   ├── login.tsx
│   │   ├── team-settings.tsx
│   │   └── your-settings.tsx
│   ├── public
│   │   └── pepe.jpg
│   ├── server
│   │   ├── robots.txt
│   │   ├── routesWithCache.ts
│   │   ├── server.ts
│   │   └── setupSitemapAndRobots.ts
│   ├── .babelrc
│   ├── .eslintignore
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── next.env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.server.json
│   └── yarn.lock
├── book
├── lambda
│   ├── .estlintignore
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── api
│   ├── handler.ts
│   ├── package.json
│   ├── serverless.yml
│   ├── tsconfig.json
│   └── yarn.lock
├── .gitignore
├── LICENSE.md
├── README.md
├── package.json
├── yarn.lock
展开阅读全文

代码

评论

点击引领话题📣 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
Ajv 输入验证错误漏洞
输入验证不恰当
Ajv 6.12.2版本中的ajv.validate()函数中存在输入验证错误漏洞。攻击者可利用该漏洞执行代码或造成拒绝服务。
CVE-2020-15366 MPS-2020-10525
2022-08-08 20:39
Yargs Y18n 输入验证错误漏洞
动态确定对象属性修改的控制不恰当
Yargs Y18n是Yargs个人开发者的一个类似I18n的由Js编写的代码库。 y18n before 3.2.2, 4.0.1 and 5.0.5版本存在输入验证错误漏洞,该漏洞源于网络系统或产品未对输入的数据进行正确的验证。
CVE-2020-7774 MPS-2020-17543
2022-08-08 20:39
Npm Ini 资源管理错误漏洞
拒绝服务
Npm Ini是美国Npm公司的一个基于Javascript的用于解析和序列化Ini格式文件的代码库。 Npm ini before 1.3.6 存在资源管理错误漏洞,该漏洞允许攻击者可利用该漏洞向应用程序提交恶意的INI文件,该应用程序将用INI解析该文件。这可以根据上下文进一步加以利用。
CVE-2020-7788 MPS-2020-17544
2022-08-08 20:39
nodejs 安全漏洞
拒绝服务
nodejs是是一个基于ChromeV8引擎的JavaScript运行环境通过对Chromev8引擎进行了封装以及使用事件驱动和非阻塞IO的应用让Javascript开发高性能的后台应用成为了可能。 nodejs-tmpl存在安全漏洞,该漏洞源于网络系统或产品的代码开发过程中存在设计或实现不当的问题。
CVE-2021-3777 MPS-2021-31423
2022-08-08 20:39
Color-String 安全漏洞
不加限制或调节的资源分配
Color-String是开源的一个库,用于解析和生成 CSS 颜色字符串。 Color-String 1.5.5及之前版本存在安全漏洞,该漏洞源于当应用程序检查一个精心制作的数据时,就会出现正则表达式拒绝服务(ReDOS)。
CVE-2021-29060 MPS-2021-8683
2022-08-08 20:39
Npm Node-tar 后置链接漏洞
node-tar是一款用于文件压缩/解压缩的软件包。 Npm Node-tar 中存在后置链接漏洞,该漏洞源于产品未对特殊字符做有效验证。攻击者可通过该漏洞在其他路径创建恶意文件。
CVE-2021-37701 MPS-2021-28486
2022-08-08 20:39
Dan DeFelippi node-XMLHttpRequest 信任管理问题漏洞
证书验证不恰当
Dan DeFelippi node-XMLHttpRequest是 (Dan DeFelippi)开源的一个应用软件。用于模拟浏览器XMLHttpRequest对象。 Node.js xmlhttprequest-ssl package 1.6.1之前版本存在信任管理问题漏洞,该漏洞源于任何证书都不会被拒绝。
CVE-2021-31597 MPS-2021-5338
2022-08-08 20:39
mongoose 存在原型污染漏洞
原型污染
mongoose 是一个 Mongoose 是一个 MongoDB 对象建模工具,旨在在异步环境中工作。此软件包的受影响版本容易受到原型污染。
MPS-2022-13891
2022-08-08 20:39
Moment.js 路径遍历漏洞
路径遍历
Moment.js 是一个 JavaScript 日期库。用于解析、验证、操作和格式化日期。 Moment.js 的 npm 版本中处理目录遍历序列时对于输入验证不严格导致可以构造特制的 HTTP 请求读取系统上的任意文件。 攻击者可利用该漏洞访问系统敏感文件。
CVE-2022-24785 MPS-2022-3752
2022-08-08 20:39
needle 存在Authorization请求头泄露漏洞
信息暴露
needle 是 一款流式传输的HTTP客户端 needle 没有对重定向后的请求头做过滤处理,会把第一次请求的 Authorization 请求头也传递到重定向后的服务,导致 Authorization 请求头泄露。 攻击者可利用该漏洞被动窃取用户的 Authorization 数据。
MPS-2022-7866
2022-08-08 20:39
node-tar 路径遍历漏洞
路径遍历
node-tar是一款用于文件压缩/解压缩的软件包。 npm node-tar 存在路径遍历漏洞,该漏洞源于4.4.18、5.0.10和6.1.9之前的npm包“tar”(又名node-tar)存在任意文件创建覆盖和任意代码执行漏洞。攻击者可利用该漏洞访问受限目录之外的位置。
CVE-2021-37713 MPS-2021-28489
2022-08-08 20:39
github ws 资源管理错误漏洞
github ws是一个应用软件。一种易于使用,运行迅速且经过全面测试的WebSocket客户端和服务器实现的方法。 漏洞版本中“Sec-Websocket-Protocol”标头的一个特殊的值可以用来显著降低ws服务器的速度,从而导致拒绝服务漏洞。
CVE-2021-32640 MPS-2021-7109
2022-08-08 20:39
Moment.js 正则拒绝服务漏洞
拒绝服务
Moment.js 是一个 JavaScript 日期库。用于解析、验证、操作和格式化日期。 Moment.js 在处理嵌套 rfc2822 注释内容时正则表达式执行时间不断的指数增大,导致服务不可用。 攻击者可利用该漏洞使目标服务停止响应甚至崩溃。
CVE-2022-31129 MPS-2022-11159
2022-08-08 20:39
mquery 存在原型污染漏洞
原型污染
mquery 是一个为 MongoDB 构建的表达性查询 此软件包的受影响版本容易通过 mergeClone() 函数受到原型污染。
MPS-2022-13896
2022-08-08 20:39
tar 存在拒绝服务漏洞
拒绝服务
tar 是用于 Node.js 的全功能 Tar。此软件包的受影响版本容易受到正则表达式拒绝服务 (ReDoS) 的攻击。
MPS-2022-14081
2022-08-08 20:39
kind-of注入漏洞
将资源暴露给错误范围
kind-of是一款JavaScript类型检查软件包。 kind-of v6.0.2版本中的index.js文件的‘ctorName’函数存在注入漏洞,攻击者可利用该漏洞覆盖内部属性,操纵类型检查的结果。
CVE-2019-20149 MPS-2019-17164
2022-08-08 20:39
minimist 输入验证错误漏洞
原型污染
minimist是一款命令行参数解析工具。 minimist 1.2.2之前版本存在输入验证错误漏洞。攻击者可借助‘constructor’和‘__proto__’ payload利用该漏洞添加或修改Object.prototype的属性。
CVE-2020-7598 MPS-2020-3516
2022-08-08 20:39
Npm Node-tar 后置链接漏洞
node-tar是一款用于文件压缩/解压缩的软件包。 Npm Node-tar 中存在后置链接漏洞,该漏洞源于产品未对特殊字符做有效验证。攻击者可通过该漏洞在其他路径创建恶意文件。
CVE-2021-37712 MPS-2021-28488
2022-08-08 20:39
lodash 存在拒绝服务漏洞
拒绝服务
lodash 是一个现代 JavaScript 实用程序库,提供模块化、性能和附加功能。由于对 CVE-2020-8203 的修复不完整,此软件包的受影响版本容易受到 zipObjectDeep 中的原型污染。
MPS-2022-13841
2022-08-08 20:39
requests 代码注入漏洞
代码注入
Dan DeFelippi node-XMLHttpRequest是 (Dan DeFelippi)开源的一个应用软件。用于模拟浏览器XMLHttpRequest对象。 node-XMLHttpRequest before 1.7.0 存在代码注入漏洞,攻击者可利用该漏洞导致任意代码注入并运行。
CVE-2020-28502 MPS-2021-2418
2022-08-08 20:39
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部