server.publicDir

  • Type:
type PublicDirOptions = {
  name?: string;
  copyOnBuild?: boolean;
  watch?: boolean;
};
type PublicDir = false | PublicDirOptions | PublicDirOptions[];
  • Default:
const defaultValue = {
  name: 'public',
  copyOnBuild: true,
};

By default, Rsbuild will use the public directory as the directory for serving public assets, files in this directory will be served at /.

Related document: Public Folder.

Options

name

  • Type: string
  • Default: 'public'

The name of the public directory. The value of name can be set to a relative path or an absolute path. Relative path will be resolved relative to the project root directory.

  • Relative path example:
export default {
  server: {
    publicDir: {
      name: '../some-public',
    },
  },
};
  • Absolute path example:
import path from 'node:path';

export default {
  server: {
    publicDir: {
      name: path.join(__dirname, '../some-public'),
    },
  },
};

copyOnBuild

  • Type: boolean
  • Default: true

Whether to copy files from the publicDir to the distDir on production build.

For example, disable copyOnBuild:

export default {
  server: {
    publicDir: {
      copyOnBuild: false,
    },
  },
};

Note that setting the value of copyOnBuild to false means that when you run rsbuild preview for a production preview, you will not be able to access the corresponding static resources.

TIP

During dev builds, if you need to copy some static assets to the output directory, you can use the output.copy option instead.

watch

  • Type: boolean
  • Default: false

Whether to watch the public directory and reload the page when the files change.

Setting watch to true allows the development environment to watch changes to files in the specified public directory and reload the page when the files are changed:

export default {
  server: {
    publicDir: {
      watch: true,
    },
  },
};

Note that the watch option is only valid in the development build. If dev.hmr and dev.liveReload are both set to false, watch will be ignored.

Multiple Directories

The server.publicDir can be configured as an array, allowing you to serve multiple directories as static assets folders:

export default {
  server: {
    publicDir: [
      {
        name: 'public',
      },
      {
        name: 'assets',
        watch: false,
      },
    ],
  },
};

Disabled

You can set publicDir to false to disable the static assets serving:

export default {
  server: {
    publicDir: false,
  },
};