@nx/vite:build

Builds a Vite.js application for production.

Options can be configured in project.json when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/reference/project-configuration#targets.

project.json:

//...
"my-app": {
    "targets": {
        //...
        "build": {
            "executor": "@nx/vite:build",
            //...
            //...
            "options": {
                "outputPath": "dist/apps/my-app"
            },
                //...
            }
        },
    }
}
Nx 15 and lower use @nrwl/ instead of @nx/

nx serve my-app

Examples

Nx will automatically look in the root of your application for a vite.config.ts (or a vite.config.js) file. If you want to use a different path, you can set it in your project.json file, in the build target options:

//...
"my-app": {
    "targets": {
        //...
        "build": {
            "executor": "@nx/vite:build",
            //...
            "options": {
                "outputPath": "dist/apps/my-app",
                "configFile": "apps/my-app/vite.config.other-path.ts"
            },
            "configurations": {
                ...
            }
        },
    }
}
Nx 15 and lower use @nrwl/ instead of @nx/

or even

//...
"my-app": {
    "targets": {
        //...
        "build": {
            "executor": "@nx/vite:build",
            //...
            "options": {
                "outputPath": "dist/apps/my-app",
                "configFile": "vite.config.base.ts"
            },
            "configurations": {
                ...
            }
        },
    }
}
Nx 15 and lower use @nrwl/ instead of @nx/

Options playground

Try out this interactive editor of the configuration object. Values are validated as you type and hovering over labels will give you more information.

Examples

These buttons show the config object for specific common tasks.

Options

outputPath

string

The output path of the generated files.

base

baseHref

string

Base public path when served in development or production.

configFile

string

The name of the Vite.js configuration file.

cssCodeSplit

boolean

Enable/disable CSS code splitting. When enabled, CSS imported in async chunks will be inlined into the async chunk itself and inserted when the chunk is loaded.

emptyOutDir

boolean

Default: true

When set to false, outputPath will not be emptied during the build process.

fileReplacements

Array<fileReplacements items >

Default: []

Replace files with other files in the build.

force

boolean

Force the optimizer to ignore the cache and re-bundle

generatePackageJson

boolean

Generate a package.json for the build output.

includeDevDependenciesInPackageJson

boolean

Include devDependencies in the generated package.json.

logLevel

string

Accepted values: info, warn, error, silent

Adjust console output verbosity.

minify

oneOf [boolean, string]

Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.

manifest

oneOf [boolean, string]

Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.

mode

string

Mode to run the build in.

sourcemap

oneOf [boolean, string]

Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.

ssrManifest

oneOf [boolean, string]

When set to true, the build will also generate an SSR manifest for determining style links and asset preload directives in production. When the value is a string, it will be used as the manifest file name.

ssr

oneOf [boolean, string]

Produce SSR-oriented build. The value can be a string to directly specify the SSR entry, or true, which requires specifying the SSR entry via rollupOptions.input.

target

string

Browser compatibility target for the final bundle. For more info: https://vitejs.dev/config/build-options.html#build-target

watch

oneOf [boolean, object: object]

Default: false

Enable re-building when files change.