Svelte Starter Kit is an opinionated boilerplate based off of SvelteKit, with all the bells and whistles you want ready, up and running when starting any Full-stack Svelte/Javascript project. Out of the box you get all the essentials
with Supabase as the 3rd Party Persistence Layer for
/profile
as an example for Supabase PostgREST (CRUD API)and a huge bunch of pre-made, hand-rolled(easily replace-able) components, that you almost always end up installing/using for any non-trivial project
success,
erroror
default` is supportedNote: Refer the basic branch for a bare minimum starter structure with all the essentials
If new to Supabase
Once done, or if you already have a Supabase project
https://app.supabase.io/project/<your-awesome-svelte-project>/api/default?page=auth
.env
/.env.local
as VITE_SUPABASE_URL
and VITE_SUPABASE_ANON_KEY
Svelte Start Kit supports profile and user avatars now. To get the profile table and storage ready, execute the following query at https://app.supabase.io/project/<your-awesome-svelte-project>/editor/sql
-- Create a table for Public Profiles
create table profiles (
id uuid references auth.users not null,
username text unique,
avatar_url text,
website text,
updated_at timestamp with time zone,
primary key (id),
unique(username),
constraint username_length check (char_length(username) >= 3)
);
alter table profiles enable row level security;
create policy "Public profiles are viewable by everyone."
on profiles for select
using ( true );
create policy "Users can insert their own profile."
on profiles for insert
with check ( auth.uid() = id );
create policy "Users can update own profile."
on profiles for update
using ( auth.uid() = id );
-- Set up Storage!
insert into storage.buckets (id, name)
values ('avatars', 'avatars');
create policy "Avatar images are publicly accessible."
on storage.objects for select
using ( bucket_id = 'avatars' );
create policy "Anyone can upload an avatar."
on storage.objects for insert
with check ( bucket_id = 'avatars' );
profiles
table's chnages are not observed in real-time due to performance reasons. If needed, execute the following query
begin;
drop publication if exists supabase_realtime;
create publication supabase_realtime;
commit;
alter publication supabase_realtime add table profiles;
and get started by running yarn dev
Landing from a different Full-stack UI framework(Next.js, NuxtJS, Angular Universal)? Here's few essential watches and readings -
Svelte Kit apps are built with adapters, which optimise your project for deployment to different environments.
By default, yarn 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: