[v3] Add port flag to dev command (#3429)

* Add `port` flag to dev command, ...

Add support for environment variable WAILS_VITE_PORT

* Check if port is already in use

* Update changelog

---------

Co-authored-by: Lea Anthony <lea.anthony@gmail.com>

mkdocs-website/docs/en/changelog.md

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add ESM exports from the bundled JS runtime script by [@fbbdev](https://github.com/fbbdev) in [#3295](https://github.com/wailsapp/wails/pull/3295)
 - Add binding generator flag for using the bundled JS runtime script instead of the npm package by [@fbbdev](https://github.com/fbbdev) in [#3334](https://github.com/wailsapp/wails/pull/3334)
 - Implement `setIcon` on linux by [@abichinger](https://github.com/abichinger) in [#3354](https://github.com/wailsapp/wails/pull/3354)
+- Add flag `-port` to dev command and support environment variable `WAILS_VITE_PORT` by [@abichinger](https://github.com/abichinger) in [#3429](https://github.com/wailsapp/wails/pull/3429)
 - Add tests for bound method calls by [@abichinger](https://github.com/abichinger) in [#3431](https://github.com/wailsapp/wails/pull/3431)
 
 ### Fixed

v3/internal/commands/dev.go

@@ -0,0 +1,53 @@
+package commands
+
+import (
+	"fmt"
+	"net"
+	"os"
+	"strconv"
+
+	"github.com/wailsapp/wails/v3/internal/flags"
+)
+
+const defaultVitePort = 9245
+const wailsVitePort = "WAILS_VITE_PORT"
+
+type DevOptions struct {
+	flags.Common
+
+	Config   string `description:"The config file including path" default:"./build/devmode.config.toml"`
+	VitePort int    `name:"port" description:"Specify the vite dev server port"`
+}
+
+func Dev(options *DevOptions) error {
+	host := "localhost"
+
+	// flag takes precedence over environment variable
+	var port int
+	if options.VitePort != 0 {
+		port = options.VitePort
+	} else if p, err := strconv.Atoi(os.Getenv(wailsVitePort)); err == nil {
+		port = p
+	} else {
+		port = defaultVitePort
+	}
+
+	// check if port is already in use
+	l, err := net.Listen("tcp", fmt.Sprintf("%s:%d", host, port))
+	if err != nil {
+		return err
+	}
+	if err = l.Close(); err != nil {
+		return err
+	}
+
+	// Set environment variable for the dev:frontend task
+	os.Setenv(wailsVitePort, strconv.Itoa(port))
+
+	// Set url of frontend dev server
+	os.Setenv("FRONTEND_DEVSERVER_URL", fmt.Sprintf("http://%s:%d", host, port))
+
+	return Watcher(&WatcherOptions{
+		Config: options.Config,
+	})
+}

v3/internal/commands/task_wrapper.go

@@ -1,19 +1,16 @@
 package commands
 
 import (
+	"os"
+
 	"github.com/pterm/pterm"
 	"github.com/wailsapp/wails/v3/internal/flags"
-	"os"
 )
 
 func Build(_ *flags.Build) error {
 	return wrapTask("build")
 }
 
-func Dev(_ *flags.Dev) error {
-	return wrapTask("dev")
-}
-
 func Package(_ *flags.Package) error {
 	return wrapTask("package")
 }

v3/internal/templates/_common/Taskfile.tmpl.yml

@@ -3,6 +3,7 @@ version: '3'
 vars:
   APP_NAME: "{{.ProjectName}}"
   BIN_DIR: "bin"
+  VITE_PORT: {{ "'{{.WAILS_VITE_PORT | default 9245}}'" }}
 
 tasks:
 
@@ -431,15 +432,12 @@ tasks:
     deps:
       - task: install:frontend:deps
     cmds:
-      - npm run dev
+      - npm run dev -- --port {{ "{{.VITE_PORT}}" }} --strictPort
 
   dev:
     summary: Runs the application in development mode
     cmds:
-      - wails3 tool watcher -config ./build/devmode.config.toml
-    env:
-      # This is the default vite dev server port
-      FRONTEND_DEVSERVER_URL: 'http://localhost:5173'
+      - wails3 dev -config ./build/devmode.config.toml -port {{ "{{.VITE_PORT}}" }}
 
   dev:reload:
     summary: Reloads the application