Quick start

Getting Started

Frontend Contract Guard is a local-first desktop app, a self-hosted web app and a CLI that tell you which frontend routes and source files an API change may affect — before it reaches production. All three run the same engine, so a comparison gives the same findings everywhere.

Desktop

1. Install dependencies

   npm install, then npm run dev for the Electron app with Vite HMR.

2. Load the demo project

   Choose Load demo project to see a removed field traced to a component and route.

3. Capture a baseline and a candidate

   Import a HAR (DevTools → Network → Save all as HAR) or record a journey in the built-in Chromium window, for each build you want to compare.

4. Run Analysis

   ⌘R / Ctrl+R and inspect findings under API Changes.

Web

1. Install and run

   npm install, then npm run dev:web for http://localhost:3000 with HMR.

2. Sign in with Google

   Your account is created the first time you continue with Google (when the server allows new accounts).

3. Load the sample project

   Use Load sample project on the Projects page to see a removed field traced to a component, file and route.

4. Build for production

   npm run build:web, then run npm run start:web with NUXT_DATA_DIR set to a persistent volume.

Where to next

• Not sure which one to run? See Desktop vs Web.
• Want the mechanics first? See Core Concepts.