Skip to content

feat(frontend): add configurable dev server port and DevTools #448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
steven-pribilinskiy wants to merge 1 commit into from
Closed

feat(frontend): add configurable dev server port and DevTools #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions apps/frontend/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,9 @@

# Node environment (automatically set by npm scripts)
# NODE_ENV=development

# Vite dev server port (default: 5173)
# VITE_DEV_PORT=5173

# Auto-open Chrome DevTools in dev mode (default: true)
# OPEN_DEVTOOLS=false
Comment on lines +46 to +50
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Documentation is clear and matches implementation.

The environment variable documentation accurately describes the defaults and usage. The examples correctly show how to configure the dev server port and disable DevTools.

Optional enhancement: Consider adding a note that OPEN_DEVTOOLS is case-sensitive (only lowercase 'false' disables DevTools):

 # Auto-open Chrome DevTools in dev mode (default: true)
+# Note: Must be exactly 'false' (lowercase) to disable
 # OPEN_DEVTOOLS=false
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# Vite dev server port (default: 5173)
# VITE_DEV_PORT=5173
# Auto-open Chrome DevTools in dev mode (default: true)
# OPEN_DEVTOOLS=false
# Vite dev server port (default: 5173)
# VITE_DEV_PORT=5173
# Auto-open Chrome DevTools in dev mode (default: true)
# Note: Must be exactly 'false' (lowercase) to disable
# OPEN_DEVTOOLS=false
🤖 Prompt for AI Agents 
In apps/frontend/.env.example around lines 46 to 50, add a short note that the
OPEN_DEVTOOLS value is case-sensitive and only the lowercase string 'false' will
disable DevTools; update the comment above the example to explicitly mention
this behavior so users know to use exactly "false" (lowercase) rather than
"False" or "FALSE".

4 changes: 4 additions & 0 deletions apps/frontend/electron.vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import { config as loadEnvFile } from 'dotenv';

loadEnvFile({ quiet: true });

export default defineConfig({
main: {
Expand Down Expand Up @@ -55,6 +58,7 @@ export default defineConfig({
}
},
server: {
port: Number(process.env.VITE_DEV_PORT) || 5173,
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Port parsing handles common cases well.

The Number() approach correctly handles most scenarios:

  • Invalid strings → NaN → fallback to 5173
  • Empty/undefined → fallback to 5173
  • Valid ports → parsed correctly

The implementation works well for development configuration. If you want to be defensive against edge cases (floats, out-of-range ports), you could add validation, but it's not critical since Vite will fail clearly if the port is invalid.

Optional: Add port validation for edge cases 
     server: {
-      port: Number(process.env.VITE_DEV_PORT) || 5173,
+      port: (() => {
+        const port = Number(process.env.VITE_DEV_PORT);
+        if (!port || !Number.isInteger(port) || port < 1 || port > 65535) {
+          return 5173;
+        }
+        return port;
+      })(),

This handles: non-integers (5173.5), out-of-range values, and ensures the port is valid before Vite starts.

🤖 Prompt for AI Agents 
In apps/frontend/electron.vite.config.ts around line 61, the current port uses
Number(process.env.VITE_DEV_PORT) || 5173 which mostly works but can allow
floats or out-of-range values; change to parse the env var with parseInt, check
Number.isInteger(parsed) and ensure parsed is within 1–65535, and if any check
fails fall back to 5173 so Vite always receives a valid integer port.

watch: {
// Ignore directories to prevent HMR conflicts during merge operations
// Using absolute paths and broader patterns
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@
"@vitejs/plugin-react": "^5.1.2",
"autoprefixer": "^10.4.22",
"cross-env": "^10.1.0",
"dotenv": "^17.2.3",
"electron": "39.2.7",
"electron-builder": "^26.0.12",
"electron-vite": "^5.0.0",
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/main/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function createWindow(): void {
}

// Open DevTools in development
if (is.dev) {
if (is.dev && process.env.OPEN_DEVTOOLS !== 'false') {
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider case-insensitive and additional falsy value support.

The current check process.env.OPEN_DEVTOOLS !== 'false' is case-sensitive and only recognizes the exact string 'false'. Common variations like 'False', 'FALSE', '0', or 'no' will still open DevTools, which may be unexpected.

🔎 Optional improvement for more flexible handling 
-  if (is.dev && process.env.OPEN_DEVTOOLS !== 'false') {
+  if (is.dev && !['false', '0', 'no'].includes(process.env.OPEN_DEVTOOLS?.toLowerCase() ?? '')) {
     mainWindow.webContents.openDevTools({ mode: 'right' });
   }

This handles false, False, FALSE, 0, no, No, NO as falsy values.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (is.dev && process.env.OPEN_DEVTOOLS !== 'false') {
if (is.dev && !['false', '0', 'no'].includes(process.env.OPEN_DEVTOOLS?.toLowerCase() ?? '')) {
🤖 Prompt for AI Agents 
In apps/frontend/src/main/index.ts at line 96, the environment check
process.env.OPEN_DEVTOOLS !== 'false' is case-sensitive and only treats the
exact string 'false' as falsy; update it to normalize the env value (e.g.,
toLowerCase and trim) and compare against a set of falsy tokens like 'false',
'0', 'no', '' (or undefined) so values such as 'False', 'FALSE', '0', or 'no'
are treated as falsy; implement by reading the env into a variable, normalizing,
and checking membership in a predefined falsy array before deciding to open
DevTools.

mainWindow.webContents.openDevTools({ mode: 'right' });
}

Expand Down