SvelteKit App Template

Template for SvelteKit project, powered by create-svelte.

Features

1. Authentication handle with Auth.js
2. Authenticated users can be assigned as page admins via userSettings object in their user database entry.
3. End-to-end testing via Playwright
4. Unit testing via Vitest
5. UI development assistance with Storybook
6. Schema validation with Zod
7. ESLint configured with AirBnb standards

Config

• Copy '.env.example' to '.env' file and update variables as needed
• Update seo data in 'src/lib/stores/seo.ts', 'src/routes/+page.svelte', 'src/routes/protected/(admin)/+page.svelte', 'src/routes/+layout.svelte'

Developing

• Once you've created a project and 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

# spin-up local postgres docker container to store data
docker-compose up -d

# initialize DB using prisma schema file, seed db with initial data, and start prisma studio
npx prisma migrate dev
npx prisma db seed
npx prisma studio

# run storybook for UI development
npm run storybook

First user

This template allows visitors to login via Google auth. Users have two possible roles: 1. Approved users that are able to edit the app, and 2) User managers that are able to edit approved user permissions. User managers can assign new users as page admins via the '/admin' route. However, the first admin user must be assigned as a user manager via a database update through Prisma.

After starting the app login with your Google account to create your user. Then using prisma studio edit your userSettings to set 'approved' and 'manager' to true. Then you'll be able to access the admin page, and approve other new users.

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Deploying with docker

To create a production version of your app:

make build-production
make start-production

Open http://localhost:3003

This template was inspired by the work of JS content creater 'Coding Garden'. See his repo at listd github