Supabase

When your project is up and running, click Open in Supabase button, go to the Table Editor, create a new table and insert some data.

Alternatively, you can run the following snippet in your project's SQL Editor. This will create a countries table with some sample data.

1
-- Create the table
2
create table notes (
3
  id bigint primary key generated always as identity,
4
  title text not null
5
);
6

7
-- Insert some sample data into the table
8
insert into notes (title)
9
values
10
  ('Today I created a Supabase project.'),
11
  ('I added some data and queried it from Next.js.'),
12
  ('It was awesome!');
13

14
alter table notes enable row level security;

Make the data in your table publicly readable by adding an RLS policy:

1
create policy "public can read notes"
2
on public.notes
3
for select to anon
4
using (true);

Use the create-next-app command and the with-supabase template, to create a Next.js app pre-configured with:

• Cookie-based Auth
• TypeScript
• Tailwind CSS

Start by connecting to your existing project and then run vercel link in the CLI to link to the project locally.

Run vercel env pull .env.development.local to make the latest environment variables available to your project locally.

Create a new file at app/notes/page.tsx and populate with the following.

1
import { createClient } from '@/utils/supabase/server';
2

3
export default async function Notes() {
4
  const supabase = await createClient();
5
  const { data: notes } = await supabase.from("notes").select();
6

7
  return <pre>{JSON.stringify(notes, null, 2)}</pre>
8
}

This will select all the rows from the notes table in Supabase and render them on the page.

Run the development server with npm run dev, go to http://localhost:3000/notes in a browser and you should see the list of notes.

When your project is up and running, click Open in Supabase button, go to the Table Editor, create a new table and insert some data.

Alternatively, you can run the following snippet in your project's SQL Editor. This will create a countries table with some sample data.

1
-- Create the table
2
create table countries (
3
  id bigint primary key generated always as identity,
4
  name text not null
5
);
6
-- Insert some sample data into the table
7
insert into countries (name)
8
values
9
  ('Canada'),
10
  ('United States'),
11
  ('Mexico');
12

13
alter table countries enable row level security;

Make the data in your table publicly readable by adding an RLS policy:

1
create policy "public can read countries"
2
on public.countries
3
for select to anon
4
using (true);

Create a SvelteKit app using the npm create command.

1
npx sv create myapp

The fastest way to get started is to use the supabase-js client library which provides a convenient interface for working with Supabase from a SvelteKit app.

Navigate to the SvelteKit app and install supabase-js.

1
cd myapp && npm install @supabase/supabase-js

Start by connecting to your existing project and then run npx vercel link in the CLI to link to the project locally.

Run npx vercel env pull .env.development.local to make the latest environment variables available to your project locally.

Create a src/lib directory in your SvelteKit app, create a file called supabaseClient.js and add the following code to initialize the Supabase client with your project URL and public API (anon) key:

1
import { createClient } from '@supabase/supabase-js'
2
import { SUPABASE_ANON_KEY, SUPABASE_URL } from '$env/static/private'
3

4
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

Use load method to fetch the data server-side and display the query results as a simple list.

Create +page.server.js file in the src/routes directory with the following code.

1
import { supabase } from "$lib/supabaseClient";
2

3
export async function load() {
4
  const { data } = await supabase.from("countries").select();
5
  return {
6
    countries: data ?? [],
7
  };
8
}

Replace the existing content in your +page.svelte file in the src/routes directory with the following code.

1
<script>
2
  let { data } = $props();
3
</script>
4

5
<ul>
6
  {#each data.countries as country}
7
    <li>{country.name}</li>
8
  {/each}
9
</ul>

Run the development server with npm run dev, go to http://localhost:5173 in a browser and you should see the list of countries.