Introduction

Progressive Web App (PWA) starter template for HTML-based Single-page application (SPA) development, leveraging various Omni libraries.

Headline Features: 🌟

• Dark-mode support.
• Testing, linting & formatting support.
• Basic SPA boilerplate with routing & PWA setup.

Key Dependencies: 🛠️

• Tooling
  • VS Code for application development.
  • Playwright for end-to-end headless browser testing.
  • ESLint for static code analysis.
  • Prettier for opinionated code formatting.
• Runtime
  • Omni Components for UI components.
  • Omni Router for client-side routing.

Usage

1️⃣   Create a new repository from this template (or fork) and clone locally:

git clone https://github.com/{your-repo-name}.git
cd {your-repo-name}

2️⃣   Restore all package dependencies:

npm i

3️⃣   Open it in VS Code:

code .

Scripts

The following NPM scripts within package.json should be noted:

• serve - Launches a simple web server, serving the src directory.
• test - Launches the Playwright test runner & executes all tests within tests directory.
• format - Runs the Prettier formatter on all .js files, applying format updates where necessary.
• lint- Runs the ESLint analyzer on all .js files, applying code updates where necessary.

Run End-to-End Tests with Playwright

# Install browsers for the first run (Required)
npx playwright install

# Runs the end-to-end tests
npm run test

# Runs the tests only on Chromium
npm run test -- --project=chromium

# Runs the tests of a specific file
npm run test -- tests/example.spec.ts

# Runs the tests in debug mode
npm run test -- --debug

Showcased Features

Feature	Availability	Description
Components	✅	Omni Components
Routing	✅	Omni Router
Tests	✅	Provided via Playwright
Serve	✅	Provided via http-server
Formatting	✅	Provided via Prettier
Linting	✅	Provided via ESLint