Svelte Starter Kit
Svelte Starter Kit
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
- Typescript as the language choice
- Tailwind CSS for quick styling without getting out of your HTML
- ESLint and Prettier for static code analysis and code formatting
- SEO pre-configured
with Supabase as the 3rd Party Persistence Layer for
- Authentication System with Supabase GoTrue
- User Profiles available on
/profileas an example for Supabase PostgREST (CRUD API) - User Avatar which is Supbase Storage(AWS S3 backed effortless uploads) supported
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
- Alert/Toast to notify your users of the outcome of an event -
success,errorordefault` is supported - Modal(with multiple Modal and Sidepanel support) as you always come back to `em
- Loaders(two types) for reporting the progress of an API call + a page load
- Popover for contextual menus
- Form Helpers for basic input types, validation and submission
Note: Refer the basic branch for a bare minimum starter structure with all the essentials
How to Setup?
If new to Supabase
- Create account at Supabase
- Create a Organisation, and a project
Once done, or if you already have a Supabase project
- Copy the generated project's API authentication details from
https://app.supabase.io/project/<your-awesome-svelte-project>/api/default?page=auth - Place the details in
.env/.env.localasVITE_SUPABASE_URLandVITE_SUPABASE_ANON_KEY - Install NPM dependencies
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 changes 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
Why SvelteKit?
Landing from a different Full-stack UI framework(Next.js, NuxtJS, Angular Universal)? Here's few essential watches and readings -
- An update on SvelteKit (Rich Harris on SvelteKit - SvelteSummit)
- A short history of Svelte
Why Supabase?
- https://aalam.in/blog/supabase-the-open-source-firebase-alternative (Supabase has storage now, and something better than functions could land anytime soon)
Building
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:
