Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sakkke/svelte-ultimate-template
A starter template for Progressive Web App with Svelte + TypeScript + SugarSS
https://github.com/sakkke/svelte-ultimate-template
eslint gitpod jest nodejs parcel postcss pwa starter stylelint sugarss svelte template typescript
Last synced: 12 days ago
JSON representation
A starter template for Progressive Web App with Svelte + TypeScript + SugarSS
- Host: GitHub
- URL: https://github.com/sakkke/svelte-ultimate-template
- Owner: sakkke
- License: unlicense
- Created: 2021-10-19T06:14:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-31T00:24:30.000Z (over 3 years ago)
- Last Synced: 2024-11-25T07:42:28.714Z (2 months ago)
- Topics: eslint, gitpod, jest, nodejs, parcel, postcss, pwa, starter, stylelint, sugarss, svelte, template, typescript
- Language: JavaScript
- Homepage:
- Size: 3.78 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/sakkke/svelte-ultimate-template/actions/workflows/main.yml)
[](https://gitpod.io/from-referrer/)
# Svelte Ultimate Template
A starter template for Progressive Web App with **Svelte** + **TypeScript** + **SugarSS**
[Use this template on GitHub](https://github.com/sakkke/svelte-ultimate-template/generate)
## ✨ Features
- [x] Svelte
- [x] [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router)
- [x] TypeScript
- [x] SugarSS
- [x] PWA
### ♻️ Lint and Test
- [x] Jest
- [x] ESLint
- [x] [eslint-config-standard-with-typescript](https://github.com/standard/eslint-config-standard-with-typescript)
- [x] Stylelint
### 🔨 Development
- [x] Parcel
- [x] HMR
- [x] Automated testing using GitHub Actions
- [ ] Source map support for CSS
- [x] Gitpod support
## 🎨 App structure
```console
$ 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`)
```sh
npx degit sakkke/svelte-ultimate-template [project-name]
cd [project-name]
npm i
npm run dev
```
### Stop `npm run dev`
1. Press `:killw`
1. Done!
### Manually lint and test instead of `npm run dev`
#### Run Jest in watch mode
```sh
npm run test:watch
```
#### Run ESLint in watch mode
```sh
npm run lint:watch
```
#### Run Stylelint in watch mode
```sh
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](https://svgporn.com/)
1. [Maskable.app](https://maskable.app/)
1. [RealFaviconGenerator](https://realfavicongenerator.net/)
## 🚀 Deploy
`.github/workflows/main.yml`
```diff
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