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 - All icons with unplugin-icons

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

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

```sql -- Create a table for Public Profiles create table profiles ( id uuid references auth.users not null, username text unique, avatarurl text, website text, updatedat timestamp with time zone,

primary key (id), unique(username), constraint usernamelength check (charlength(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 sql 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:

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

See the adapter documentation for more detail