Skip to content
/ supavlog Public template

SupaVlog - Open Source Vlog Application Template

Notifications You must be signed in to change notification settings

hookdeck/supavlog

Repository files navigation

SupaVlog - Vlog Application Starter Kit

Built with Supabase, Stream, Hookdeck, & Next.js.

Read the SupaVlog blog post for more details on the application event-driven architecture (systems, components, and component interactions).

Features

  • Authentication with Supabase
  • Video recording with Stream
  • Webhook event handling with Hookdeck
  • Stream video storage with Supabase
  • Built with Next.js

Limitations

  • A free Supabase plan has 1GB of storage and a maximum file size of 50MB. Videos > 50MB will fail to upload.

Demo

SupaVlog Screenshot

Running your own SupaVlog

To set up your own instance of SupaVlog you will need:

Supabase

Create a new Supabase project and up the Supabase CLI to use your project:

supabase link --project-ref {YOUR_PROJECT_ID}

Edge Functions

Set environmental variables for the Edge Functions:

supabase secrets set NEXT_PUBLIC_SUPABASE_URL={SUPABASE_URL}
supabase secrets set X_SUPABASE_API_SECRET={SUPABASE_SERVICE_SECRET}

Deploy your Edge Functions:

supabase functions deploy

Database

Create the schema by copying the contents of supabase/schema.sql and running it in the SQL editor for your Supabase project.

Authentication

Set the Site URL configuration for Supabase Authentication:

Supabase Authentication Site URL Configuration

Storage

Create a public storage bucket called videos.

Vercel

To deploy this Next.js application to Vercel you will need to populate the following environment variables:

# set to false if you do not wish to allow signup
NEXT_PUBLIC_SIGNUP_ENABLED=true

NEXT_PUBLIC_SUPABASE_URL={your Supabase project URL}
NEXT_PUBLIC_SUPABASE_ANON_KEY={your Supabase project Anon Key}

NEXT_PUBLIC_STREAM_API_KEY={your Stream project API key}
STREAM_API_SECRET={your Stream project API secret}

VIDEO_STORAGE_PLATFORM=supabase

You can either sync with your own repository or use the Deploy button below.

Deploy with Vercel

Hookdeck

Create two connections within Hookdeck, both using the same Source.

Hookdeck connections

Set authentication up on the Source, using HMAC, SHA-256, and hex. Enter X-SIGNATURE for the Header Key and use the Stream API secret as the Webhook Signing Secret.

Source Authentication Config

Set a filter on each connection.

For upload-video:

{
  "type": {
    "$eq": "call.recording_ready"
  }
}

Upload video filter

For upload-thumbnail:

{
  "type": {
    "$eq": "call.ended"
  }
}

Upload video filter

For each Destination within the Connection, ensure that you configure your Destinations to use Bearer Token auth using your live SUPABASE_ANON_KEYas the bearer token.

Destination auth configuration

Stream

Webhooks

Use the Hookdeck prod-stream-inbound Source URL as the Webhook URL in Stream:

Stream Webhook configuration

Call types

In the Stream dashboard, under Call Types, select the default call type.

Enable thumbnails:

Stream - Enable Thumbnails

Click Submit to save.

Clone and run locally

Supabase functions

To run locally you will need the Supabase CLI installed.

You can then run the functions using the environment variables defined in .env.local by running:

npm run supabase-functions

Hookdeck

Create two connections within Hookdeck, both using the same Source.

Hookdeck connections

Use the Source URL as the Webhook URL in Stream:

Stream Webhook configuration

For each Destination within the Connection, ensure that you configure your Destinations to use Bearer Token auth using your local SUPABASE_ANON_KEYas the bearer token.

Destination auth configuration

To set up the Hookdeck CLI to connect to Hookdeck and tunnel the events locally:

Feedback and issues

Please file feedback and issues over on the SupaVlog GitHub repo.

Useful resources

Attribution