Svelte Ultimate Template

A starter template for Progressive Web App with Svelte + TypeScript + SugarSS

Use this template on GitHub

✨ Features

• Svelte
  • svelte-spa-router
• TypeScript
• SugarSS
• PWA

♻️ Lint and Test

• Jest
• ESLint
  • eslint-config-standard-with-typescript
• Stylelint

🔨 Development

• Parcel
  • HMR
• Automated testing using GitHub Actions
• Source map support for CSS
• Gitpod support

🎨 App structure

$ tree src
src
├── App.svelte
├── assets
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── maskable_icon.png
│   ├── maskable_icon_x128.png
│   ├── maskable_icon_x192.png
│   ├── maskable_icon_x384.png
│   ├── maskable_icon_x48.png
│   ├── maskable_icon_x512.png
│   ├── maskable_icon_x72.png
│   ├── maskable_icon_x96.png
│   ├── safari-pinned-tab.svg
│   └── svelte-typescript-sugarss.svg
├── components
│   ├── Counter.svelte
│   └── Counter.test.ts
├── index.html
├── main.ts
├── routes
│   ├── Home.svelte
│   └── NotFound.svelte
├── site.webmanifest
└── sw.ts

3 directories, 25 files

🎉 Get started (automatic if using Gitpod)

Requires:

• tmux (used by npm run dev)

npx degit sakkke/svelte-ultimate-template [project-name]
cd [project-name]
npm i
npm run dev

Stop npm run dev

1. Press <C-b>:killw<CR>
2. Done!

Manually lint and test instead of npm run dev

Run Jest in watch mode

npm run test:watch

Run ESLint in watch mode

npm run lint:watch

Run Stylelint in watch mode

npm run lint:style:watch

🔰 Checklist

• Check or update ./LICENSE
• Update name, description, author in ./package.json
• Update title in ./src/index.html
• Update assets in ./src/assets and ./public
• Update ./src/site.webmanifest
• Update ./README.md

Default assets created with:

1. SVGPORN
2. Maskable.app
3. RealFaviconGenerator

🚀 Deploy

.github/workflows/main.yml

on: push

jobs:
+ deploy:
+   needs: test
+   runs-on: ubuntu-latest
+   steps:
+     - uses: actions/checkout@v2
+     - uses: actions/setup-node@v2
+       with:
+         node-version: '16'
+         cache: npm
+     - run: npm ci
+     - run: npm run build
+     - uses: peaceiris/actions-gh-pages@v3
+       with:
+         github_token: ${{ secrets.GITHUB_TOKEN }}
+         publish_dir: ./public
+
  test:
    ...

📄 License

Unlicense