├── .npmrc
├── src
├── routes
│ ├── __layout.svelte
│ ├── sign-in.svelte
│ └── index.svelte
├── global.d.ts
├── app.css
├── app.html
└── lib
│ └── db.ts
├── static
├── robots.txt
└── favicon.ico
├── .gitignore
├── .env.example
├── package.json
├── svelte.config.js
├── tsconfig.json
├── README.md
└── .gitpod.yml
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /.svelte
4 | /.svelte-kit
5 | /build
6 | /functions
7 | .env
8 |
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/supabase-community/supabase-sveltekit-example/HEAD/static/favicon.ico
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 | ///
4 |
--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
3 | 'Open Sans', 'Helvetica Neue', sans-serif;
4 | }
5 |
--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | VITE_SUPABASE_URL=your-supabase-url
2 | VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
3 | SUPABASE_PRIVATE_KEY=your-supabase-private-key
4 | SUPABASE_JWT_SECRET=your-supabase-jwt-secret
5 |
--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %svelte.head%
8 |
9 |
10 | %svelte.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/routes/sign-in.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
11 |
12 |
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sveltekit-example",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "dev": "svelte-kit dev",
6 | "build": "svelte-kit build",
7 | "start": "svelte-kit start"
8 | },
9 | "devDependencies": {
10 | "@supabase/supabase-js": "^1.24.0",
11 | "@sveltejs/adapter-node": "next",
12 | "@sveltejs/kit": "next",
13 | "supabase-ui-svelte": "^0.1.1",
14 | "svelte": "^3.34.0",
15 | "svelte-preprocess": "^4.0.0",
16 | "tslib": "^2.0.0",
17 | "typescript": "^4.0.0"
18 | },
19 | "type": "module"
20 | }
21 |
--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
18 |
19 |
20 | There are {products.length} products.
21 |
22 | {#if $user}
23 | You are signed in as {$user.email}
24 |
25 | {:else}
26 |
29 | {/if}
30 |
31 |
--------------------------------------------------------------------------------
/src/lib/db.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@supabase/supabase-js'
2 | import { readable } from 'svelte/store'
3 |
4 | export const supabase = createClient(
5 | import.meta.env.VITE_SUPABASE_URL,
6 | import.meta.env.VITE_SUPABASE_ANON_KEY
7 | )
8 |
9 | export const user = readable(supabase.auth.user(), set => {
10 | supabase.auth.onAuthStateChange((event, session) => {
11 | if (event == 'SIGNED_OUT') {
12 | set(null)
13 | }
14 | })
15 | })
16 |
17 | export const auth = supabase.auth
18 |
19 | // TODO: add your queries/inserts/updates/deletes here
20 | export const products = {
21 | async all() {
22 | const { data } = await supabase
23 | .from('products')
24 | .select('*')
25 |
26 | return data
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import sveltePreprocess from 'svelte-preprocess';
2 | import node from '@sveltejs/adapter-node';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | export default {
6 | // Consult https://github.com/sveltejs/svelte-preprocess
7 | // for more information about preprocessors
8 | preprocess: sveltePreprocess(),
9 | kit: {
10 | // By default, `npm run build` will create a standard Node app.
11 | // You can create optimized builds for different platforms by
12 | // specifying a different adapter
13 | adapter: node(),
14 |
15 | // hydrate the element in src/app.html
16 | target: '#svelte',
17 |
18 | vite: {
19 | server: {
20 | hmr: {
21 | clientPort: process.env.HMR_HOST ? 443 : 24678,
22 | host: process.env.HMR_HOST ? process.env.HMR_HOST.substring("https://".length) : "localhost"
23 | }
24 | }
25 | }
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "node",
4 | "module": "es2020",
5 | "lib": ["es2020"],
6 | "target": "es2019",
7 | /**
8 | svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
9 | to enforce using \`import type\` instead of \`import\` for Types.
10 | */
11 | "importsNotUsedAsValues": "error",
12 | "isolatedModules": true,
13 | "resolveJsonModule": true,
14 | /**
15 | To have warnings/errors of the Svelte compiler at the correct position,
16 | enable source maps by default.
17 | */
18 | "sourceMap": true,
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | "forceConsistentCasingInFileNames": true,
22 | "baseUrl": ".",
23 | "allowJs": true,
24 | "checkJs": true,
25 | "paths": {
26 | "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
27 | "$service-worker": [".svelte/build/runtime/service-worker"],
28 | "$lib/*": ["src/lib/*"]
29 | }
30 | },
31 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
32 | }
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # sveltekit + supabase + gitpod
2 |
3 | A [svelte-kit](https://kit.svelte.dev) project, with [supabase](https://supabase.io) and [gitpod](https://gitpod.io) configured.
4 |
5 | ## GitPod
6 |
7 | Open with GitPod: https://gitpod.io/#https://github.com/joshnuss/supabase-sveltekit-example
8 |
9 | ## Running locally
10 |
11 | Configure the database settings in the `.env` file:
12 |
13 | ```bash
14 | # copy example template
15 | cp .env.example .env
16 | ```
17 |
18 | The values can be found in your [supabase](https://app.supabase.io) account, in the Settings / API page.
19 |
20 | ## Developing
21 |
22 | Once you've installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
23 |
24 | ```bash
25 | npm run dev
26 |
27 | # or start the server and open the app in a new browser tab
28 | npm run dev -- --open
29 | ```
30 |
31 | ## Building
32 |
33 | Svelte apps are built with _adapters_, which optimise your project for deployment to different environments.
34 |
35 | By default, `npm run build` will generate a Node app that you can run with `node build`. To use a different adapter, add it to the `devDependencies` in `package.json` making sure to specify the version as `next` and update your `svelte.config.cjs` to [specify your chosen adapter](https://kit.svelte.dev/docs#configuration-adapter). The following official adapters are available:
36 |
37 | - [@sveltejs/adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node)
38 | - [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)
39 | - [@sveltejs/adapter-netlify](https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify)
40 | - [@sveltejs/adapter-vercel](https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel)
41 | - ...more soon
42 |
43 | [See the adapter documentation for more detail](https://kit.svelte.dev/docs#adapters)
44 |
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | #
2 | # Learn more about this Gitpod configuration file in the documentation at https://www.gitpod.io/docs/configuration
3 | #
4 | ports:
5 | - port: 3000
6 | onOpen: open-preview
7 |
8 | # List the start up tasks. You can start them in parallel in multiple terminals. See https://www.gitpod.io/docs/config-start-tasks
9 | tasks:
10 | - init: npm install
11 | command: |
12 | (
13 | RED='\033[0;31m'
14 | BOLD='\033[1;30m'
15 | NC='\033[0m' # No Color
16 |
17 | gp env | grep --quiet VITE_SUPABASE_URL
18 | if [ $? -eq 1 ]
19 | then
20 | printf "${RED}Missing environment variables for supabase.${NC}\n\n"
21 | printf "To configure them:\n\n1. run: ${BOLD}gp env -e VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key${NC}\n2. stop and re-start your workspace\n"
22 | else
23 | export HMR_HOST=`gp url 3000`
24 | npm run dev
25 | fi
26 | )
27 |
28 | github:
29 | prebuilds:
30 | # enable for the master/default branch (defaults to true)
31 | master: true
32 | # enable for all branches in this repo (defaults to false)
33 | branches: true
34 | # enable for pull requests coming from this repo (defaults to true)
35 | pullRequests: true
36 | # enable for pull requests coming from forks (defaults to false)
37 | pullRequestsFromForks: true
38 | # add a check to pull requests (defaults to true)
39 | addCheck: true
40 | # add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
41 | addComment: false
42 | # add a "Review in Gitpod" button to the pull request's description (defaults to false)
43 | addBadge: true
44 | # add a label once the prebuild is ready to pull requests (defaults to false)
45 | addLabel: false
46 |
47 | vscode:
48 | extensions:
49 | - svelte.svelte-vscode
50 |
--------------------------------------------------------------------------------