feat: run assets bundler when running dev server

Author: thetutlage

src/dev_server.ts

@@ -11,13 +11,13 @@ import getPort from 'get-port'
 import picomatch from 'picomatch'
 import type tsStatic from 'typescript'
 import { type ExecaChildProcess } from 'execa'
+import type { Watcher } from '@poppinss/chokidar-ts'
 import { cliui, type Logger } from '@poppinss/cliui'
 import { EnvLoader, EnvParser } from '@adonisjs/env'
 
-import { run } from './run.js'
 import { watch } from './watch.js'
+import { run, runNode } from './run.js'
 import type { DevServerOptions } from './types.js'
-import type { Watcher } from '@poppinss/chokidar-ts'
 
 /**
  * Instance of CLIUI
@@ -45,6 +45,7 @@ export class DevServer {
   #isMetaFileWithReloadsEnabled: picomatch.Matcher
   #isMetaFileWithReloadsDisabled: picomatch.Matcher
   #watcher?: ReturnType<Watcher['watch']>
+  #assetsServerProcess?: ExecaChildProcess<string>
   #onError?: (error: any) => any
   #onClose?: (exitCode: number) => any
 
@@ -141,7 +142,7 @@ export class DevServer {
    * Starts the HTTP server
    */
   #startHTTPServer(port: string, mode: 'blocking' | 'nonblocking') {
-    this.#httpServerProcess = run(this.#cwd, {
+    this.#httpServerProcess = runNode(this.#cwd, {
       script: this.#scriptFile,
       env: { PORT: port, ...this.#options.env },
       nodeArgs: this.#options.nodeArgs,
@@ -179,6 +180,35 @@ export class DevServer {
       })
   }
 
+  /**
+   * Starts the assets bundler server. The assets bundler server process is
+   * considered as the secondary process and therefore we do not perform
+   * any cleanup if it dies.
+   */
+  #startAssetsServer() {
+    const assetsBundler = this.#options.assets
+    if (!assetsBundler?.serve) {
+      return
+    }
+
+    this.#logger.info(`starting "${assetsBundler.driver}" dev server...`)
+    this.#assetsServerProcess = run(assetsBundler.cmd, {
+      script: this.#scriptFile,
+      scriptArgs: this.#options.scriptArgs,
+    })
+
+    this.#assetsServerProcess
+      .then((result) => {
+        this.#logger.warning(
+          `"${assetsBundler.driver}" dev server closed with status code "${result.exitCode}"`
+        )
+      })
+      .catch((error) => {
+        this.#logger.warning(`unable to connect to "${assetsBundler.driver}" dev server`)
+        this.#logger.fatal(error)
+      })
+  }
+
   /**
    * Restart the development server
    */
