Dev Config#

This section describes some dev configurations in Modern.js Builder.

dev.assetPrefix#

• Type: boolean | string
• Default: '/'

Set the URL prefix of static assets in the development environment.

assetPrefix will affect the URLs of most of the static assets, including JavaScript files, CSS files, images, videos, etc. If an incorrect value is specified, you'll receive 404 errors while loading these resources.

This config is only used in the development environment. In the production environment, please use the output.assetPrefix to set the URL prefix.

Boolean Type#

If assetPrefix is set to true, the URL prefix will be http://localhost:port/:

export default {
  dev: {
    assetPrefix: true,
  },
};

The script URL will be:

<script defer src="http://localhost:8080/static/js/main.js"></script>

If assetPrefix is set to false or not set, / is used as the default value.

String type#

When the value of assetPrefix is string type, the string will be used as the URL prefix:

export default {
  dev: {
    assetPrefix: 'http://example.com/assets/',
  },
};

The script URL will be:

<script defer src="http://example.com/assets/static/js/main.js"></script>

Differences from Native Configuration#

dev.assetPrefix corresponds to the following native configurations:

• output.publicPath configuration in webpack.
• output.publicPath configuration in Rspack.

The differences from the native configuration are as follows:

• dev.assetPrefix only takes effect in the development environment.

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

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

dev.beforeStartUrl#

• Type: () => Promise<void> | void
• Default: undefined

dev.beforeStartUrl is used to execute a callback function before opening the startUrl, this config needs to be used together with dev.startUrl.

export default {
  dev: {
    startUrl: true,
    beforeStartUrl: async () => {
      await doSomeThing();
    },
  },
};

dev.hmr#

• Type: boolean
• Default: true

Whether to enable Hot Module Replacement.

If hmr is set to false, the HMR and react-refresh will no longer work.

export default {
  dev: {
    hmr: false,
  },
};

dev.host#

• Type: string
• Default: 0.0.0.0

Specify the host that the dev server listens to.

By default, the dev server will listen to 0.0.0.0, which means listening to all network interfaces, including localhost and public network addresses.

If you want the dev server to listen only on localhost, you can set it to:

export default {
  dev: {
    host: 'localhost',
  },
};

dev.https#

• Type: boolean | { key: string; cert: string }
• Default: false

After configuring this option, you can enable HTTPS Dev Server, and disabling the HTTP Dev Server.

HTTP:

> Local: http://localhost:8080/
  > Network: http://192.168.0.1:8080/

HTTPS:

> Local: https://localhost:8080/
  > Network: https://192.168.0.1:8080/

Automatically generate certificates#

You can directly set https to true, Builder will automatically generate the HTTPS certificate based on devcert.

When using this method, you need to manually install the devcert dependency in your project:

# npm
npm install devcert@1.2.2 -D

# yarn
yarn add devcert@1.2.2 -D

# pnpm
pnpm add devcert@1.2.2 -D

Then configure dev.https to true:

export default {
  dev: {
    https: true,
  },
};

The devcert has some limitations, it does not currently support IP addresses yet.

Manually set the certificate#

You can also manually pass in the certificate and the private key required in the dev.https option. This parameter will be directly passed to the createServer method of the https module in Node.js.

For details, please refer to https.createServer.

import fs from 'fs';

export default {
  dev: {
    https: {
      key: fs.readFileSync('certificates/private.pem'),
      cert: fs.readFileSync('certificates/public.pem'),
    },
  },
};

dev.port#

• Type: number
• Default: 8080

Specify a port number for Dev Server to listen.

By default, Dev Server listens on port 8080 and automatically increments the port number when the port is occupied.

Example#

Set the port to 3000:

export default {
  dev: {
    port: 3000,
  },
};

dev.progressBar#

• Type:

type ProgressBar =
  | boolean
  | {
      id?: string;
    };

• Default: true

Whether to display progress bar during compilation.

export default {
  dev: {
    progressBar: false,
  },
};

If you need to modify the text displayed on the left side of the progress bar, you can set the id option:

export default {
  dev: {
    progressBar: {
      id: 'Some Text',
    },
  },
};

dev.startUrl#

• Type: boolean | string | string[] | undefined
• Default: undefined

dev.startUrl is used to set the URL of the page that automatically opens in the browser when Dev Server starts.

By default, no page will be opened.

You can set it to the following values:

export default {
  dev: {
    // Open the project's default preview page, equivalent to `http://localhost:<port>`
    startUrl: true,
    // Open the specified page
    startUrl: 'http://localhost:8080',
    // Open multiple pages
    startUrl: ['http://localhost:8080', 'http://localhost:8080/about'],
  },
};

Port placeholder#

Since the port number may change, you can use the <port> placeholder to refer to the current port number, and Builder will automatically replace the placeholder with the actual listening port number.

export default {
  dev: {
    startUrl: 'http://localhost:<port>/home',
  },
};

Open the specified browser#

On MacOS, you can open the specified browser when Dev Server starts, by set environment variable BROWSER, support values:

• Google Chrome Canary
• Google Chrome Dev
• Google Chrome Beta
• Google Chrome
• Microsoft Edge
• Brave Browser
• Vivaldi
• Chromium