# Dev

> Build and launch CardMaker as an Electron desktop app Use when this capability is needed.

- Skill: `tomevault-io/dev-6` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/dev-6`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/dev-6/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/dev-6

---


Manage the CardMaker Electron app. The argument determines the action:
- `start` (default if no argument): stop stale processes, build, and launch Electron
- `stop`: stop all CardMaker processes
- `restart`: stop then start

## Stop Procedure

1. Find processes on ports 3001, 5173, and 5174:
   ```bash
   netstat -ano | findstr "LISTENING" | findstr ":3001 :5173 :5174"
   ```
2. Kill each found PID:
   ```bash
   taskkill //PID <pid> //F
   ```
   Use `//PID` not `/PID` (Git Bash on Windows).

## Start Procedure

1. First run the stop procedure to clear stale processes.

2. Build everything:
   ```bash
   cd /c/Users/mikes/Documents/CardMaker && npm run build:electron
   ```

3. Start the Vite dev server as a background process (provides HMR for client changes):
   ```bash
   cd /c/Users/mikes/Documents/CardMaker/client && npx vite
   ```

4. Wait for Vite to be listening on port 5173.

5. Launch Electron in dev mode as a background process:
   ```bash
   cd /c/Users/mikes/Documents/CardMaker && npx electron .
   ```

Report the status when done.

## Architecture Notes
- Electron runs the Express server in-process on port 3001 (handles data folder, env vars).
- Vite dev server on port 5173 provides HMR — client changes hot-reload instantly.
- In dev mode, Electron window loads from Vite (localhost:5173), which proxies `/api`, `/output`, and `/games` to Express on port 3001.
- Only server code changes require a full restart. Client changes are reflected immediately via HMR.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/michaelswitzer) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->