-
Notifications
You must be signed in to change notification settings - Fork 3
Notable features
Hint: Press βΆ to reveal hidden sections (usually contain screenshots).
- Run in UI mode and uncollapse individual tests to understand primary app use cases
- With page objects
- Scripts for running in different modes (headless and UI modes being the most useful)
Test signed-in and signed-out states
Screenshot: Playwright UI mode
![](https://private-user-images.githubusercontent.com/156369338/296551235-6adf214f-7772-49ed-98bf-c69c7a531a60.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUxMjM1LTZhZGYyMTRmLTc3NzItNDllZC05OGJmLWM2OWM3YTUzMWE2MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hY2QzNDlmM2IxZmVjYTliZWU4YWZhOWY3MDVmYmUwNDllMjU4M2YxNzFlOThmODhjNTRkYTZhNTFjNmI3ZTQ0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ili-TSfNyC2Gx1RIVqJF9MYYn34qt0WNNbSEFlNwyJI)
With seed data
Screenshot: Home page with seeded data
![](https://private-user-images.githubusercontent.com/156369338/296551346-ffc64cb3-1420-47c6-bf83-96d8a6eb7f8b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUxMzQ2LWZmYzY0Y2IzLTE0MjAtNDdjNi1iZjgzLTk2ZDhhNmViN2Y4Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YWRmZDU2MjAzZWY2YjFmOGYwNDljMjBjMmZiYWEzMGIzYTZmMDllNjNjYThlMmUxNmNjZWUyYWVjMzhjZjg3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.7aUNbOPVAYweJM22QCHnvyU9xzesPxhT9dd-6SGPWpQ)
Generates reports, useful for troubleshooting test errors in CI
Screenshot: Location of Playwright report files in GitHub Actions
![](https://private-user-images.githubusercontent.com/156369338/296552247-e50dd487-528d-418f-bcfe-043c668b66d5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUyMjQ3LWU1MGRkNDg3LTUyOGQtNDE4Zi1iY2ZlLTA0M2M2NjhiNjZkNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02YWU5MDY4ZTdjM2M4OTE5ZmZkZDgzY2E0N2MyNjM4YTMyMzhmNDY1MTcwZGZkZmEyMGQyOTNlMjIwNDhlYTNkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.uhFlqUvnCPfWHCR-owuI3NMM9MUSVVhUpuC4Cck_1Bo)
See ./scripts/local/*/playwright/e2e/*.js
scripts. Do npm ci
(also make sure Docker Compose is installed) and run ./scripts/local/infra-app/playwright/e2e/ui.js
to see awesome Playwright UI mode screen!
Done primarily for learning, not really needed for this project.
See ./scripts/local/*/playwright/api/*.js
scripts.
- Inspect
*.node-test.ts
and*.dom-test.ts
files to understand use-cases of each code part - Useful as a reference of how to unit test specific parts of a SvelteKit app
- Ability to generate test coverage reports for client and server code
- Used extensively by the author to ensure good coverage of client and server code using Vitest
- Contains reusable utilities useful for testing parts of a SvelteKit app
Includes configs for Wallaby.js, which substantially increases the speed of writing client and server unit tests (not sponsored, author is just a big fan of their products π)
Screenshot: Passing component unit tests in VSCode with enabled Wallaby.js
![](https://private-user-images.githubusercontent.com/156369338/296551779-b7746a55-ad98-40dd-8ace-623e1d8711ba.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUxNzc5LWI3NzQ2YTU1LWFkOTgtNDBkZC04YWNlLTYyM2UxZDg3MTFiYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iZjNjZGY5MTk2Nzg0OTJiOThkMjBhMDFmYzY3NjlhYzZiMDM1NTZiNjg5NWUwYjc1ODQxYWE5ZWExZDczMzg0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.3NniSIiwcywgYLPrvAp4vQUnZBzdJJo2fVtinSFWNaw)
See test:unit:*
commands in package.json
.
GitHub Actions CI tasks required for merging PRs
- Run all linting tasks
- Run FE unit tests
- Run BE unit tests
- Run API tests
- Run E2E tests
- Lint unwanted commit message patterns
- Lint unwanted TODO-style comments
GitHub Actions screenshot
Screenshot: Passing jobs inside `ci` GitHub Actions workflow
![](https://private-user-images.githubusercontent.com/156369338/296553242-e9ca52eb-aac8-4c48-973b-3e36f9982758.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUzMjQyLWU5Y2E1MmViLWFhYzgtNGM0OC05NzNiLTNlMzZmOTk4Mjc1OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01NjAyZDA0ODA3MzA4ODM4ZWNiMGFhNGRmYzk4ZGVkMTQ2MTRjMDkxMTI2MzQwOTQ0YWI4NTNlMzU4NTE4NTRkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.nod87MPKyXl5EOa8AJcfd9p2CS78Iuy-8CchLPEoc2Y)
See ./.github/workflows/ci.yml
file.
Northflank Pipelines CI/CD tasks
See Set up a pipeline | Getting Started | Northflank Application docs.
- Docker image building
- Enable Maintenance mode
- Database backup
- Database migration
- Docker image deployment
Northflank Pipeline run screenshot
Screenshot: Successful Production `release` flow Pipeline run
![](https://private-user-images.githubusercontent.com/156369338/296552704-ddfc1eae-33d9-444a-a47d-d19e7d39d8e1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUyNzA0LWRkZmMxZWFlLTMzZDktNDQ0YS1hNDdkLWQxOWU3ZDM5ZDhlMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02N2YxOTBmMGI5ZDQ2MjgzNGE1MjQ2MGE3NzA1NDZmNTNlZjEyNGQ5NDAyYjNiMzMwMjczYWYzZGZiYTBkMWYyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.y9pJyCKLSEtgyGJ8eKgQrHx8V4Yt6DvozAHiBIDmYYs)
- TypeScript type checking
- Svelte Code Checker linting
- Prettier opinionated formatting
- ESLint TS/JS linting
- Stylelint style linting
See lint*
commands in package.json
.
A powerful option for hosting Dockerized apps. Pipelines (CI/CD) and Templates (quick infrastructure stack replication via IaC) are their killer features. See Features β Northflank for more details (not sponsored, the author is just a big fan of their platform π).
Northflank project dashboard screenshot
Screenshot: Northflank project dashboard
![](https://private-user-images.githubusercontent.com/156369338/296552892-f75f3e0b-9d95-44fd-945d-1e4db71d7322.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUyODkyLWY3NWYzZTBiLTlkOTUtNDRmZC05NDVkLTFlNGRiNzFkNzMyMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01NmVjMGE3NDQ3MTkyYTMwM2RiZTAwZjZiYTc2N2YwZTZmOGY4ZGQzM2UxN2FhODI0MDIyYTU2NGI1NDM5M2ExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.bU1aKz-LzfZjNuPetTScZUfCWxH7Ol7f1gs4H3ubqK4)
Visit https://code-snippet-sharing.nodeexx.com to access the deployed version.
- Dockerization levels ranging from everything running outside of Docker Compose to everything running inside of it
- Production-ready SvelteKit app
Dockerfile
with security in mind
It's possible to run the whole local stack with only Node.js, Docker and Docker Compose installed. For example, just run ./scripts/stack/local/all/infra-app/infra-app-seed.js
to start the whole stack and seed the database with some data. Then visit localhost:3000
π. No need for npm ci
or other setup to try out the app locally!
- Central location for storing app-wide configuration values
- The only location for accessing values of environment variables
See ./src/lib/server/core/config/index.ts
file.
- Using Tailwind CSS config as a source of truth regarding allowed design token values
- Added comments regarding design tokens provided by Skeleton
See tailwind.config.ts
file.
The only exceptions that require enabled JavaScript to work:
- Google Auth page itself
- Copy button on the View code snippet details page
Enabled JavaScript improves the UX though π
Displays a user-friendly message to the user during deployment while a user is unable to interact with the app. Useful during automated database backup and migration procedures.
Screenshot of enabled Maintenance mode
Screenshot: Enabled Maintenance mode
![](https://private-user-images.githubusercontent.com/156369338/296553689-aeb33419-03bb-41ba-ad73-8568de9000e7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NTUzNjg5LWFlYjMzNDE5LTAzYmItNDFiYS1hZDczLTg1NjhkZTkwMDBlNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04NzA4NmFmZDAwODU0N2I4YTRiMGJlODBjMWJiY2ViNjYwMTI4Yzg2ODE3NWYyNDg3NzlmYTY0NzQ4Yjc4ZWViJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.xqWBZxSAWQl2eTxwgMBonPYebzd7c1xtOmgrBNFAIxE)
For example, when a signed-out user requests a page that requires authentication, the app first redirects the user to the sign-in page. After the user successfully signs in, the app redirects them back to the originally requested page.
- Toasts when JavaScript is enabled
- When JavaScript is disabled
- Alerts for notifications on the same page
- Page message at the top of the page for notifications that happened after page redirection
- 404 and 500 HTTP status error pages
- Toast notification on no Internet connection when requesting data from server with JS
The server part reacts to SIGINT
and SIGTERM
signals.
See ./src/hooks.server.ts
file.
GET /api/healthcheck
. Useful for knowing if the server part is up and running.
See ./src/routes/api/healthcheck/+server.ts
file.
UI should work with screens as narrow as 320px.
Screenshot: Home page displayed on 320x480 screen
![](https://private-user-images.githubusercontent.com/156369338/296614860-40146309-7e4c-4860-b384-6de90e30042a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzU0OTUsIm5iZiI6MTcyNjEzNTE5NSwicGF0aCI6Ii8xNTYzNjkzMzgvMjk2NjE0ODYwLTQwMTQ2MzA5LTdlNGMtNDg2MC1iMzg0LTZkZTkwZTMwMDQyYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTU5NTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00NjBlNDdjYjhkMTJhMjRhODcxMjYwNjQyYjNmNGYyYTZmY2M4ZWUxMzllODgzMTdhMjJmMjk0OWFlZDEyYmUzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.fvM52QHnwIuMvw-oQKBf8vR3byCiy1vl5nLcjZTusG8)
See template files in ./.vscode
folder.
Take them as subjective opinions and observations though, not universal truths π