feat: use a random VITE_HMR_PORT and inject DEV_MODE env var when running dev server

Author: thetutlage

src/dev_server.ts

@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 
+import getRandomPort from 'get-port'
 import { cliui } from '@poppinss/cliui'
 import type Hooks from '@poppinss/hooks'
 import prettyHrtime from 'pretty-hrtime'
@@ -95,6 +96,12 @@ export class DevServer {
    */
   #stickyPort!: string
 
+  /**
+   * The stickyHmrPort is set by the start and the startAndWatch methods
+   * and we will continue to use that port during restart
+   */
+  #stickyHmrPort!: string
+
   /**
    * The mode is set by the start and the startAndWatch methods
    */
@@ -166,7 +173,7 @@ export class DevServer {
       this.#httpServer.removeAllListeners()
       this.#httpServer.kill('SIGKILL')
     }
-    await this.#startHTTPServer(this.#stickyPort)
+    await this.#startHTTPServer(this.#stickyPort, this.#stickyHmrPort)
   }, 'restartHTTPServer')
 
   /**
@@ -652,6 +659,7 @@ export class DevServer {
 
     this.#indexGenerator = new IndexGenerator(this.cwdPath, this.ui.logger)
     this.#stickyPort = String(await getPort(this.cwd))
+    this.#stickyHmrPort = String(getRandomPort({ port: 24678 }))
     this.#fileSystem = new FileSystem(this.cwdPath, tsConfig, this.options)
 
     this.ui.logger.info('loading hooks...')
@@ -695,7 +703,7 @@ export class DevServer {
    * @example
    * await devServer.#startHTTPServer('3333')
    */
-  async #startHTTPServer(port: string) {
+  async #startHTTPServer(port: string, hmrPort: string) {
     /**
      * Execute the registered before creating the child process. This will allow
      * hooks to modify the options before they are used.
@@ -709,7 +717,7 @@ export class DevServer {
        */
       this.#httpServer = runNode(this.cwd, {
         script: this.scriptFile,
-        env: { PORT: port, ...this.options.env },
+        env: { PORT: port, VITE_HMR_PORT: hmrPort, DEV_MODE: 'true', ...this.options.env },
         nodeArgs: this.options.nodeArgs,
         reject: true,
         scriptArgs: this.options.scriptArgs,
@@ -854,7 +862,7 @@ export class DevServer {
     }
 
     this.ui.logger.info('starting HTTP server...')
-    await this.#startHTTPServer(this.#stickyPort)
+    await this.#startHTTPServer(this.#stickyPort, this.#stickyHmrPort)
 
     if (this.#mode !== 'hmr') {
       return
@@ -894,7 +902,7 @@ export class DevServer {
     }
 
     this.ui.logger.info('starting HTTP server...')
-    await this.#startHTTPServer(this.#stickyPort)
+    await this.#startHTTPServer(this.#stickyPort, this.#stickyHmrPort)
 
     this.#watcher = this.#createWatcher({ poll: options?.poll })
     this.#watcher.on('add', (filePath) => {

src/test_runner.ts

@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 
+import getRandomPort from 'get-port'
 import { join } from 'node:path/posix'
 import { cliui } from '@poppinss/cliui'
 import type Hooks from '@poppinss/hooks'
@@ -65,6 +66,12 @@ export class TestRunner {
    */
   #stickyPort!: string
 
+  /**
+   * The stickyHmrPort is set by the start and the startAndWatch methods
+   * and we will continue to use that port during restart
+   */
+  #stickyHmrPort!: string
+
   /**
    * Reference to chokidar watcher
    */
@@ -113,7 +120,7 @@ export class TestRunner {
       this.#testsProcess.removeAllListeners()
       this.#testsProcess.kill('SIGKILL')
     }
-    await this.#runTests(this.#stickyPort, filters)
+    await this.#runTests(this.#stickyPort, this.#stickyHmrPort, filters)
   }, 'reRunTests')
 
   /**
@@ -242,7 +249,7 @@ export class TestRunner {
    * @param port - The port number to set in the environment
    * @param filters - Optional test filters to apply for this run
    */
-  async #runTests(port: string, filters?: TestRunnerOptions['filters']) {
+  async #runTests(port: string, hmrPort: string, filters?: TestRunnerOptions['filters']) {
     /**
      * Execute the registered before creating the child process. This will allow
      * hooks to modify the options before they are used.
@@ -265,7 +272,7 @@ export class TestRunner {
       this.#testsProcess = runNode(this.cwd, {
         script: this.scriptFile,
         reject: true,
-        env: { PORT: port, ...this.options.env },
+        env: { PORT: port, VITE_HMR_PORT: hmrPort, ...this.options.env },
         nodeArgs: this.options.nodeArgs,
         scriptArgs,
       })
@@ -400,6 +407,7 @@ export class TestRunner {
    */
   async run() {
     this.#stickyPort = String(await getPort(this.cwd))
+    this.#stickyHmrPort = String(getRandomPort({ port: 24678 }))
     this.#indexGenerator = new IndexGenerator(this.cwdPath, this.ui.logger)
 
     this.#clearScreen()
@@ -418,7 +426,7 @@ export class TestRunner {
     await this.#indexGenerator.generate()
 
     this.ui.logger.info('booting application to run tests...')
-    await this.#runTests(this.#stickyPort)
+    await this.#runTests(this.#stickyPort, this.#stickyHmrPort)
   }
 
   /**
@@ -440,6 +448,7 @@ export class TestRunner {
     }
 
     this.#stickyPort = String(await getPort(this.cwd))
+    this.#stickyHmrPort = String(getRandomPort({ port: 24678 }))
     this.#indexGenerator = new IndexGenerator(this.cwdPath, this.ui.logger)
 
     this.#fileSystem = new FileSystem(this.cwdPath, tsConfig, {
@@ -476,7 +485,7 @@ export class TestRunner {
     await this.#indexGenerator.generate()
 
     this.ui.logger.info('booting application to run tests...')
-    await this.#runTests(this.#stickyPort)
+    await this.#runTests(this.#stickyPort, this.#stickyHmrPort)
 
     /**
      * Create watcher