Skip to content
vgai Learn

Build for web & package for desktop

cli tutorial Intermediate ⏱ 6 min vgai 0.1.0

Prerequisites: Scaffolded a vgai project

What you'll learn

  • Build the browser-first static bundle (itch.io-ready)
  • Produce the distributable web zip
  • Understand the wired desktop packaging path (and its honest status)

What you'll build: A terminal walkthrough of the web build, the itch.io zip, and the packaging tooling.

vgai ships a browser-first build: npm run build:web produces a static bundle you can drop on itch.io or any static host. Desktop packaging is wired through electron-builder. The transcript below is real captured output.

# transcript pending capture — run: node site/media/capture-cli.mjs
Terminal — Build for web & package for desktop · captured by site/media/capture-cli.mjs

Steps

Section titled “Steps”

  1. Build the web bundle.

    Terminal window
    npm run build:web   # = tsc && vite build --mode web && zip the dist

    The bundle step (vite build --mode web) emits a root index.html (the editor) plus the playground and surfaces into dist/ — a self-contained browser app.

  2. Zip it for itch.io.

    Terminal window
    cd dist && zip -r ../vgai-web.zip .

    vgai-web.zip is an itch.io-ready HTML5 upload — no server required.

  3. Desktop packaging.

    Terminal window
    npx electron-builder --version

    npm run package (and package:editor for the editor app) wrap electron-builder to produce desktop builds.

Recap

New functionality

  • Built the browser-first static bundle
  • Produced the itch.io web zip
  • Saw the desktop packaging tooling

New concepts & skills

  • build:web = tsc + vite (mode web) + zip → a static HTML5 bundle
  • vgai-web.zip uploads to itch.io with no server
  • desktop (electron-builder) is wired but unproven E2E; Steam/mobile scaffolds are parked

Next lesson → Tooling overview

See also

Section titled “See also”