feat: warn when dev server listens on a restricted port

If the port assigned to the Vite dev server is categorised as restricted
by browsers (e.g. port 6000), a warning is now displayed in the console
to prevent accessibility issues.

.gitignore

@@ -0,0 +1,110 @@
+### macOS
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Linux
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# Metadata left by Dolphin file manager, which comes with KDE Plasma
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+# Log files created by default by the nohup command
+nohup.out
+
+### Windows
+
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+### JetBrains IDE
+# Covers JetBrains IDEs: IntelliJ, GoLand, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea
+
+# Gradle and Maven with auto-import
+*.iml
+*.ipr
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based HTTP Client
+http-client.private.env.json
+
+/tmp
+/out-tsc
+
+/node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/.pnp
+.pnp.js
+
+.vscode/*

.prettierrc.yaml

@@ -0,0 +1,24 @@
+printWidth: 100
+tabWidth: 2
+useTabs: false
+semi: false
+singleQuote: false
+quoteProps: as-needed
+jsxSingleQuote: false
+trailingComma: es5
+bracketSpacing: true
+bracketSameLine: true
+arrowParens: always
+#rangeStart: 0
+#rangeEnd: n
+#parser:
+#filepath:
+#requirePragma: false
+#insertPragma: false
+#proseWrap: preserve
+htmlWhitespaceSensitivity: css
+#vueIndentScriptAndStyle: false
+endOfLine: lf
+#embeddedLanguageFormatting: auto
+# Enforce single attribute per line in HTML, Vue and JSX
+#singleAttributePerLine: false

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "vite-plugin-port-checker",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.3",
+    "typescript": "^5.5.3"
+  },
+  "private": true
+}

pnpm-lock.yaml

@@ -0,0 +1,34 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      prettier:
+        specifier: ^3.8.3
+        version: 3.8.3
+      typescript:
+        specifier: ^5.5.3
+        version: 5.9.3
+
+packages:
+
+  prettier@3.8.3:
+    resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+snapshots:
+
+  prettier@3.8.3: {}
+
+  typescript@5.9.3: {}

src/index.ts

@@ -0,0 +1,40 @@
+import { Plugin } from "vite"
+
+/**
+ * A list of ports usually blocked by browsers (e.g. Chrome, Firefox).
+ * Reference: https://fetch.spec.whatwg.org/#port-blocking
+ */
+const RESTRICTED_PORTS = new Set([
+  1, 7, 9, 11, 13, 15, 17, 19, 20, 21, 22, 23, 25, 37, 42, 43, 53, 77, 79, 87, 95, 101, 102, 103,
+  104, 109, 110, 111, 113, 115, 117, 119, 123, 135, 139, 143, 179, 389, 465, 512, 513, 514, 515,
+  526, 530, 531, 532, 540, 556, 563, 587, 601, 636, 993, 995, 2049, 3659, 4045, 6000, 6665, 6666,
+  6667, 6668, 6669,
+])
+
+function checkRestrictedPortPlugin(): Plugin {
+  return {
+    name: "vite-plugin-port-checker",
+    configureServer(server) {
+      server.httpServer?.once("listening", () => {
+        const address = server.httpServer?.address()
+
+        if (address && typeof address !== "string") {
+          const port = address.port
+
+          if (RESTRICTED_PORTS.has(port)) {
+            // Using British English for the console warning messages
+            console.warn(
+              `\x1b[33m%s\x1b[0m`, // Yellow colour output
+              `\n[Warning] The current listening port ${port} is categorised as a restricted port by most browsers.`
+            )
+            console.warn(
+              `This may prevent you from accessing the application. Please consider changing the port in your 'vite.config.ts' or 'vite.config.js' via 'server.port'.\n`
+            )
+          }
+        }
+      })
+    },
+  }
+}
+
+export default checkRestrictedPortPlugin

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}