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: [Flowbite/flowbite-svelte] and DaisyUI
- Unit/Component testing: vitest
- Testing Library
- Svelte Testing Library
- API mocking: Mock Service Worker
- Code Coverage c8
- End-to-End Testing: playwright
Features
- Lazy-loading images
- Responsive design
- SEO optimization
-
forms: schema definitions withyup. validation errors with svelte-forms-lib - Forms: schema definitions with
zod. Validation errors with felte forms - UI Components: tailwindcss based
flowbiteanddaisyui, make both work together without conflect, add DarkMode switcher. - K8s deployment with letsencrypt ssl certificates
- Tables: svelte-headless-table
Setup
cd ~/Developer/Work/SPA
git clone https://github.com/xmlking/svelte-starter-kit.git
cd /svelte-starter-kit && npm install
# playwright is required for end-to-end testing
npx playwright installEnvironment 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 created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```shell
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
# run in debug mode
NODE_ENV=DEBUG npm run dev
# run with a custom inline config
# inline environment variables has higher precedence than ones loaded from .env and .env.local files
CONFY_API_ENDPOINT=api.mycompany.com:443 npm run devMaintenance
Update
To update the packages to their latest versions in package.json
ncu -u
npm iTesting
Unit/Component Tests
npm run test
npm run test:ui
#Then, you can visit the Vitest UI at http://localhost:51204/__vitest__/.
# test coverage
npm run test:coverage
# updating Snapshots
vitest -uE2E Tests
npm run test:e2eBuilding
To create a production version of your app:
npm run build
# build for hybrid rendering on nodejs runtime
npm run build:node
# build for static rendering on nginx runtime
npm run build:static
# run build
node buildRun from the local build directory:
NODE_ENV=production \
CONFY_API_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 buildYou can preview the production build with npm run 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
![@dependabot[bot]](https://web.archive.org/web/20221127232039im_/https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}