Configuring Wite #

When running wite from the command line, Wite will automatically try to resolve a config file named wite.config.js inside project root.

The most basic config file looks like this:

// wite.config.js
export default {
  // config options
}

Note Wite supports using ES modules syntax in the config file even if the project is not using native Node ESM via type: "module". In this case, the config file is auto pre-processed before load.

You can also explicitly specify a config file to use with the --config CLI option (resolved relative to cwd):

wite --config my-config.js

const __filename = 'value' // SyntaxError: Identifier '__filename' has already been declared

const func = () => {
  const __filename = 'value' // no error
}

Config Intellisense #

Since Wite ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:

/** @type {import('wite').UserConfig} */
export default {
  // ...
}

Alternatively, you can use the defineConfig helper which should provide intellisense without the need for jsdoc annotations:

import { defineConfig } from 'wite'

export default defineConfig({
  // ...
})

Wite also directly supports TS config files. You can use wite.config.ts with the defineConfig helper as well.

Conditional Config #

If the config needs to conditionally determine options based on the command (dev/serve or build), the mode being used, or if it is an SSR build (ssrBuild), it can export a function instead:

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev specific config
    }
  } else {
    // command === 'build'
    return {
      // build specific config
    }
  }
})

It is important to note that in Wite's API the command value is serve during dev (in the cli wite, wite dev, and wite serve are aliases), and build when building for production (wite build).

ssrBuild is experimental. It is only available during build instead of a more general ssr flag because, during dev, the config is shared by the single server handling SSR and non-SSR requests. The value could be undefined for tools that don't have separate commands for the browser and SSR build, so use explicit comparison against true and false.

Async Config #

If the config needs to call async function, it can export a async function instead:

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // wite config
  }
})

Environment Variables #

Environmental Variables can be obtained from process.env as usual.

Note that Wite doesn't load .env files by default as the files to load can only be determined after evaluating the Wite config, for example, the root and envDir options affects the loading behaviour. However, you can use the exported loadEnv helper to load the specific .env file if needed.

import { defineConfig, loadEnv } from 'wite'

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `WITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // wite config
    define: {
      __APP_ENV__: env.APP_ENV
    }
  }
})