@@ -224,26 +254,36 @@ export class DevServer {
     this.#clearScreen()
     this.#logger.info('starting HTTP server...')
     this.#startHTTPServer(String(await this.#getPort()), 'nonblocking')
+
+    this.#startAssetsServer()
   }
 
   /**
    * Start the development server in watch mode
    */
   async startAndWatch(ts: typeof tsStatic, options?: { poll: boolean }) {
-    this.#isWatching = true
-    this.#clearScreen()
-
     const port = String(await this.#getPort())
+    this.#isWatching = true
 
+    this.#clearScreen()
     this.#logger.info('starting HTTP server...')
+
     this.#startHTTPServer(port, 'blocking')
+    this.#startAssetsServer()
 
+    /**
+     * Create watcher using tsconfig.json file
+     */
     const output = watch(this.#cwd, ts, options || {})
     if (!output) {
       this.#onClose?.(1)
       return
     }
 
+    /**
+     * Storing reference to watcher, so that we can close it
+     * when HTTP server exists with error
+     */
     this.#watcher = output.chokidar
 
     /**
@@ -253,6 +293,9 @@ export class DevServer {
       this.#logger.info('watching file system for changes...')
     })
 
+    /**
+     * Cleanup when watcher dies
+     */
     output.chokidar.on('error', (error) => {
       this.#logger.warning('file system watcher failure')
       this.#logger.fatal(error)

src/run.ts

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 
-import { execaNode } from 'execa'
+import { execaNode, execa } from 'execa'
 import type { RunOptions } from './types.js'
 
 /**
@@ -24,9 +24,9 @@ const DEFAULT_NODE_ARGS = [
 ]
 
 /**
- * Runs a script as a child process and inherits the stdio streams
+ * Runs a Node.js script as a child process and inherits the stdio streams
  */
-export function run(cwd: string | URL, options: RunOptions) {
+export function runNode(cwd: string | URL, options: RunOptions) {
   const childProces = execaNode(options.script, options.scriptArgs, {
     nodeOptions: DEFAULT_NODE_ARGS.concat(options.nodeArgs),
     preferLocal: true,
@@ -40,3 +40,20 @@ export function run(cwd: string | URL, options: RunOptions) {
 
   return childProces
 }
+
+/**
+ * Runs a script as a child process and inherits the stdio streams
+ */
+export function run(cwd: string | URL, options: Omit<RunOptions, 'nodeArgs'>) {
+  const childProces = execa(options.script, options.scriptArgs, {
+    preferLocal: true,
+    windowsHide: false,
+    localDir: cwd,
+    cwd,
+    buffer: false,
+    stdio: 'inherit',
+    env: options.env,
+  })
+
+  return childProces
+}

src/types.ts

@@ -36,6 +36,17 @@ export type DevServerOptions = {
     pattern: string
     reloadServer: boolean
   }[]
+  assets?:
+    | {
+        serve: false
+        driver?: string
+        cmd?: string
+      }
+    | {
+        serve: true
+        driver: string
+        cmd: string
+      }
 }
 
 /**

tests/run.spec.ts

@@ -9,7 +9,7 @@
 
 import { pEvent } from 'p-event'
 import { test } from '@japa/runner'
-import { run } from '../src/run.js'
+import { run, runNode } from '../src/run.js'
 
 test.group('Child process', () => {
   test('run typescript file as a child process', async ({ fs, assert }) => {
@@ -20,7 +20,7 @@ test.group('Child process', () => {
     `
     )
 
-    const childProcess = run(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
+    const childProcess = runNode(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
     const payload = await pEvent(childProcess, 'message', { rejectionEvents: ['error'] })
 
     await pEvent(childProcess, 'close', { rejectionEvents: ['error'] })
@@ -37,7 +37,7 @@ test.group('Child process', () => {
     `
     )
 
-    const childProcess = run(fs.basePath, {
+    const childProcess = runNode(fs.basePath, {
       script: 'foo.ts',
       scriptArgs: ['--watch', '--foo=bar'],
       nodeArgs: [],
@@ -57,7 +57,7 @@ test.group('Child process', () => {
     `
     )
 
-    const childProcess = run(fs.basePath, {
+    const childProcess = runNode(fs.basePath, {
       script: 'foo.ts',
       scriptArgs: ['--watch', '--foo=bar'],
       nodeArgs: ['--throw-deprecation'],
@@ -85,7 +85,7 @@ test.group('Child process', () => {
     `
     )
 
-    const childProcess = run(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
+    const childProcess = runNode(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
     await pEvent(childProcess, 'close', { rejectionEvents: ['error'] })
     assert.equal(childProcess.exitCode, 0)
   })
@@ -98,7 +98,7 @@ test.group('Child process', () => {
     `
     )
 
-    const childProcess = run(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
+    const childProcess = runNode(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
 
     await pEvent(childProcess, 'close', { rejectionEvents: ['error'] })
     assert.equal(childProcess.exitCode, 1)
@@ -114,7 +114,7 @@ test.group('Child process', () => {
     `
     )
 
-    const childProcess = run(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
+    const childProcess = runNode(fs.basePath, { script: 'foo.ts', scriptArgs: [], nodeArgs: [] })
     try {
       await childProcess
     } catch {