svelte-starter-kit

Svelte Starter Kit

SvelteKit Starter Template Moved to: https://github.com/xmlking/spectacular

#sveltejs #tailwindcss #vite #svektekit #flowbite #playwright #typescript #vitest #daisyui #authjs
Demo Download

Svelte Starter Kit

This repository moved. Please use the new location: spectacular

Please :star2: :star2: :star2: Star :star2: :star2: :star2: the new repo spectacular


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

Tech Stack

Features

  • Responsive Design: Container queries
  • Progressive Web Apps (PWAs):
    • Smart caching with Service Works
    • Re-engage customers with Push Notifications
    • Push Application Updates
  • Fonts and Image Optimization: edge caching, Lazy-loading images
  • SEO optimization
  • GraphQL: Houdini the disappearing GraphQL client for SvelteKit. and nHost as BaaS
  • Forms: Form handling with [superforms, source] and Validation with zod
  • Error Handling:
  • Themes: tailwindcss DarkMode switcher
  • Deployment: Docker build and deployment serverless / k8s runtimes.
  • Tables: svelte-headless-table
  • Security: Use Auth.js when stable
  • Vitebook or Storybook 7
  • GraphQL Yoga API
  • Documentation micro site with Astro
  • Build Tools
    • Use Bob.Build for Smart Builds, Build Cache etc and Bob's github-actions
    • Use earthly.dev - Great for monorepos, Compatible with Every Language, Framework, and Build Tool
  • Use sveltekit-og for Open Graph Image Generation

Experementing

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
# (optional) add git-commit-hooks
cog install-hook --all

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

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes