Svelte Starter Kit

Everything you need to build a Svelte project, powered by create-svelte.

Tech Stack

JS Framework SvelteKit
CSS: Tailwind CSS
UI Components: tailwindcss based Flowbite/flowbite-svelte, skeleton and DaisyUI
Unit/Component testing: vitest
Testing Library
Svelte Testing Library
API Mocking: Mock Service Worker
Code Coverage c8
End-to-End Testing: playwright
GraphQL: Houdini & Hasura
Authentication: Auth.js
PWA: Vite PWA

Features

Experementing

tRPC-SvelteKit End-to-end typesafe APIs SvelteKit.
Monorepo: Convert to monorepo using pnpm, turborepo/turbopack, rome and changesets. Guide & Examples [1, 2,3]
TAURI: Use tauri for multi-platform

Setup

cd ~/Developer/Work/SPA
git clone https://github.com/xmlking/svelte-starter-kit.git
cd svelte-starter-kit && pnpm i
# playwright is required for end-to-end testing
pnpx playwright install

Environment Variables

By default, the dev server (dev command) runs in development mode and the build command run in production mode.
This means when running npm build, it will load the env variables from .env.production if there is one:
Use .env.local to override environment variables in .env (like API keys) for local development.

## Developing

Once you've cloned the project and installed dependencies with `pnpm i`, start a development server:

```shell
pnpm dev

# or start the server and open the app in a new browser tab
pnpm dev -- --open

# run in debug mode
pnpm dev:debug

# run with a custom inline config
# inline environment variables has higher precedence than ones loaded from .env and .env.local files
PUBLIC_GRAPHQL_ENDPOINT=api.mycompany.com:443 pnpm dev

Maintenance

Update

To update the packages to their latest versions in package.json

pnpm up --latest
pnpm audit --fix

Testing

Unit/Component Tests

pnpm test

pnpm test:ui
#Then, you can visit the Vitest UI at http://localhost:51204/__vitest__/.

# test coverage
pnpm test:coverage

# updating Snapshots
pnpx vitest -u

# test specific folder
pnpx vitest run src/lib/utils
(or)
./node_modules/.bin/vitest run src/lib/utils

E2E Tests

pnpm test:e2e

Building

To create a production version of your app:

pnpm build -r
# run build
node build

Run from the local build directory:

NODE_ENV=production \
PUBLIC_GRAPHQL_ENDPOINT=api.mycompany.com:443 \
node build

# (optional) pass ORIGIN when using `adapter-node` build
HOST=127.0.0.1 \
PORT=4000 \
ORIGIN=https://my.site \
node build

You can preview the production build with pnpm preview.

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

Release

after checking-in all your changes, bump the VERSION and build the docker image.

# dry-run
cog bump --auto --dry-run
# this will bump version in package.json and create git tag and commit.
cog bump --auto

Libs

To build and publish libs

pnpm build:lib
cd package
pnpm publish

alexander-mart/svelte-starter-kit