#Interface: Dev

The Dev option is used to control the behavior related with development. Including: HMR, DevServer, etc.

#Properties

#assetPrefix?

optional assetPrefix?: string | boolean

The Dev.assetPrefix is used to set the URL prefix for static assets during development.

#Default Value

undefined

#Remarks

During rspeedy dev, if this option is not set to false, the dev plugin normalizes it to http://<detected-host>:<port>/ and appends server.base when configured.

The functionality of Dev.assetPrefix is basically the same as the output.publicPath config in Rspack. With the following differences:

• dev.assetPrefix only takes effect during development.

• dev.assetPrefix automatically appends a trailing / by default.

• The value of dev.assetPrefix is written to the process.env.ASSET_PREFIX environment variable.

#Examples

If dev.assetPrefix is set to true, the URL prefix will be http://<host>:<port>/:

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    assetPrefix: true,
  },
})

If dev.assetPrefix is set to a string, the value will be used as a prefix and automatically appended to the static resource URL.

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    assetPrefix: 'https://example.com/assets/',
  },
})

The port number that Rspeedy server listens on may change. For example, if the port is in use, Rspeedy will automatically increment the port number until it finds an available port.

To avoid dev.assetPrefix becoming invalid due to port changes, you can use one of the following methods:

• Enable server.strictPort.

• Use the <port> placeholder to refer to the current port number. Rspeedy will replace the placeholder with the actual port number it is listening on.

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    assetPrefix: 'https://example.com:<port>/assets/',
  },
})

#hmr?

optional hmr?: boolean

Whether to enable Hot Module Replacement (HMR).

#Default Value

true

#Remarks

By default, Rspeedy uses HMR as the preferred method to update modules. If HMR is disabled or cannot be used in certain scenarios, it will automatically fallback to Dev.liveReload.

To completely disable both HMR and live reload, set both dev.hmr and dev.liveReload to false. Then, no WebSocket requests will be made to the dev server on the page, and the page will not automatically refresh when file changes.

#Examples

Disable HMR:

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    hmr: false,
  },
})

Disable both HMR and live reload:

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    hmr: false,
    liveReload: false,
  },
})

#liveReload?

optional liveReload?: boolean

Whether to enable live reload functionality.

#Default Value

true

#Remarks

Live reload is used as a fallback when Dev.hmr is disabled or cannot be used in certain scenarios. When enabled, the page will automatically refresh when source files are changed.

To completely disable both HMR and live reload, set both dev.hmr and dev.liveReload to false. Then, no WebSocket requests will be made to the dev server on the page, and the page will not automatically refresh when file changes.

#Examples

Disable live reload:

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    liveReload: false,
  },
})

Disable both HMR and live reload:

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    hmr: false,
    liveReload: false,
  },
})

#progressBar?

optional progressBar?: boolean | { id?: string; }

Whether to display progress bar during compilation.

#Default Value

false

#Examples

Enable the progress bar.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    progressBar: true,
  },
})

Modify the progress bar id

To modify the text displayed on the left side of the progress bar, set the id option:

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    progressBar: {
      id: 'Some Text'
    },
  },
})

#watchFiles?

optional watchFiles?: WatchFiles | WatchFiles[]

Watch specified files and directories for changes. When a file change is detected, it can trigger a page reload or restart the dev server.

#Default Value

undefined

#Examples

• Specify the files and directories watched for changes.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    watchFiles: {
      paths: ['src/**', 'public/**'],
    },
  },
})

• Use chokidar options for watching.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    watchFiles: {
      paths: ['src/**', 'public/**'],
      options: { usePolling: false },
    },
  },
})

#writeToDisk?

optional writeToDisk?: boolean | ((filename: string) => boolean)

Lynx Default Changed

Used to control whether the build artifacts of the development environment are written to the disk.

#Default Value

true

#Remarks

This is bypassed to `webpack-dev-middleware`.

Setting writeToDisk: true won't change the behavior of the webpack-dev-middleware, and bundle files accessed through the browser will still be served from memory.

This option also accepts a Function value, which can be used to filter which files are written to disk.

The function follows the same premise as Array#filter in which a return value of false will not write the file, and a return value of true will write the file to disk.

#Example

// lynx.config.ts
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    writeToDisk: (filePath) => /superman\.css$/.test(filePath),
  },
})