fix(v3): configure Vite port via env var so pnpm (and other package managers) work in dev mode#5365
Merged
Merged
Conversation
Contributor
WalkthroughThis PR migrates Vite dev server port configuration from Taskfile CLI arguments to environment-variable-based vite.config files. All Taskfiles are simplified to run ChangesDev Server Port Configuration Migration
🎯 3 (Moderate) | ⏱️ ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Taskfile
participant npm as npm/pnpm
participant Vite as Vite
participant Env as WAILS_VITE_PORT
Taskfile->>npm: npm run dev
npm->>Vite: start dev server
Vite->>Env: read WAILS_VITE_PORT
Vite->>Vite: bind port (Number(...) || 9245) / strictPort enforced
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates Wails v3 Vite-based project templates and examples so the dev server port is configured via the WAILS_VITE_PORT environment variable (set by wails3 dev), avoiding reliance on CLI argument forwarding that can break with some package managers (e.g., pnpm).
Changes:
- Update template
vite.config.{js,ts}files to readserver.portfromprocess.env.WAILS_VITE_PORTand enablestrictPort. - Simplify the build-assets
dev:frontendTaskfile template to runnpm run devwithout forwarding--port/--strictPortargs. - Add/update example
vite.config.jsfiles and simplify exampledev:frontendtasks accordingly.
Reviewed changes
Copilot reviewed 36 out of 36 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| v3/internal/templates/vue/frontend/vite.config.js | Read dev server port from WAILS_VITE_PORT and set strictPort. |
| v3/internal/templates/vue-ts/frontend/vite.config.ts | Same as above for Vue + TS template. |
| v3/internal/templates/vanilla/frontend/vite.config.js | Same as above for Vanilla template. |
| v3/internal/templates/vanilla-ts/frontend/vite.config.ts | Same as above for Vanilla + TS template. |
| v3/internal/templates/sveltekit/frontend/vite.config.js | Add env-driven port + strictPort to existing server config. |
| v3/internal/templates/sveltekit-ts/frontend/vite.config.ts | Add env-driven port + strictPort to existing server config. |
| v3/internal/templates/svelte/frontend/vite.config.js | Read dev server port from WAILS_VITE_PORT and set strictPort. |
| v3/internal/templates/svelte-ts/frontend/vite.config.ts | Same as above for Svelte + TS template. |
| v3/internal/templates/solid/frontend/vite.config.js | Same as above for Solid template. |
| v3/internal/templates/solid-ts/frontend/vite.config.ts | Same as above for Solid + TS template. |
| v3/internal/templates/react/frontend/vite.config.js | Same as above for React template. |
| v3/internal/templates/react-ts/frontend/vite.config.ts | Same as above for React + TS template. |
| v3/internal/templates/react-swc/frontend/vite.config.js | Same as above for React SWC template. |
| v3/internal/templates/react-swc-ts/frontend/vite.config.ts | Same as above for React SWC + TS template. |
| v3/internal/templates/qwik/frontend/vite.config.js | Same as above for Qwik template. |
| v3/internal/templates/qwik-ts/frontend/vite.config.ts | Same as above for Qwik + TS template. |
| v3/internal/templates/preact/frontend/vite.config.js | Same as above for Preact template. |
| v3/internal/templates/preact-ts/frontend/vite.config.ts | Same as above for Preact + TS template. |
| v3/internal/templates/lit/frontend/vite.config.js | Same as above for Lit template. |
| v3/internal/templates/lit-ts/frontend/vite.config.ts | Same as above for Lit + TS template. |
| v3/internal/commands/build_assets/Taskfile.tmpl.yml | Remove CLI arg forwarding; run npm run dev directly. |
| v3/examples/notifications/frontend/vite.config.js | Add minimal Vite config to set env-driven port + strictPort. |
| v3/examples/notifications/build/Taskfile.yml | Simplify dev:frontend to npm run dev. |
| v3/examples/ios/frontend/vite.config.js | Configure env-driven port + strictPort for iOS example. |
| v3/examples/ios/build/Taskfile.yml | Simplify dev:frontend to npm run dev. |
| v3/examples/file-association/frontend/vite.config.js | Add minimal Vite config to set env-driven port + strictPort. |
| v3/examples/file-association/build/Taskfile.common.yml | Simplify dev:frontend to npm run dev. |
| v3/examples/dock/frontend/vite.config.js | Add minimal Vite config to set env-driven port + strictPort. |
| v3/examples/dock/build/Taskfile.yml | Simplify dev:frontend to npm run dev. |
| v3/examples/dev/frontend/vite.config.js | Configure env-driven port + strictPort for dev example. |
| v3/examples/badge/frontend/vite.config.js | Add minimal Vite config to set env-driven port + strictPort. |
| v3/examples/badge/build/Taskfile.yml | Simplify dev:frontend to npm run dev. |
| v3/examples/badge-custom/frontend/vite.config.js | Add minimal Vite config to set env-driven port + strictPort. |
| v3/examples/badge-custom/build/Taskfile.yml | Simplify dev:frontend to npm run dev. |
| v3/examples/android/frontend/vite.config.js | Configure env-driven port + strictPort for Android example. |
| v3/examples/android/build/Taskfile.yml | Simplify dev:frontend to npm run dev. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| }, | ||
| }, | ||
| server: { | ||
| port: parseInt(process.env.WAILS_VITE_PORT || "9245"), |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
v3/internal/templates/svelte-ts/frontend/vite.config.ts (1)
8-10: ⚡ Quick winHarden
WAILS_VITE_PORTparsing with explicit radix and finite check.The current
parseInt()call lacks a radix parameter and has no guard againstNaN, making it fragile. While the hardcoded fallback "9245" prevents outright failure, partial parses (e.g., "9245abc" → 9245) could silently produce unexpected behavior. This pattern is systemic across 29 template and example files.Use
Number.parseInt(value, 10)with an explicit finite check for deterministic parsing:Suggested patch
server: { - port: parseInt(process.env.WAILS_VITE_PORT || "9245"), + port: (() => { + const p = Number.parseInt(process.env.WAILS_VITE_PORT ?? "9245", 10); + return Number.isFinite(p) ? p : 9245; + })(), strictPort: true, },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@v3/internal/templates/svelte-ts/frontend/vite.config.ts` around lines 8 - 10, In vite.config.ts update the server.port parsing to use an explicit radix and guard against NaN: replace the direct parseInt call for process.env.WAILS_VITE_PORT in the server.port assignment with Number.parseInt(value, 10) (or Number.parseInt(process.env.WAILS_VITE_PORT ?? "9245", 10)) and then check Number.isFinite(parsedPort) (or Number.isFinite(Number(parsedPort))) and fall back to 9245 when the parsed value is not finite; apply this change to the server.port expression in the exported config so partial strings like "9245abc" do not silently produce unexpected ports.v3/internal/commands/build_assets/Taskfile.tmpl.yml (1)
118-118: ⚡ Quick win
npm run devstill hardcodes npm, leaving pnpm/yarn/bun users one manual edit away.The PR's goal is package-manager agnosticism, and
.PACKAGE_MANAGER(defaulting to"npm") is already defined in the root Taskfile template vars for this exact use-case. Using it here would let the generated Taskfile honour whatever package manager the user configured, with no other changes required.♻️ Proposed change
- - npm run dev + - "{{.PACKAGE_MANAGER}} run dev"The same hardcoding exists in
install:frontend:deps(line 22) andbuild:frontend(line 40), but those are pre-existing and out of scope for this PR. Based on learnings:PACKAGE_MANAGERis defined with| default "npm"inv3/internal/templates/_common/Taskfile.tmpl.yml, so no inline default is needed here.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@v3/internal/commands/build_assets/Taskfile.tmpl.yml` at line 118, Replace the hardcoded "npm run dev" command with the package-manager-agnostic template variable so generated Taskfiles honor the configured PACKAGE_MANAGER; update the "- npm run dev" entry to use the existing .PACKAGE_MANAGER template variable (e.g. "{{ .PACKAGE_MANAGER }} run dev") in Taskfile.tmpl.yml, without adding an inline default.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@v3/internal/templates/react/frontend/vite.config.js`:
- Around line 8-10: The server port assignment in vite.config.js should validate
parsing of process.env.WAILS_VITE_PORT: use parseInt with radix 10 and guard
against NaN, falling back to the default 9245; update the server.port expression
(the port property inside the server config) to parse with parseInt(value, 10)
and if the result is NaN use 9245 (or Number(process.env.WAILS_VITE_PORT) with
isNaN check) so Vite never receives NaN.
---
Nitpick comments:
In `@v3/internal/commands/build_assets/Taskfile.tmpl.yml`:
- Line 118: Replace the hardcoded "npm run dev" command with the
package-manager-agnostic template variable so generated Taskfiles honor the
configured PACKAGE_MANAGER; update the "- npm run dev" entry to use the existing
.PACKAGE_MANAGER template variable (e.g. "{{ .PACKAGE_MANAGER }} run dev") in
Taskfile.tmpl.yml, without adding an inline default.
In `@v3/internal/templates/svelte-ts/frontend/vite.config.ts`:
- Around line 8-10: In vite.config.ts update the server.port parsing to use an
explicit radix and guard against NaN: replace the direct parseInt call for
process.env.WAILS_VITE_PORT in the server.port assignment with
Number.parseInt(value, 10) (or Number.parseInt(process.env.WAILS_VITE_PORT ??
"9245", 10)) and then check Number.isFinite(parsedPort) (or
Number.isFinite(Number(parsedPort))) and fall back to 9245 when the parsed value
is not finite; apply this change to the server.port expression in the exported
config so partial strings like "9245abc" do not silently produce unexpected
ports.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: af2cdb60-42d6-4e98-b4f9-a02b1f21fca4
📒 Files selected for processing (36)
v3/examples/android/build/Taskfile.ymlv3/examples/android/frontend/vite.config.jsv3/examples/badge-custom/build/Taskfile.ymlv3/examples/badge-custom/frontend/vite.config.jsv3/examples/badge/build/Taskfile.ymlv3/examples/badge/frontend/vite.config.jsv3/examples/dev/frontend/vite.config.jsv3/examples/dock/build/Taskfile.ymlv3/examples/dock/frontend/vite.config.jsv3/examples/file-association/build/Taskfile.common.ymlv3/examples/file-association/frontend/vite.config.jsv3/examples/ios/build/Taskfile.ymlv3/examples/ios/frontend/vite.config.jsv3/examples/notifications/build/Taskfile.ymlv3/examples/notifications/frontend/vite.config.jsv3/internal/commands/build_assets/Taskfile.tmpl.ymlv3/internal/templates/lit-ts/frontend/vite.config.tsv3/internal/templates/lit/frontend/vite.config.jsv3/internal/templates/preact-ts/frontend/vite.config.tsv3/internal/templates/preact/frontend/vite.config.jsv3/internal/templates/qwik-ts/frontend/vite.config.tsv3/internal/templates/qwik/frontend/vite.config.jsv3/internal/templates/react-swc-ts/frontend/vite.config.tsv3/internal/templates/react-swc/frontend/vite.config.jsv3/internal/templates/react-ts/frontend/vite.config.tsv3/internal/templates/react/frontend/vite.config.jsv3/internal/templates/solid-ts/frontend/vite.config.tsv3/internal/templates/solid/frontend/vite.config.jsv3/internal/templates/svelte-ts/frontend/vite.config.tsv3/internal/templates/svelte/frontend/vite.config.jsv3/internal/templates/sveltekit-ts/frontend/vite.config.tsv3/internal/templates/sveltekit/frontend/vite.config.jsv3/internal/templates/vanilla-ts/frontend/vite.config.tsv3/internal/templates/vanilla/frontend/vite.config.jsv3/internal/templates/vue-ts/frontend/vite.config.tsv3/internal/templates/vue/frontend/vite.config.js
pnpm's `--` argument separator doesn't reliably forward CLI args to the underlying Vite script in the same way npm does, so `pnpm run dev -- --port 9245 --strictPort` leaves Vite starting on its default port 5173 instead of the Wails-managed port 9245. The Wails backend polls FRONTEND_DEVSERVER_URL (http://localhost:9245) and times out. Fix: add `server.port` and `server.strictPort` to every project template vite.config, reading from the `WAILS_VITE_PORT` env var that `wails3 dev` already sets. This makes the port work regardless of which package manager (npm, pnpm, yarn, bun) is used to run the dev script. Simplify the `dev:frontend` Taskfile task to `npm run dev` — the port is now handled via vite.config, so the npm-specific `-- --port` suffix is no longer needed. Update matching task lines and add vite.config.js to the few examples that were missing one. Fixes #4652 Co-authored-by: multica-agent <github@multica.ai>
…d quote inconsistency Replace `parseInt(process.env.WAILS_VITE_PORT || "9245")` with `Number(process.env.WAILS_VITE_PORT) || 9245` across all 28 vite.config files. This avoids two review issues: - parseInt without radix; the string literal "9245" caused quote-style inconsistencies in the 3 example files (android, dev, ios) that use single quotes throughout. - Number() coerces undefined/empty/"abc" to NaN, and NaN || 9245 falls back to 9245, so the port is always a valid integer even when the env var is absent or malformed. Co-Authored-By: multica-agent <github@multica.ai>
7631e3b to
f6b6f75
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
v3/internal/templates/svelte-ts/frontend/vite.config.ts (1)
7-14:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winDuplicate
serverkey overwrites thehostsetting.The config object has two
serverproperties (lines 7-9 and 11-14). In JavaScript object literals, duplicate keys cause the last definition to completely overwrite earlier ones. This meanshost: "127.0.0.1"is lost, and the dev server may bind to a different address than intended.🔧 Proposed fix to merge server properties
- server: { - host: "127.0.0.1", - }, plugins: [svelte(), wails("./bindings")], server: { + host: "127.0.0.1", port: Number(process.env.WAILS_VITE_PORT) || 9245, strictPort: true, },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@v3/internal/templates/svelte-ts/frontend/vite.config.ts` around lines 7 - 14, The vite config has two duplicate server keys causing the host setting to be overwritten; merge them into a single server object that includes host: "127.0.0.1" alongside port and strictPort so the dev server binds correctly. In vite.config.ts update the object that contains plugins: [svelte(), wails("./bindings")] and consolidate the two server blocks into one (keeping host, port via Number(process.env.WAILS_VITE_PORT) || 9245, and strictPort: true) so the host is not lost.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@v3/internal/templates/vanilla/frontend/vite.config.js`:
- Around line 10-13: The file has two conflicting server objects so the latter
block with port/strictPort overwrote host; merge them into a single server
object that includes host: "127.0.0.1" along with port:
Number(process.env.WAILS_VITE_PORT) || 9245 and strictPort: true (i.e., ensure
the server object in vite.config.js contains host, port and strictPort together
rather than duplicated blocks).
---
Outside diff comments:
In `@v3/internal/templates/svelte-ts/frontend/vite.config.ts`:
- Around line 7-14: The vite config has two duplicate server keys causing the
host setting to be overwritten; merge them into a single server object that
includes host: "127.0.0.1" alongside port and strictPort so the dev server binds
correctly. In vite.config.ts update the object that contains plugins: [svelte(),
wails("./bindings")] and consolidate the two server blocks into one (keeping
host, port via Number(process.env.WAILS_VITE_PORT) || 9245, and strictPort:
true) so the host is not lost.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: eed206b6-866a-47bc-8ac1-e717cd064c0d
📒 Files selected for processing (36)
v3/examples/android/build/Taskfile.ymlv3/examples/android/frontend/vite.config.jsv3/examples/badge-custom/build/Taskfile.ymlv3/examples/badge-custom/frontend/vite.config.jsv3/examples/badge/build/Taskfile.ymlv3/examples/badge/frontend/vite.config.jsv3/examples/dev/frontend/vite.config.jsv3/examples/dock/build/Taskfile.ymlv3/examples/dock/frontend/vite.config.jsv3/examples/file-association/build/Taskfile.common.ymlv3/examples/file-association/frontend/vite.config.jsv3/examples/ios/build/Taskfile.ymlv3/examples/ios/frontend/vite.config.jsv3/examples/notifications/build/Taskfile.ymlv3/examples/notifications/frontend/vite.config.jsv3/internal/commands/build_assets/Taskfile.tmpl.ymlv3/internal/templates/lit-ts/frontend/vite.config.tsv3/internal/templates/lit/frontend/vite.config.jsv3/internal/templates/preact-ts/frontend/vite.config.tsv3/internal/templates/preact/frontend/vite.config.jsv3/internal/templates/qwik-ts/frontend/vite.config.tsv3/internal/templates/qwik/frontend/vite.config.jsv3/internal/templates/react-swc-ts/frontend/vite.config.tsv3/internal/templates/react-swc/frontend/vite.config.jsv3/internal/templates/react-ts/frontend/vite.config.tsv3/internal/templates/react/frontend/vite.config.jsv3/internal/templates/solid-ts/frontend/vite.config.tsv3/internal/templates/solid/frontend/vite.config.jsv3/internal/templates/svelte-ts/frontend/vite.config.tsv3/internal/templates/svelte/frontend/vite.config.jsv3/internal/templates/sveltekit-ts/frontend/vite.config.tsv3/internal/templates/sveltekit/frontend/vite.config.jsv3/internal/templates/vanilla-ts/frontend/vite.config.tsv3/internal/templates/vanilla/frontend/vite.config.jsv3/internal/templates/vue-ts/frontend/vite.config.tsv3/internal/templates/vue/frontend/vite.config.js
✅ Files skipped from review due to trivial changes (6)
- v3/examples/dock/frontend/vite.config.js
- v3/examples/badge/frontend/vite.config.js
- v3/examples/badge-custom/frontend/vite.config.js
- v3/examples/file-association/frontend/vite.config.js
- v3/examples/android/frontend/vite.config.js
- v3/examples/file-association/build/Taskfile.common.yml
🚧 Files skipped from review as they are similar to previous changes (28)
- v3/examples/android/build/Taskfile.yml
- v3/internal/templates/sveltekit-ts/frontend/vite.config.ts
- v3/examples/badge-custom/build/Taskfile.yml
- v3/internal/templates/sveltekit/frontend/vite.config.js
- v3/examples/notifications/frontend/vite.config.js
- v3/examples/ios/frontend/vite.config.js
- v3/examples/ios/build/Taskfile.yml
- v3/internal/templates/qwik/frontend/vite.config.js
- v3/internal/templates/qwik-ts/frontend/vite.config.ts
- v3/examples/badge/build/Taskfile.yml
- v3/internal/templates/solid-ts/frontend/vite.config.ts
- v3/internal/templates/vue-ts/frontend/vite.config.ts
- v3/examples/dev/frontend/vite.config.js
- v3/internal/templates/preact/frontend/vite.config.js
- v3/internal/commands/build_assets/Taskfile.tmpl.yml
- v3/examples/dock/build/Taskfile.yml
- v3/examples/notifications/build/Taskfile.yml
- v3/internal/templates/preact-ts/frontend/vite.config.ts
- v3/internal/templates/solid/frontend/vite.config.js
- v3/internal/templates/react-swc/frontend/vite.config.js
- v3/internal/templates/react/frontend/vite.config.js
- v3/internal/templates/react-ts/frontend/vite.config.ts
- v3/internal/templates/svelte/frontend/vite.config.js
- v3/internal/templates/vanilla-ts/frontend/vite.config.ts
- v3/internal/templates/lit/frontend/vite.config.js
- v3/internal/templates/react-swc-ts/frontend/vite.config.ts
- v3/internal/templates/lit-ts/frontend/vite.config.ts
- v3/internal/templates/vue/frontend/vite.config.js
Rebase auto-merge left two server: objects in 18 template vite configs — the first with host only, the second with port/strictPort — causing JS to silently discard host. Merge into a single server block with all three. Co-authored-by: multica-agent <github@multica.ai>
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
v3/internal/templates/vanilla/frontend/vite.config.js (1)
6-10: LGTM! Duplicate server blocks have been merged correctly.The past review issue has been resolved. The single
serverblock now correctly includeshost,port, andstrictPorttogether, ensuring that Vite binds to 127.0.0.1:9245 (or the value fromWAILS_VITE_PORT) and fails fast if the port is unavailable. This achieves the PR objective of making dev mode work reliably with pnpm and other package managers.Optional consistency note
The PR description example shows:
port: parseInt(process.env.WAILS_VITE_PORT || "9245")while this file uses:
port: Number(process.env.WAILS_VITE_PORT) || 9245Both patterns work correctly (invalid strings become
NaN, which triggers the fallback). If you prefer consistency across all template files, consider aligning with one pattern.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@v3/internal/templates/vanilla/frontend/vite.config.js` around lines 6 - 10, The current server config uses Number(process.env.WAILS_VITE_PORT) || 9245 for the port while other templates use parseInt(process.env.WAILS_VITE_PORT || "9245"); to make templates consistent, update the server.port expression (in the server block) to use the same parseInt pattern with a string fallback for WAILS_VITE_PORT (e.g., parseInt(process.env.WAILS_VITE_PORT || "9245")) so behavior and style match across templates.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@v3/internal/templates/vanilla/frontend/vite.config.js`:
- Around line 6-10: The current server config uses
Number(process.env.WAILS_VITE_PORT) || 9245 for the port while other templates
use parseInt(process.env.WAILS_VITE_PORT || "9245"); to make templates
consistent, update the server.port expression (in the server block) to use the
same parseInt pattern with a string fallback for WAILS_VITE_PORT (e.g.,
parseInt(process.env.WAILS_VITE_PORT || "9245")) so behavior and style match
across templates.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: a0254814-1937-45c1-87dd-fa4b255f2da6
📒 Files selected for processing (18)
v3/internal/templates/lit-ts/frontend/vite.config.tsv3/internal/templates/lit/frontend/vite.config.jsv3/internal/templates/preact-ts/frontend/vite.config.tsv3/internal/templates/preact/frontend/vite.config.jsv3/internal/templates/qwik-ts/frontend/vite.config.tsv3/internal/templates/qwik/frontend/vite.config.jsv3/internal/templates/react-swc-ts/frontend/vite.config.tsv3/internal/templates/react-swc/frontend/vite.config.jsv3/internal/templates/react-ts/frontend/vite.config.tsv3/internal/templates/react/frontend/vite.config.jsv3/internal/templates/solid-ts/frontend/vite.config.tsv3/internal/templates/solid/frontend/vite.config.jsv3/internal/templates/svelte-ts/frontend/vite.config.tsv3/internal/templates/svelte/frontend/vite.config.jsv3/internal/templates/vanilla-ts/frontend/vite.config.tsv3/internal/templates/vanilla/frontend/vite.config.jsv3/internal/templates/vue-ts/frontend/vite.config.tsv3/internal/templates/vue/frontend/vite.config.js
✅ Files skipped from review due to trivial changes (3)
- v3/internal/templates/react-swc-ts/frontend/vite.config.ts
- v3/internal/templates/vue/frontend/vite.config.js
- v3/internal/templates/vue-ts/frontend/vite.config.ts
🚧 Files skipped from review as they are similar to previous changes (12)
- v3/internal/templates/preact-ts/frontend/vite.config.ts
- v3/internal/templates/vanilla-ts/frontend/vite.config.ts
- v3/internal/templates/svelte/frontend/vite.config.js
- v3/internal/templates/lit/frontend/vite.config.js
- v3/internal/templates/qwik-ts/frontend/vite.config.ts
- v3/internal/templates/preact/frontend/vite.config.js
- v3/internal/templates/react-swc/frontend/vite.config.js
- v3/internal/templates/qwik/frontend/vite.config.js
- v3/internal/templates/react/frontend/vite.config.js
- v3/internal/templates/react-ts/frontend/vite.config.ts
- v3/internal/templates/lit-ts/frontend/vite.config.ts
- v3/internal/templates/solid-ts/frontend/vite.config.ts
4 tasks
pull Bot
pushed a commit
to Mu-L/wails
that referenced
this pull request
May 10, 2026
…igure Vite port via env var so pnpm (and other package managers) work in dev mode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Root cause
When users replace
npmwithpnpminbuild/Taskfile.yml, thedev:frontendtask runs:Unlike
npm,pnpm's--separator does not reliably forward CLI args to the underlying Vite script (the behaviour varies by pnpm version and config). Vite falls back to its default port 5173 instead of the Wails-managed port 9245. The Wails backend pollsFRONTEND_DEVSERVER_URL(http://localhost:9245) for up to 5 s, fails to connect, and aborts.Fix
wails3 devalready sets theWAILS_VITE_PORTenvironment variable before launching the watcher. This PR makes every project templatevite.configread from that env var:Because Vite merges config-file settings with CLI args (CLI wins when both are present), this is fully backward-compatible: existing
npmusers are unaffected (the CLI--portarg still overrides), whilepnpm,yarn, andbunusers get the correct port through the env var.The
dev:frontendTaskfile task is simplified tonpm run dev— the port is no longer passed via CLI args since vite.config handles it. Users can swapnpmfor any other package manager in their Taskfile and dev mode works correctly.Changes
vite.config.{ts,js}templates updated withserver.port/server.strictPortv3/internal/commands/build_assets/Taskfile.tmpl.yml—dev:frontendsimplified tonpm run devbuild/Taskfile.ymlfiles updated to matchvite.config.jsfiles updated (android, ios, dev)vite.config.jsfiles added to examples that were missing them (notifications, dock, badge, badge-custom, file-association)Testing
npmwithpnpminbuild/Taskfile.yml, runwails3 dev→ previously hangs with "unable to connect to frontend server"WAILS_VITE_PORTis read by vite.config, Vite starts on port 9245,wails3 devconnects successfullynpmusers: unaffected —npm run devreads port from vite.config as beforeCloses #4652
CC @leaanthony
Summary by CodeRabbit