snaplet / supabase-snaplet-starter

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Next.js 13 and app template Router-ready Supabase starter kit.

This starter is a clone of NextJS and Supabase starter, showing how you can use Snaplet to seed your Supabase local development stack.

Features · Deploy to Vercel · Clone and run locally · How to use / Docs · Feedback and issues


Features

Including all the features from the original starter:

  • Use the generate command to create 20 todo items.
  • A base config for transformations (excluding storage & supabase_functions schemas)

Deploy to Vercel

Vercel deployment will guide you through creating a Supabase account and project.

After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.

Deploy with Vercel

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

If you wish to just develop locally and not deploy to Vercel, follow the steps below.

Clone and run locally

  1. You'll first need a Supabase project which can be made via the Supabase dashboard

  2. Create a Next.js app using the Supabase Starter template npx command

    npx create-next-app -e with-supabase
  3. Use cd to change into the app's directory

    cd name-of-new-app
  4. Link your project

    supabase link --project-ref= # Project Settings > Reference ID
  5. Start your local stack

    supabase start
  6. Check out this guide we wrote on how to clone the start and get a Snaplet config inside your project.

  7. Rename .env.local.example to .env.local and update the following:

    NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
    NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
    

    Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings

  8. Run the app.

    npm run dev
    

How to use

This is the project used in our Generate data for your Supabase local development stack guide.

  • Navigate to the root path (/) and log in.
  • Once you have completed the guide you can view the generated todos at the /todos path.

Feedback and issues

Please file feedback and issues over on our discord

About


Languages

Language:TypeScript 96.1%Language:CSS 2.0%Language:JavaScript 1.9%