Phaset Web

Phaset Web is the browser application for Phaset. It is built with plain JavaScript, Lit, Vite, Vaadin Router, Shoelace, and Chart.js.

Quick Start

npm install
npm start

The development server runs at http://localhost:5173 and uses http://localhost:3000 as the default API endpoint.

Commands

• npm start or npm run dev: Start the Vite development server.
• npm run build: Build the production app into dist/.
• npm test: Run the Vitest test suite.
• npm run lint: Run Biome without writing changes.
• npm run lint:fix: Run Biome and apply safe fixes.
• npm run deps: Validate the module graph with dependency-cruiser.
• npm run verify: Run lint, tests, build, and dependency validation.
• npm run deploy: Verify and deploy dist/ to the phaset-web Cloudflare Pages project.
• npm run release: Build a distributable zip with version, license, SBOM, and OSS license metadata.

Configuration

Set the API endpoint at build time with API_BASE_URL:

API_BASE_URL=https://api.example.com npm run build

For local .env usage:

cp .env.example .env
echo "API_BASE_URL=https://api.example.com" > .env
npm run build

The demo build points at https://demo.api.phaset.dev:

npm run build:demo

If no endpoint is injected, local development falls back to http://localhost:3000; remote builds use a visible placeholder URL so misconfigured deployments fail clearly.

Deployment

Phaset Web is currently deployed with Cloudflare Pages at phaset-web.pages.dev.

npm run deploy

In CI or another deployment pipeline, set API_BASE_URL before npm run build:

- name: Build
  run: npm run build
  env:
    API_BASE_URL: ${{ secrets.API_BASE_URL }}

Structure

• src/: Application shell, global styles, configuration, views, components, and infrastructure helpers.
• src/components/: Reusable UI and feature components.
• src/infrastructure/: API client, auth helpers, storage/cache helpers, and shared utilities.
• src/views/: Route-level views.
• tests/: Vitest tests.
• testdata/: Review and state fixtures used by tests.
• mocks/: Mock API payloads for manual testing.

Some mock and fixture data may be older than the live API.

Supply Chain

The CI workflow creates an SBOM with Syft, scans it with Grype, and checks licenses with Grant. You can run the same steps locally:

npm run sbom
npm run scan
npm run licenses

License

MIT