What is @nrwl/vite?
@nrwl/vite is a plugin for Nx that allows you to use Vite as a build tool for your applications. It integrates Vite with the Nx workspace, enabling you to leverage Vite's fast build times and modern features within the Nx ecosystem.
What are @nrwl/vite's main functionalities?
Vite Configuration
You can configure Vite within your Nx workspace by creating a vite.config.ts file. This allows you to customize Vite's behavior to suit your project's needs.
json
Nx Integration
The @nrwl/vite package integrates seamlessly with Nx, allowing you to use Vite as a build tool for your Nx projects. This means you can take advantage of Nx's powerful features, such as dependency graph visualization and affected command execution, while using Vite for fast builds.
json
Fast Builds
Vite is known for its fast build times, and using @nrwl/vite allows you to leverage this speed within your Nx workspace. This can significantly improve your development experience, especially for large projects.
json
Other packages similar to @nrwl/vite
vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is the core tool that @nrwl/vite integrates with Nx. While Vite can be used standalone, @nrwl/vite provides additional integration with the Nx ecosystem.
nx
Nx is a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft. While Nx itself is not a build tool, it provides a powerful framework for managing large codebases. @nrwl/vite is a plugin that allows you to use Vite within an Nx workspace.
webpack
Webpack is a popular module bundler for JavaScript applications. It is highly configurable and has a large ecosystem of plugins. While Webpack is more established and has broader support, Vite offers faster build times and a more modern development experience. @nrwl/vite allows you to use Vite as an alternative to Webpack within an Nx workspace.
Nx: Smart, Fast and Extensible Build System
Nx is a next generation build system with first class monorepo support and powerful integrations.
This package is a Vite plugin for Nx.
Getting Started
Creating an Nx Workspace
Using npx
npx create-nx-workspace
Using npm init
npm init nx-workspace
Using yarn create
yarn create nx-workspace
The create-nx-workspace
command will ask you to select a preset, which will configure some plugins and create your applications to help you get started.
? What to create in the new workspace (Use arrow keys)
❯ apps [an empty workspace with no plugins with a layout that works best for building apps]
core [an empty workspace with no plugins set up to publish npm packages (similar to yarn workspaces)]
ts [an empty workspace with the JS/TS plugin preinstalled]
react [a workspace with a single React application]
angular [a workspace with a single Angular application]
next.js [a workspace with a single Next.js application]
nest [a workspace with a single Nest application]
express [a workspace with a single Express application]
web components [a workspace with a single app built using web components]
react-native [a workspace with a single React Native application]
Select the preset that works best for you
Adding Nx to an Existing Monorepo
Run:
npx add-nx-to-monorepo@latest
Documentation & Resources
A few links to help you get started: