Nx Plus Vite
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.