supabase-community / supabase-sveltekit-example

sveltekit + supabase + gitpod

A svelte-kit project, with supabase and gitpod configured.

GitPod

Open with GitPod: https://gitpod.io/#https://github.com/joshnuss/supabase-sveltekit-example

Running locally

Configure the database settings in the .env file:

# copy example template
cp .env.example .env

The values can be found in your supabase account, in the Settings / API page.

Developing

Once you've installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

Svelte apps are built with adapters, which optimise your project for deployment to different environments.

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. The following official adapters are available:

• @sveltejs/adapter-node
• @sveltejs/adapter-static
• @sveltejs/adapter-netlify
• @sveltejs/adapter-vercel
• ...more soon

See the adapter documentation for more detail

supabase-sveltekit-example's Issues

Endless reloading (wss connection error)

sign in => sign up?

Hello again,
Using the example:

I removed the email for the screenshot, it's a working one. And the password is correct.
And I click Sign In of course :)

sign-in.svelte is:

<script lang="ts">
  import Auth from 'supabase-ui-svelte'
  import { supabase } from '$lib/db'
</script>

<div class="container">
  <h1>Sign in</h1>

  <Auth supabaseClient={supabase} providers={['google', 'twitter']}/>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
    width: 400px;
    margin: 0px auto;
  }
</style>

config.kit.target is no longer required, and should be removed

gitpod almost there, Cannot read property 'length' of null

Hey,
So now, it's running but I get:

500
Cannot read property 'length' of null

TypeError: Cannot read property 'length' of null
    at index.svelte:20:31
    at Object.$$render (/workspace/supabase-sveltekit-example/node_modules/svelte/internal/index.js:1380:22)
    at Object.default (root.svelte:38:46)
    at eval (/workspace/supabase-sveltekit-example/src/routes/__layout.svelte:11:41)
    at Object.$$render (/workspace/supabase-sveltekit-example/node_modules/svelte/internal/index.js:1380:22)
    at root.svelte:36:44
    at $$render (/workspace/supabase-sveltekit-example/node_modules/svelte/internal/index.js:1380:22)
    at Object.render (/workspace/supabase-sveltekit-example/node_modules/svelte/internal/index.js:1388:26)
    at render_response (file:///workspace/supabase-sveltekit-example/node_modules/@sveltejs/kit/dist/ssr.js:377:28)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

.env file is populated

gitpod issue

Hello,
I don't get how to test your project using gitpod. In the console, I get:

gitpod /workspace/supabase-sveltekit-example $ npm run dev

> [email protected] dev /workspace/supabase-sveltekit-example
> svelte-kit dev

svelte.config.cjs should be renamed to svelte.config.js and converted to an ES module. See https://kit.svelte.dev/docs#configuration for an example
No "exports" main defined in /workspace/supabase-sveltekit-example/node_modules/@sveltejs/adapter-node/package.json
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /workspace/supabase-sveltekit-example/node_modules/@sveltejs/adapter-node/package.json
    at throwExportsNotFound (internal/modules/esm/resolve.js:290:9)
    at packageExportsResolve (internal/modules/esm/resolve.js:479:7)
    at resolveExports (internal/modules/cjs/loader.js:432:36)
    at Function.Module._findPath (internal/modules/cjs/loader.js:472:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:867:27)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/workspace/supabase-sveltekit-example/svelte.config.cjs:2:14)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `svelte-kit dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/gitpod/.npm/_logs/2021-05-11T08_34_49_884Z-debug.log
gitpod /workspace/supabase-sveltekit-example $

I watched the gitpod.io video from sept 2020, but I don't have any preview window.
Sorry, but I'm new to gitpod :)