@nrwl/viteSee schema

@nrwl/vite:configuration

Configure a project to use Vite.js.

This generator is used for converting an existing React or Web project to use Vite.js and the @nrwl/vite executors.

It will change the build and serve targets to use the @nrwl/vite executors for serving and building the application. If you choose so, it will also change your test target to use the @nrwl/vite:test executor. It will create a vite.config.ts file at the root of your project with the correct settings, or if there's already a vite.config.ts file, it will modify it to include the correct settings.

Your code will be modified!

This generator will modify your code, so make sure to commit your changes before running it.

nx g @nrwl/vite:configuration

When running this generator, you will be prompted to provide the following:

  • The project, as the name of the project you want to generate the configuration for.
  • The uiFramework you want to use. Supported values are: react and none.

You must provide a project and a uiFramework for the generator to work.

You may also pass the includeVitest flag. This will also change your test target to use the @nrwl/vite:test executor, and configure your project for testing with Vitest, by adding the test configuration in your vite.config.ts file.

Converting custom (specific) targets

By default, the @nrwl/vite:configuration generator will search your project's configuration to find the targets for serving, building, and testing your project, and it will attempt to convert these targets to use the @nrwl/vite executors.

Your targets for building, serving and testing may not be named build, serve and test. Nx will try to infer the correct targets to convert, and it will attempt to convert the first one it finds for each of these actions if you have more than one. If you have more than one target for serving, building, or testing your project, you can pass the --serveTarget, --buildTarget, and --testTarget flags to the generator, to tell Nx specifically which targets to convert.

Nx will determine if the targets you provided (or the ones it inferred) are valid and can be converted to use the @nrwl/vite executors. If the targets are not valid, the generator will fail. If no targets are found - or recognized to be either supported or unsupported - Nx will ask you whether you want to convert your project anyway. If you choose to do so, Nx will configure your project to use Vite.js, creating new targets for you, and creating or modifying your vite.config.ts file. You can then test on your own if the result works or not, and modify the configuration as needed. It's suggested that if Nx does not recognize your targets automatically, you commit your changes before running the generator, so you can revert the changes if needed.

Projects that can be converted to use the @nrwl/vite executors

Usually, React and Web projects generated with the @nrwl/react and the @nrwl/web generators can be converted to use the @nrwl/vite executors without any issues.

The list of executors for building, testing and serving that can be converted to use the @nrwl/vite executors is:

Supported build executors

  • @nxext/vite:build
  • @nrwl/js:babel
  • @nrwl/js:swc
  • @nrwl/webpack:webpack
  • @nrwl/rollup:rollup
  • @nrwl/web:rollup

Supported serve executors

  • @nxext/vite:dev
  • @nrwl/webpack:dev-server

Supported test executors

  • @nrwl/jest:jest
  • @nxext/vitest:vitest

Unsupported executors

We cannot guarantee that the projects using the following executors for either building, testing or serving will work correctly when converted to use the @nrwl/vite executors. If you have a project that uses one of these executors, you can try to configure it to use the @nrwl/vite executors manually, but it may not work properly.

  • @nrwl/angular:ng-packagr-lite
  • @nrwl/angular:package
  • @nrwl/angular:webpack-browser
  • @angular-devkit/build-angular:browser
  • @angular-devkit/build-angular:dev-server
  • @nrwl/esbuild:esbuild
  • @nrwl/react-native:start
  • @nrwl/next:build
  • @nrwl/next:server
  • @nrwl/js:tsc

You can read more in the Vite package overview page.

Examples

Change a React app to use Vite

nx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest

This will change the my-react-app project to use the @nrwl/vite executors for building, serving and testing the application.

Change a Web app to use Vite

nx g @nrwl/vite:configuration --project=my-web-app --uiFramework=none --includeVitest

This will change the my-web-app project to use the @nrwl/vite executors for building, serving and testing the application.

Change only my custom provided targets to use Vite

nx g @nrwl/vite:configuration --project=my-react-app --uiFramework=react --includeVitest --buildTarget=my-build --serveTarget=my-serve --testTarget=my-test

This will change the my-build, my-serve and my-test targets to use the @nrwl/vite executors for building, serving and testing the application, even if you have other targets for these actions as well.

Usage

nx generate configuration ...
nx g config ... #same

By default, Nx will search for configuration in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

nx g @nrwl/vite:configuration ...

Show what will be generated without writing to disk:

nx g configuration ... --dry-run

Options

buildTarget

string

The build target of the project to be transformed to use the @nrwl/vite:build executor.

includeLib

Hidden
boolean

Add a library build option and skip the server option.

includeVitest

boolean

Use vitest for the test suite.

newProject

Hidden
boolean
Default: false

Is this a new project?

project

string

The name of the project.

serveTarget

string

The serve target of the project to be transformed to use the @nrwl/vite:dev-server and @nrwl/vite:preview-server executors.

testTarget

string

The test target of the project to be transformed to use the @nrwl/vite:test executor.

uiFramework

string
Default: none
Accepted values: react, none

UI Framework to use for Vite.