@nrwl/vite

The Nx plugin for Vite and Vitest.

Early release plugin

This Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022.

Vite.js is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Why should you use this plugin?

Instant dev server start
Lightning fast Hot-Module Reloading
Fast builds using Vite.
Vite-powered tests with smart and instant watch mode

Read more about Vite and Vitest in the Vite documentation.

Setting up Vite

To create a new workspace, run npx create-nx-workspace@latest --preset=vite.

Add Vite to an existing workspace

To add the Vite plugin to an existing workspace, run the following:

npm install -D @nrwl/vite

Initialize Vite.js

After you install the plugin, you need to initialize Vite.js. You can do this by running the init executor. This executor will make sure to install all the necessary dependencies.

nx g @nrwl/vite:init

Choosing a framework

You will notice that the executor will ask you of the framework you are planning to use. This is just to make sure that the right dependencies are installed. You can always install manually any other dependencies you need.

Using Vite.js in your applications

You can use the @nrwl/vite:dev-server and the @nrwl/vite:build executors to serve and build your applications using Vite.js. To do this, you need to make a few adjustments to your application.

Check the example:/mandarini/nx-recipes/tree/feat/react-vite-recipe/vite-example

1. Change the executors in your `project.json`

The `serve` target

In your app's project.json file, change the executor of your serve target to use @nrwl/vite:dev-server and set it up with the following options:

//...
"my-app": {
    "targets": {
        //...
        "serve": {
            "executor": "@nrwl/vite:dev-server",
            "defaultConfiguration": "development",
            "options": {
                "buildTarget": "my-app:build",
                "port": 4200,
            },
            "configurations": {
                ...
            }
        },
    }
}

Other options

You do not have to set the port here, necessarily. You can also specify the port in the vite.config.ts file (see Step 2 below). The same goes for all other Vite.js options that you can find the Vite.js documentation. All these can be added in your vite.config.ts file.

The `build` target

In your app's project.json file, change the executor of your build target to use @nrwl/vite:build and set it up with the following options:

//...
"my-app": {
    "targets": {
        //...
        "build": {
        "executor": "@nrwl/vite:build",
        ...
        "options": {
            "outputPath": "dist/apps/my-app"
        },
        "configurations": {
                ...
            }
        },
    }
}

Other options

You can specify more options in the vite.config.ts file (see Step 2 below).

2. Configure Vite.js

TypeScript paths

You need to use the vite-tsconfig-paths plugin to make sure that your TypeScript paths are resolved correctly in your monorepo.

React plugin

If you are using React, you need to use the @vitejs/plugin-react plugin.

How your `vite.config.ts` looks like

Add a vite.config.ts file to the root of your app. If you are not using React, you can skip adding the react plugin, of course.

// eg. apps/my-app/vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [
    react(),
    ViteTsConfigPathsPlugin({
      root: '../../',
      projects: ['tsconfig.base.json'],
    }),
  ],
});

The `root` path

Make sure the root path in the ViteTsConfigPathsPlugin options is correct. It should be the path to the root of your workspace.

In that config file, you can configure Vite.js as you would normally do. For more information, see the Vite.js documentation.

Creating a root `vite.config.ts` file

You can create a vite.config.ts file to the root of your workspace, as well as at the root of each of your applications. This file is used to configure Vite. You can read more about the configuration options in the Vite documentation.

The root vite.config.ts file can be used for all applications, and you can place in there general configurations that would apply for all your apps using Vite in your workspace. The application-specific vite.config.ts files can be used to override the root configuration, or, for example, import framework-specific plugins (eg. the '@vitejs/plugin-react' for React apps). The application-specific configuration files extend (using mergeConfig) the root configuration file. You can adjust this behavior to your needs.

So, if you are using a root vite.config.ts file, you should adjust your code as follows:

// <workspace-root>vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [],
});

and then in your app's vite.config.ts file:

// eg. apps/my-app/vite.config.ts
import { mergeConfig } from 'vite';
import baseConfig from '../../vite.config';
import react from '@vitejs/plugin-react';
import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';

export default mergeConfig(baseConfig, {
  plugins: [
    react(),
    ViteTsConfigPathsPlugin({
      root: '../../',
      projects: ['tsconfig.base.json'],
    }),
  ],
});

3. Move `index.html` and point it to your app's entrypoint

First of all, move your index.html file to the root of your app (eg. from apps/my-app/src/index.html to apps/my-app/index.html).

Then, add a module script tag pointing to the main.tsx (or main.ts) file of your app:

...
  <body>
    <div id="root"></div>
    <script type="module" src="src/main.tsx"></script>
  </body>
</html>

4. Add a `public` folder

You can add a public folder to the root of your app. You can read more about the public folder in the Vite.js documentation. Use that folder as you would normally do.

myorg/
├── apps/
│   ├── my-app/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   ├── assets/
│   │   │   ├── ...
│   │   │   └── main.tsx
│   │   ├── index.html
│   │   ├── public/
│   │   │   └── my-page.md
│   │   ├── project.json
│   │   ├── ...
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json

5. Adjust your app's tsconfig.json

Change your app's tsconfig.json (eg. apps/my-app/tsconfig.json) compilerOptions to the following:

For React apps

...
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "types": ["vite/client"],
    "useDefineForClassFields": true
  },
...

For Web apps

...
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true,
    "types": ["vite/client"]
  },
  "include": ["src"],
...

You can read more about the TypeScript compiler options in the Vite.js documentation.

6. Use Vite.js!

Now you can finally serve and build your app using Vite.js:

Serve the app

nx serve my-app

nx run my-app:serve

Now, visit http://localhost:4200 to see your app running!

Build the app

nx build my-app

nx run my-app:build

@nrwl/vite

Setting up Vite

Add Vite to an existing workspace

Initialize Vite.js

Using Vite.js in your applications

1. Change the executors in your `project.json`

The `serve` target

The `build` target

2. Configure Vite.js

TypeScript paths

React plugin

How your `vite.config.ts` looks like

Creating a root `vite.config.ts` file

3. Move `index.html` and point it to your app's entrypoint

4. Add a `public` folder

5. Adjust your app's tsconfig.json

For React apps

For Web apps

6. Use Vite.js!

Serve the app

Build the app

Package reference

Guides

Executors

Generators

@nrwl/vite

Setting up Vite

Add Vite to an existing workspace

Initialize Vite.js

Using Vite.js in your applications

1. Change the executors in your project.json

The serve target

The build target

2. Configure Vite.js

TypeScript paths

React plugin

How your vite.config.ts looks like

Creating a root vite.config.ts file

3. Move index.html and point it to your app's entrypoint

4. Add a public folder

5. Adjust your app's tsconfig.json

For React apps

For Web apps

6. Use Vite.js!

Serve the app

Build the app

Package reference

Guides

Executors

Generators

1. Change the executors in your `project.json`

The `serve` target

The `build` target

How your `vite.config.ts` looks like

Creating a root `vite.config.ts` file

3. Move `index.html` and point it to your app's entrypoint

4. Add a `public` folder