Skip to content

Monorepo World: October 7, 2024Monorepo World: October 7, 2024Join us!→

NxNxDocs

Main navigation

DocumentationBlogCI Pricing
ContactGo to app
NxCIExtending NxPluginsAPIChangelogAI Chat
Community channelLatest newsYoutube channelNx is open source, check the code on GitHub
  • Getting Started
    • Intro to Nx
    • Installation
    • Why Nx?
    • Editor Setup
    • Tutorials
      • NPM Workspaces Monorepo
      • React Standalone
      • React Monorepo
      • Angular Standalone
      • Angular Monorepo
      • Vue Standalone
      • Gradle Monorepo
    Features
    • Run Tasks
    • Cache Task Results
    • Explore your Workspace
    • Generate Code
    • Automate Updating Dependencies
    • Enforce Module Boundaries
    • Manage Releases
    • CI Features
      • Run Only Tasks Affected by a PR
      • Use Remote Caching (Nx Replay)
      • Distribute Task Execution (Nx Agents)
      • Dynamically Allocate Agents
      • Automatically Split E2E Tasks
      • Identify and Re-run Flaky Tasks
      • Set up Nx Cloud On-Premise
    Concepts
    • Mental Model
    • How Caching Works
    • What is a Task Pipeline
    • What Are Nx Plugins
    • Inferred Tasks
    • Types of Configuration
    • Executors and Configurations
    • Integrated Repos vs. Package-Based Repos vs. Standalone Apps
    • Nx Daemon
    • Nx and Turborepo
    • Buildable and Publishable Libraries
    • Module Federation
      • Module Federation and Nx
      • Faster Builds with Module Federation
      • Micro Frontend Architecture
      • Manage Library Versions with Module Federation
    • Organizational Decisions
      • Overview
      • Monorepos
      • Dependency Management
      • Code Ownership
      • Project Size
      • Project Dependency Rules
      • Folder Structure
    Recipes
    • Installation
      • Install Nx in a Non-Javascript Repo
      • Update Your Global Nx Installation
    • Tasks & Caching
      • Configure Inputs for Task Caching
      • Configure Outputs for Task Caching
      • Define a Task Pipeline
      • Change Cache Location
      • Run Custom Commands
      • Pass Args to 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
      • Preserving Git Histories
      • Manual migration
    • React
      • 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
      • 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 (deprecated)
      • 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
      • Upgrading Storybook using the Storybook CLI
      • Setting up Storybook Composition with Nx
      • Angular: Set up Compodoc for Storybook on Nx
      • Angular: Configuring styles and preprocessor options
    • Cypress
      • Component Testing
      • Using setupNodeEvents with Cypress preset
      • Cypress v11 Migration Guide
    • 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 in 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
    • 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
    • Nx Console
      • Telemetry
      • Project Details View
      • Generate Command
      • Run Command
      • Troubleshooting
    • Nx Release
      • Get Started with Nx Release
      • Release Projects Independently
      • Automatically Version with Conventional Commits
      • Configure Custom Registries
      • Publish in CI/CD
      • Automate GitHub Releases
      • Publish Rust Crates
      • Update Your Local Registry Setup to use Nx Release
      • Customize Conventional Commit Types
      • Configure Changelog Format
      • Publish a Custom Dist Directory
    • Other
      • Rescope Packages from @nrwl to @nx
    Showcase
    • Nx with your favorite tech
      • Express
      • Lit
      • Solid
      • Qwik
      • Rust
      • .NET
      • Astro
      • Svelte
      • Fastify
      • Apollo GraphQL
      • Prisma with NestJS
      • Mongo with Fastify
      • Redis with Fastify
      • Postgres with Fastify
      • PlanetScale with Serverless Fastify
      • Nx with Micro-frontends
    • Benchmarks
      • Typescript Batch Mode Compilation
      • Large Repo and Caching
      • Large Repo and DTE
    Reference
    • Commands
    • Nx Configuration
    • Project Configuration
    • Inputs and Named Inputs
    • .nxignore
    • Environment Variables
    • Glossary
    • Releases
    Troubleshooting
    • Resolve Circular Dependencies
    • Troubleshoot Nx Install Issues
    • Troubleshoot Cache Misses
    • Unknown Local Cache Error
    • Profiling Build Performance
    • Troubleshoot Nx Console Issues
    • Troubleshoot Convert to Inferred Migration
  1. recipes
  2. react

React

Advanced guides to adopt Nx in React.

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
On this page
  • Overview
22.6kGive us a Star!

Footer

Nx

Smart Monorepos · Fast CI

DiscordGitHubXYoutubeNewsletter
Preferences

Resources

  • Blog
  • Nx Playbook
  • Privacy Policy
  • Brands & Guidelines
  • Site Map

Help

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

Community

  • X
  • GitHub
  • Newsletter
  • Discord
  • Help Us

Solutions

  • Nx Enterprise
  • Nx
  • Nx Cloud

© 2024 made with by