Nx Plus Vite

First class support for Vite in your Nx workspace.

Contents

• Prerequisite
• Getting Started
• Schematics (i.e. code generation)
• Builders (i.e. task runners)
• Configuring Vite
• Updating Nx Plus Vite

Prerequisite

Nx Workspace

If you have not already, create an Nx workspace with the following:

npx create-nx-workspace@^15.0.0

Peer Dependencies

If you have not already, install peer dependencies with the following:

# npm
npm install @nrwl/cypress@^15.0.0 @nrwl/jest@^15.0.0 @nrwl/linter@^15.0.0 --save-dev

# yarn
yarn add @nrwl/cypress@^15.0.0 @nrwl/jest@^15.0.0 @nrwl/linter@^15.0.0 --dev

Getting Started

Install Plugin

# npm
npm install @nx-plus/vite --save-dev

# yarn
yarn add @nx-plus/vite --dev

Generate Your App

nx g @nx-plus/vite:app my-app

Serve Your App

nx serve my-app

Schematics (i.e. code generation)

Application

nx g @nx-plus/vite:app <name> [options]

| Arguments | Description | | --------- | --------------------- | | <name> | The name of your app. |

| Options | Default | Description | | ------------------ | --------- | ---------------------------------------------- | | --tags | - | Tags to use for linting (comma-delimited). | | --directory | apps | A directory where the project is placed. | | --unitTestRunner | jest | Test runner to use for unit tests. | | --e2eTestRunner | cypress | Test runner to use for end to end (e2e) tests. | | --skipFormat | false | Skip formatting files. |

Builders (i.e. task runners)

Server

nx serve <name> [options]

| Arguments | Description | | --------- | --------------------- | | <name> | The name of your app. |

| Options | Default | Description | | -------------- | ------- | ------------------------------------------------------ | | --config | - | Use specified config file. | | --root | - | Use specified root directory. | | --base | '/' | Public base path. | | --host | - | Specify hostname. | | --port | - | Specify port. | | --https | - | Use TLS + HTTP/2. | | --open | - | Open browser on startup. | | --cors | - | Enable cors. | | --strictPort | - | Exit if specified port is already in use. | | --mode | - | Set env mode. | | --force | - | Force the optimizer to ignore the cache and re-bundle. |

Build

nx build <name> [options]

| Arguments | Description | | --------- | --------------------- | | <name> | The name of your app. |

| Options | Default | Description | | --------------------- | ---------- | -------------------------------------------------------- | | --config | - | Use specified config file. | | --root | - | Use specified root directory. | | --base | '/' | Public base path. | | --target | 'modules' | Transpile target. | | --outDir | - | Output directory. | | --assetsDir | '_assets' | Directory under outDir to place assets in. | | --assetsInlineLimit | 4096 | Static asset base64 inline threshold in bytes. | | --ssr | - | Build specified entry for server-side rendering. | | --sourcemap | false | Output source maps for build. | | --minify | 'esbuild' | Enable/disable minification, or specify minifier to use. | | --manifest | - | Emit build manifest json. | | --ssrManifest | - | Emit ssr manifest json. | | --emptyOutDir | - | Force empty outDir when it's outside of root. | | --mode | - | Set env mode. | | --force | - | Force the optimizer to ignore the cache and re-bundle. | | --watch | - | Rebuilds when modules have changed on disk. |

Configuring Vite

A vite.config.js can be found at the root of your project. See the Vite documentation for more details.

Linting

nx lint <name> [options]

We use @nrwl/linter for linting, so the options are as documented here.

Unit Testing

nx test <name> [options]

We use @nrwl/jest for unit testing, so the options are as documented here.

E2E Testing

nx e2e <name> [options]

We use @nrwl/cypress for e2e testing, so the options are as documented here.