Skip to content

Commit 416f57e

Browse files
author
Andrew Smith
authored
Merge pull request supabase#11879 from supabase/chore/quickstart-sveltekit
Add quickstart for SvelteKit
2 parents 64060c7 + 8725ec8 commit 416f57e

File tree

3 files changed

+173
-1
lines changed

3 files changed

+173
-1
lines changed

‎apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export const gettingstarted = {
4848
{ name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] },
4949
{ name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs', items: [] },
5050
{ name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter', items: [] },
51+
{ name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit', items: [] },
5152
],
5253
},
5354
{

‎apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import Layout from '~/layouts/DefaultGuideLayout'
2+
import StepHikeCompact from '~/components/StepHikeCompact'
3+
4+
export const meta = {
5+
title: 'Use Supabase with SvelteKit',
6+
subtitle:
7+
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.',
8+
breadcrumb: 'Framework Quickstarts',
9+
}
10+
11+
<StepHikeCompact>
12+
13+
<StepHikeCompact.Step step={1}>
14+
<StepHikeCompact.Details title="Set up a Supabase project with sample data">
15+
16+
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
17+
18+
After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.
19+
20+
</StepHikeCompact.Details>
21+
22+
<StepHikeCompact.Code>
23+
24+
```sql SQL_EDITOR
25+
-- Create the table
26+
CREATE TABLE countries (
27+
id SERIAL PRIMARY KEY,
28+
name VARCHAR(255) NOT NULL
29+
);
30+
-- Insert some sample data into the table
31+
INSERT INTO countries (name) VALUES ('United States');
32+
INSERT INTO countries (name) VALUES ('Canada');
33+
INSERT INTO countries (name) VALUES ('Mexico');
34+
````
35+
36+
</StepHikeCompact.Code>
37+
38+
</StepHikeCompact.Step>
39+
40+
<StepHikeCompact.Step step={2}>
41+
42+
<StepHikeCompact.Details title="Create a SvelteKit app">
43+
44+
Create a SvelteKit app using the `npm create` command.
45+
46+
</StepHikeCompact.Details>
47+
48+
<StepHikeCompact.Code>
49+
50+
```bash Terminal
51+
npm create svelte@latest myapp
52+
```
53+
54+
</StepHikeCompact.Code>
55+
56+
</StepHikeCompact.Step>
57+
58+
<StepHikeCompact.Step step={3}>
59+
<StepHikeCompact.Details title="Install the Supabase client library">
60+
61+
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.
62+
63+
Navigate to the SvelteKit app and install `supabase-js`.
64+
65+
</StepHikeCompact.Details>
66+
67+
<StepHikeCompact.Code>
68+
69+
```bash Terminal
70+
cd my-app && npm install @supabase/supabase-js
71+
```
72+
73+
</StepHikeCompact.Code>
74+
75+
</StepHikeCompact.Step>
76+
77+
<StepHikeCompact.Step step={4}>
78+
<StepHikeCompact.Details title="Create the Supabase client">
79+
80+
Create a `/src/lib` directory of 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](https://app.supabase.com/project/_/settings/api).
81+
82+
</StepHikeCompact.Details>
83+
84+
<StepHikeCompact.Code>
85+
86+
```js src/lib/supabaseClient.js
87+
import { createClient } from '@supabase/supabase-js'
88+
89+
export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
90+
```
91+
92+
</StepHikeCompact.Code>
93+
94+
</StepHikeCompact.Step>
95+
96+
<StepHikeCompact.Step step={5}>
97+
<StepHikeCompact.Details title="Query data from the app">
98+
99+
Use `load` method to fetch the data server-side and display the query results as a simple list.
100+
101+
Create `+page.server.js` file in the `routes` directory with the following code.
102+
103+
</StepHikeCompact.Details>
104+
<StepHikeCompact.Code>
105+
106+
107+
```js src/routes/+page.server.js
108+
import { supabase } from "$lib/supabaseClient";
109+
110+
export async function load() {
111+
const { data } = await supabase.from("countries").select();
112+
return {
113+
countries: data ?? [],
114+
};
115+
}
116+
```
117+
118+
</StepHikeCompact.Code>
119+
120+
<StepHikeCompact.Details title="">
121+
122+
Replace the existing content in your `+page.svelte` file in the `routes` directory with the following code.
123+
124+
</StepHikeCompact.Details>
125+
<StepHikeCompact.Code>
126+
127+
128+
```svelte src/routes/+page.svelte
129+
<script>
130+
export let data;
131+
let { countries } = data;
132+
$: ({ countries } = data);
133+
</script>
134+
135+
<ul>
136+
{#each countries as country}
137+
<li>{country.name}</li>
138+
{/each}
139+
</ul>
140+
```
141+
142+
</StepHikeCompact.Code>
143+
144+
</StepHikeCompact.Step>
145+
146+
<StepHikeCompact.Step step={6}>
147+
<StepHikeCompact.Details title="Start the app">
148+
149+
Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should see the list of countries.
150+
151+
</StepHikeCompact.Details>
152+
153+
<StepHikeCompact.Code>
154+
155+
```bash Terminal
156+
npm run dev
157+
```
158+
159+
</StepHikeCompact.Code>
160+
161+
</StepHikeCompact.Step>
162+
</StepHikeCompact>
163+
164+
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
165+
166+
export default Page

‎apps/docs/pages/index.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const meta = {
6161
<div className="hidden">
6262
<Button size="small">Get started</Button>
6363
</div>
64-
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6">
64+
<div className="grid grid-cols-1 md:grid-cols-4 gap-3 md:gap-6">
6565
<Link href={`/guides/getting-started/quickstarts/reactjs`} passHref>
6666
<a className="no-underline">
6767
<IconPanel title="ReactJS" icon="/docs/img/icons/react-icon" />
@@ -77,6 +77,11 @@ export const meta = {
7777
<IconPanel title="Flutter" icon="/docs/img/icons/flutter-icon" />
7878
</a>
7979
</Link>
80+
<Link href={`/guides/getting-started/quickstarts/sveltekit`} passHref>
81+
<a className="no-underline">
82+
<IconPanel title="SvelteKit" icon="/docs/img/icons/svelte-icon" />
83+
</a>
84+
</Link>
8085
</div>
8186
</div>
8287
</div>

0 commit comments

Comments
 (0)