Introduction

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

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 Webpack's dev server (Automated via F5 debugging in VS Code 😎).
• build - Bundles code and copies artifacts for production from the src directory to the dist directory.
• analyze - Bundles code (see build command) and generates & serves a module visual analyzer.
• preview - Launches a simple web server, serving the dist directory (Remember to build first! 🎗️).
• test - Launches the Playwright test runner & executes all tests within tests directory.
• format - Runs the Prettier formatter on all .ts files, applying format updates where necessary.
• lint- Runs the ESLint analyzer on all .ts files, applying code updates where necessary.

Run End-to-End Tests with Playwright

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

# When testing on CI, must build the project first
npm run build

# 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

Features

Feature	Availability	Description
Components	✅	Omni Components
Component Intellisense	✅
Routing	✅	Omni Router
VS Code Debugging	✅	.vscode/launch.json
Tests	✅	Playwright
Serve	✅	webpack
Build	✅	webpack
Build chunking	✅	/* webpackChunkName: */ compiler hints
Preview built output	✅	http-server
Formatting	✅	Prettier
Linting	✅	ESLint