/svelte-starter-kit

Svelte with brilliant bells and useful whistles

Primary LanguageSvelte

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 /profile as 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.local as VITE_SUPABASE_URL and VITE_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 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

Why SvelteKit?

Landing from a different Full-stack UI framework(Next.js, NuxtJS, Angular Universal)? Here's few essential watches and readings -

Why Supabase?

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:

See the adapter documentation for more detail