Skip to content
forked from denoland/saaskit

Realtime AI SaaS project starter kit. AI chat, light/dark/system theming, command prompt, SSO, and Stripe subscriptions.

License

Notifications You must be signed in to change notification settings

CHaaSKit/chaadkit

 
 

Repository files navigation

CHaaDKit: A SaaSKit for realtime AI chat apps with Deno and Cloudflare.

Warning

this project is in ALPHA. Everything is broken and everything might change!

An open-sourced and highly performant template for building your CHaaS (Chat As A Service) quickly and easily.

Built with the Deno Standard Library

Forked from: Deno SaaSKit

Features

  • Deno's built-in formatter, linter and test runner and TypeScript support
  • Next-gen web framework with Fresh
  • In-built data persistence with Deno KV
  • High-level OAuth with Deno KV OAuth
  • Modern CSS framework with Tailwind CSS
  • Responsive, SaaS-oriented design
  • Dashboard with users view and statistics chart
  • Stripe integration (optional)
  • First-class web performance
  • REST API
  • Blog with RSS feed and social sharing icons
  • HTTP security headers

Get Started

Get Started Locally

Before starting, you'll need:

  • A GitHub account
  • The Deno CLI and Git installed on your machine

To get started:

  1. Clone this repo:
    git clone https://github.com/chaaskit/chaadkit.git
    cd chaadkit
  2. Create a new .env file.
  3. Navigate to GitHub's New OAuth Application page.
  4. Set Application name to your desired application name. E.g. ACME, Inc.
  5. Set Homepage URL to http://localhost:8000.
  6. Set Authorization callback URL to http://localhost:8000/callback.
  7. Click Register application.
  8. Copy the Client ID value to the .env file:
    GITHUB_CLIENT_ID=<GitHub OAuth application client ID>
  9. On the same web page, click Generate a new client secret.
  10. Copy the Client secret value to the .env file on a new line:
    GITHUB_CLIENT_SECRET=<GitHub OAuth application client secret>
  11. Start the server:
    deno task start
  12. Navigate to http://localhost:8000 to start playing with your new SaaS app.

Set Up Stripe (Optional)

This guide will enable test Stripe payments, the pricing page, and "Premium user" functionality.

Before starting, you'll need:

To get started:

  1. Navigate to the API keys page on the Developers dashboard.
  2. In the Standard keys section, click Reveal test key on the Secret key table row.
  3. Click to copy the value and paste to the .env file:
    STRIPE_SECRET_KEY=<Stripe secret key>
  4. Run the Stripe initialization script:
    deno task init:stripe
  5. Copy the Stripe "Premium Plan" price ID to the .env file:
    STRIPE_PREMIUM_PLAN_PRICE_ID=<Stripe "Premium Plan" price ID>
  6. Begin listening locally to Stripe events:
    stripe listen --forward-to localhost:8000/api/stripe-webhooks --events=customer.subscription.created,customer.subscription.deleted
  7. Copy the webhook signing secret to the .env file:
    STRIPE_WEBHOOK_SECRET=<Stripe webhook signing secret>
  8. Start the server:
    deno task start
  9. Navigate to http://localhost:8000 to 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.

Bootstrap the Database (Optional)

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 > backup.json - Write all database entries to backup.json.
  • deno task db:restore backup.json - Restore the database from backup.json.
  • deno task db:reset - Reset the database. This is not recoverable.

Customize and Extend

Global Constants

The utils/constants.ts file includes global values used across various aspects of the codebase. Update these values according to your needs.

Create a Blog Post

  1. Create a .md file in the /posts with the filename as the slug of the blog post URL. E.g. a file with path /posts/hello-there.md will have path /blog/hello-there.

  2. Write the Front Matter then Markdown text to define the properties and content of the blog post.

    ---
    title: This is my first blog post!
    publishedAt: 2022-11-04T15:00:00.000Z
    summary: This is an excerpt of my first blog post.
    ---
    
    # Heading 1
    
    Hello, world!
    
    ```javascript
    console.log("Hello World");
    ```
  3. Start the server:

    deno task start
  4. Navigate to the URL of the newly created blog post. E.g. http://localhost:8000/blog/hello-there.

See other examples of blog post files in /posts.

Themes

You can customize theme options such as spacing, color, etc. By default, CHaaSKit comes with primary and secondary colors predefined within tailwind.config.ts. Change these values to match your desired color scheme.

Cover Image

To replace the cover image, replace the /static/cover.png file. If you'd like to change the filename, also be sure to change the imageUrl property in the <Head /> component.

Deploy to Production

This section assumes that a local development environment is already set up.

  1. Navigate to your GitHub OAuth application settings page.
  2. Set the Homepage URL to your production URL. E.g. https://hunt.deno.land.
  3. Set the Authorization callback URL to your production URL with the /callback path. E.g. https://hunt.deno.land/callback.
  4. Copy all the environment variables in your .env file to your production environment.

Deploy to Deno Deploy

  1. Clone this repository for your project.
  2. Update your .github/workflows/deploy.yml file as needed. Hints are in the file.
  3. Sign into Deno Deploy with your GitHub account.
  4. Click + New Project.
  5. Select your GitHub organization or user, repository, and branch.
  6. Click Edit mode and select Build step with GitHub Actions as the build mode and main.ts as the entry point.
  7. Click Add Build Step and wait until the GitHub Actions Workflow is complete.
  8. 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 website.

Deploy to any VPS with Docker

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.

  1. Install Docker on your machine, which should also install the docker CLI.
  2. Create an account on Docker Hub, a registry for Docker container images.

Note: the Dockerfile, .dockerignore and docker-compose.yml files come included with this repo.

  1. Grab the SHA1 commit hash by running the following command in the repo's root folder:
# get the SHA1 commit hash of the current branch
git rev-parse HEAD
  1. Copy the output of the above and paste it as DENO_DEPLOYMENT_ID in your .env file. This value is needed to enable caching on Fresh in a Docker deployment.

  2. Finally, refer to these guides for using Docker to deploy Deno to specific platforms:

Set Up Stripe for Production (Optional)

  1. Activate your Stripe account.
  2. Navigate to the API keys page on the Developers dashboard.
  3. In the Standard keys section, click Reveal test key on the Secret key table row.
  4. Click to copy the value and paste to your STRIPE_SECRET_KEY environment variable in your production environment.
    STRIPE_SECRET_KEY=<Stripe secret key>
  5. Navigate to the Webhooks page to register your webhook endpoint.
  6. Click Add endpoint.
  7. Set Endpoint URL to your production URL with the /api/stripe-webhooks path. E.g. https://hunt.deno.land/api/stripe-webhooks.
  8. Set Listen to to Events on your account.
  9. Set customer.subscription.created and customer.subscription.deleted as events to listen to.
  10. Click Add endpoint.
  11. Optionally, set up your Stripe branding to customize the look and feel of your Stripe checkout page.

Google Analytics (Optional)

Set GA4_MEASUREMENT_ID in your production environment to enable Google Analytics.

Note: it is not recommended to set this locally, otherwise your tests and debugging requests will be logged.

About

Realtime AI SaaS project starter kit. AI chat, light/dark/system theming, command prompt, SSO, and Stripe subscriptions.

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.1%
  • Other 0.9%