Deno SaaSKit is an open-sourced, highly performant template for building your SaaS quickly and easily.
Note: this project is in beta. Design, workflows, and user accounts are subject to change.
- No build step
- Deno's built-in formatter, linter and test runner and TypeScript support.
- Database management and user authentication with Deno KV, which provides zero config durable data storage. Prefer using Supabase for data storage? Check out this version of SaaSKit.
- Billing management with Stripe.
- Fresh as the web framework and Tailwind CSS as the CSS framework.
Before starting, you'll need:
To get started:
- Clone this repo:
git clone https://github.com/denoland/saaskit.git cd saaskit - Create a new
.envfile. - Navigate to GitHub's New OAuth Application page.
- Set Application name to your desired application name. E.g.
ACME, Inc. - Set Homepage URL to
http://localhost:8000. - Set Authorization callback URL to
http://localhost:8000/callback. - Click Register application.
- Copy the Client ID value to the
.envfile:GITHUB_CLIENT_ID=<GitHub OAuth application client ID> - On the same web page, click Generate a new client secret.
- Copy the Client secret value to the
.envfile on a new line:GITHUB_CLIENT_SECRET=<GitHub OAuth application client secret> - Start the server:
deno task start
- Navigate to
http://localhost:8000to start playing with your new SaaS app.
This guide will enable test Stripe payments, the pricing page, and "Premium user" functionality.
Before starting, you'll need:
- A Stripe account
- The Stripe CLI installed and signed-in on your machine
To get started:
- Navigate to the API keys page on the Developers dashboard.
- In the Standard keys section, click Reveal test key on the Secret key table row.
- Click to copy the value and paste to the
.envfile:STRIPE_SECRET_KEY=<Stripe secret key> - Run the Stripe initialization script:
deno task init:stripe
- Copy the Stripe "Premium Plan" price ID to the
.envfile:STRIPE_PREMIUM_PLAN_PRICE_ID=<Stripe "Premium Plan" price ID> - Begin
listening locally to Stripe events:
stripe listen --forward-to localhost:8000/api/stripe-webhooks --events=customer.subscription.created,customer.subscription.deleted - Copy the webhook signing secret to the
.envfile:STRIPE_WEBHOOK_SECRET=<Stripe webhook signing secret> - Start the server:
deno task start
- Navigate to
http://localhost:8000to start playing with your new SaaS app with Stripe enabled.
Note: You can use Stripe's test credit cards to make test payments while in Stripe's test mode.
Use the following commands to work with your local Deno KV database:
deno task db:seed- Populate the database with data from the Hacker News API.deno task db:dump- Print all database values.deno task db:reset- Reset the database. This is not recoverable.
The utils/constants.ts file includes global values used across various aspects of the codebase. Update these values according to your needs.
To create a new blog post, create a Markdown (.md) file within
/data/posts/ with the filename as the slug. E.g.
/data/posts/hello-there.md file will correspond to the /blog/hello-there
route. See /data/posts/ for examples.
Post properties are to be added to the starting Front Matter section of the
Markdown file. See the Post interface in /utils/posts.ts
for a full list of properties and their types.
You can customize theme options such as spacing, color, etc. By default, Deno
SaaSKit comes with primary and secondary colors predefined within
twind.config.ts. Change these values to match your desired color scheme.
This section assumes that a local development environment has been set up.
- Change your OAuth app settings to the following:
Homepage URL=https://{{ YOUR DOMAIN }}Authorization callback URL=http://{{ YOUR DOMAIN }}/callback
In order to use Stripe in production, you'll have to activate your Stripe account.
Once your Stripe account is activated, simply grab the production version of the
Stripe Secret Key. Th
8776
at will be the value of STRIPE_SECRET_KEY in prod.
Keep your user's customer information up-to-date with billing changes by registering a webhook endpoint in Stripe.
- Endpoint URL:
https://{{ YOUR DOMAIN }}/api/stripe-webhooks - Listen to
Events on your account - Select
customer.subscription.createdandcustomer.subscription.deleted
STRIPE_SECRET_KEY: Dashboard Home (Right Side of Page) -> Secret Key (only revealed once)STRIPE_WEBHOOK_SECRET: Dashboard Home -> Developers (right side of page) -> Create webhook -> Click Add Endpoint- After Creation, redirected to new webhook page -> Signing Secret -> Reveal
STRIPE_PREMIUM_PLAN_PRICE_ID: Dashboard -> Products -> Premium Tier -> Pricing/API ID
Set up your branding on Stripe, as the user will be taken to Stripe's checkout page when they upgrade to a subscription.
Deploy your SaaS app close to your users at the edge with Deno Deploy:
- Clone this repository for your SaaSKit project.
- Sign into Deno Deploy with your GitHub account.
- Select your GitHub organization or user, repository, and branch.
- Select "Automatic" deployment mode and
main.tsas the entry point. - Click "Link", which will start the deployment.
- Once the deployment is complete, click on "Settings" and add the production environmental variables, then hit "Save".
You should now be able to visit your newly deployed SaaS.
Docker makes it easy to deploy and run your Deno app to any virtual private server (VPS). This section will show you how to do that with AWS Lightsail and Digital Ocean.
-
Install Docker on your machine, which should also install the
dockerCLI. -
Create an account on Docker Hub, a registry for Docker container images.
Note: the
Dockerfile,.dockerignoreanddocker-compose.ymlfiles come included with this repo.
The values of the environmental variables are pulled from the .env file.
The DENO_DEPLOYMENT_ID variable is needed for Docker deployment of a Deno
Fresh app for caching to work properly. Its value needs to be a unique id tied
to the deployment. We recommend using the SHA1 commit hash, which can be
obtained from the following command run in the repo's root folder:
# get the SHA1 commit hash of the current branch
git rev-parse HEADRefer to these guides for using Docker to deploy Deno to specific platforms:
For the user, the website should be fast, secure and have a design with clear intent. Additionally, the HTML should be well-structured and indexable by search engines. The defining metrics for these goals are:
- A perfect PageSpeed Insights score.
- Fully valid HTML, as measured by W3C's Markup Validation Service.
For the developer, the codebase should minimize the steps and amount of time required to get up and running. From there, customization and extension of the web app should be simple. The characteristics of a well-written codebase also apply, such as:
- Easy to understand
- Modular functionality
- Clearly defined behavior with validation through tests
Join
the #saaskit channel in Deno's Discord
to meet other SaaSKit developers, ask questions, and get unblocked.
Here's a list of articles, how to guides, and videos about SaaSKit: