Your first W3Booster app

Start with a dashboard you can see and change. You need Node.js 22.22.3 or newer and a terminal. You do not need an account, Warcraft III, or the desktop client for this first step.

1. Create and run

npx --yes --package=github:W3Booster/app-starter w3booster-create my-app
cd my-app
npm ci
npm run dev

Open http://localhost:5173/. Success means you can see two players, a game clock, and a DEMO DATA badge. If port 5173 is occupied, stop your other development server or explicitly choose another port and use that same address when testing in W3Booster.

Try the hosted starter first or browse its source. Prefer a complete Angular app? Start from Match Vision.

2. Make a visible change

Open src/main.ts, change “Your first app. Already running.” to your own heading, and save. The browser updates. Open src/render.ts to change the player cards. This is one minimal app, without official example identities or a multi-app router.

The application owns HTML, CSS, and presentation. The SDK owns the connection and match state. runtime.lifecycle.subscribe() immediately supplies a snapshot and delivers subsequent changes; runtime.start() waits for synchronized data; runtime.stop() cleans up the runtime.

The starter handles loading, no match, missing optional fields, startup errors, and cleanup. Select no match, missing data, teams, or finished from the demo scenario menu to see those states without starting a game. Use Connection & capabilities to inspect what your app can currently read and do.

3. Register only when you want real data

Enable Developer Mode from the W3Booster account menu. Open Apps → Developer → Create app, choose a name and description, and configure an application surface. For local development, use http://localhost:5173/?demo=0. A public release needs your deployed HTTPS URLs.

Request match:read and players:read for this dashboard; the minimal definition is in app-definition.json. Resources, heroes, typed settings, and overlays have their own focused example repositories. Your application's database record is authoritative for its scopes and settings.

W3Booster creates a public client ID. Copy it and run this in your project:

npx w3booster-settings init YOUR_CLIENT_ID --endpoint https://api.w3booster.com

This replaces the starter's offline placeholder with src/w3booster.generated.ts and adds w3booster:sync and w3booster:check scripts. Commit the generated file and package.json. The ID is not a password; it does not grant data access.

4. Launch with real authorization

Keep the development server running. In My apps, choose Test locally and enter:

The minimal starter supports the application surface. For transparent output, use Minimal Match Strip, an overlay-only example. Start the local test, then open the application from W3Booster. Success means LIVE CONNECTION and Connected · synchronized. “Waiting for a match” is normal when no game is active.

Opening localhost directly does not authorize live data. W3Booster supplies the temporary launch credential, and the SDK consumes it automatically. Do not copy tokens or write your own WebSocket connection code. Local tests are owner-only and expire after 12 hours.

5. Change settings and ship

After editing your app definition in W3Booster:

npm run w3booster:sync
npm run check
npm run build

Upload dist/ to your HTTPS host. Replace the registered surface URLs with your deployed URLs and keep demo=0 for live surfaces. Invite testers before submitting for review. The publishing guide covers overlays, embedding, deployment, and updates.

Continue with working examples, feature guides, API reference, or troubleshooting.