Skip to content
NxDocs

Nx Webinar: Monorepos - The Benefits, Challenges and Importance of Tooling SupportNx Webinar: Monorepos - The Benefits, Challenges and Importance of Tooling SupportRegister→

NxCIExtending NxPluginsAPIChangelogAI Chatbeta
Community channelLatest newsYoutube channelNx is open source, check the code on GitHub
  • Getting Started
    • Intro to Nx
    • Installation
    • Why Nx?
    • Tutorials
      • Package-Based Monorepo
      • Integrated Monorepo
      • React Standalone
      • React Monorepo
      • Angular Standalone
      • Angular Monorepo
      • Vue Standalone
      • Node Standalone
    Core Features
    • Run Tasks
    • Cache Task Results
    • Use Remote Caching
    • Distribute Task Execution
    • Explore the Graph
    • Automate Updating Dependencies
    • Enforce Module Boundaries
    • Integrate with Editors
    • Manage Releases
    • Plugin Features
      • Use Task Executors
      • Use Code Generators
    Concepts
    • Mental Model
    • How Caching Works
    • Types of Configuration
    • What is a Task Pipeline
    • Integrated Repos vs. Package-Based Repos vs. Standalone Apps
    • Module Federation
      • Module Federation and Nx
      • Faster Builds with Module Federation
      • Micro Frontend Architecture
      • Manage Library Versions with Module Federation
    • More Concepts
      • Incremental Builds
      • Illustrated Distributed Task Execution
      • Nx and Turborepo
      • Monorepos
      • Dependency Management
      • Code Sharing
      • Using Nx at Enterprises
      • Nx Daemon
      • Nx and the Angular CLI
      • Folder Structure
      • Nx Devkit and Angular Devkit
      • Applications and Libraries
      • Creating Libraries
      • Library Types
      • Grouping Libraries
      • Buildable and Publishable Libraries
      • How the Project Graph is Built
    Recipes
    • Tasks & Caching
      • Fine-tuning Caching with Inputs
      • Defining a Task Pipeline
      • Change Cache Location
      • Running Custom Commands
      • Run Tasks in Parallel
      • Run Root-Level NPM Scripts with Nx
      • Workspace Watching
      • Reduce Repetitive Configuration
    • Adopting Nx
      • NPM/Yarn/PNPM workspaces
      • Migrate From Turborepo
      • Add to any Project
      • Nx and Lerna
      • Preserving Git Histories
      • Manual migration
    • React
      • Migrating from CRA
      • React 18 Migration
      • React Native with Nx
      • Remix with Nx
      • Use Environment Variables in React
      • Using Tailwind CSS in React
      • Adding Images, Fonts, and Files
      • Setup Module Federation with SSR for React
      • Deploying Next.js applications to Vercel
    • Angular
      • Migration
        • Migrating from Angular CLI
        • Migrating From Multiple Angular CLI Repos
        • Migrating Angular Application manually
        • Migrating from AngularJS
      • Use Environment Variables in Angular
      • Using Tailwind CSS with Angular projects
      • Setup Module Federation with SSR for Angular
      • Advanced Micro Frontends with Angular using Dynamic Federation
      • Setup incremental builds for Angular applications
    • Node
      • Deploying a Node App to Fly.io
      • Add and Deploy Netlify Edge Functions with Node
      • Deploying AWS lambda in Node.js
      • Set Up Application Proxies
      • Wait for Tasks to Finish
    • Storybook
      • Set up Storybook for React Projects
      • Set up Storybook for Angular Projects
      • Set up Storybook for Vue Projects
      • Configuring Storybook on Nx
      • One main Storybook instance for all projects
      • One Storybook instance per scope
      • One main Storybook instance using Storybook Composition
      • How to configure Webpack and Vite for Storybook
      • Setting up Storybook Interaction Tests with Nx
      • Setting up Storybook Composition with Nx
      • Angular: Set up Compodoc for Storybook on Nx
      • Angular: Configuring styles and preprocessor options
    • Cypress
      • Component Testing
      • Cypress v11 Migration Guide
    • Deno
      • Add a Deno Project
      • Serverless deployment with Deno Deploy
      • Add and Deploy Netlify Edge Functions with Deno
    • Next
      • How to configure Next.js plugins
    • Nuxt
      • Deploying Nuxt applications to Vercel
    • Vite
      • Configure Vite on your Nx workspace
    • Webpack
      • How to configure webpack on your Nx workspace
      • Webpack plugins
    • Module Federation
      • How to create a Module Federation Host Application
      • How to create a Module Federation Remote Application
      • How to Federate a Module
    • Enforce Module Boundaries
      • Ban Dependencies with Certain Tags
      • Tag in Multiple Dimensions
      • Ban External Imports
      • Tags Allow List
    • Installation
      • Install Nx in a Non-Javascript Repo
      • Update Your Global Nx Installation
    • Tips and tricks
      • Add a Package-based Project in an Integrated Repo
      • Add an Integrated Project in a Package-based Repo
      • Convert from a Standalone Repository to an Integrated Repository
      • Configuring ESLint with Typescript
      • Enable Typescript Batch Mode
      • Define Secondary Entrypoints for Typescript Packages
      • Compile Typescript Packages to Multiple Formats
      • Keep Nx Versions in Sync
      • Define Environment Variables
      • Configuring Browser Support
      • Include Assets in Build
      • Include All package.json Files as Projects
      • Identify Dependencies Between Folders
      • Disable Graph Links Created from Analyzing Source Files
      • Use JavaScript instead TypeScript
      • Altering Migration Process
      • Using Yarn PnP
      • Switching to ESLint's flat config format
    • Troubleshooting
      • Resolve Circular Dependencies
      • Troubleshooting Nx Install Issues
      • Troubleshoot Cache Misses
      • Unknown Local Cache Error
      • Profiling Build Performance
    • Nx Console
      • Telemetry
      • Generate Command
      • Run Command
      • Add Dependency Command
      • Project Pane
      • Keyboard Shortcuts
      • Troubleshooting
    • Nx Release
      • Get Started with Nx Release
      • Release Projects Independently
      • Automatically Version with Conventional Commits
      • Publish in CI/CD
    • Other
      • Rescope Packages from @nrwl to @nx
    Showcase
    • Nx with your favorite tech
      • Add an Express Project
      • Add a Lit Project
      • Add a Solid Project
      • Add a Qwik Project
      • Add a Rust Project
      • Add a .NET Project
      • Add an Astro Project
      • Add a Svelte Project
      • Add a Fastify Project
      • Using Apollo GraphQL
      • Using Prisma with NestJS
      • Using Mongo with Fastify
      • Using Redis with Fastify
      • Using Postgres with Fastify
      • Using PlanetScale with Serverless Fastify
      • Nx Micro-Frontend Example
    • Benchmarks
      • Typescript Batch Mode Compilation
      • Large Repo and Caching
      • Large Repo and DTE
    Reference
    • Commands
    • Nx Configuration
    • Project Configuration
    • .nxignore
    • Environment Variables
    • Glossary
  1. recipes
  2. vite

Vite

Vite related recipes

Configure Vite on your Nx workspace

Configure Vite on your Nx workspace

On this page
  • Overview
20.9kGive us a Star!
Report an issue

Footer

Nx

Smart Monorepos · Fast CI

DiscordGitHubXYoutubeNewsletter

Resources

  • Blog
  • Youtube Channel
  • Nx Playbook
  • Brands & Guidelines
  • Site Map

Help

  • Documentation
  • Community
  • StackOverflow
  • Report Issues
  • Status Page

Community

  • X
  • GitHub
  • Newsletter
  • Discord
  • Help Us

Solutions

  • Nx
  • Nx Cloud

© 2024 made with by