Skip to content
NxDocs

Missed Nx Conf? Watch the recording!Missed Nx Conf? Watch the recording!Details here→

NxNx CloudExtending 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
    • 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
    • Vite
      • Manually set up your project to use Vite.js
    • 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
    • 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 a Nuxt Project
      • Add an Astro Project
      • Add a Vue 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. react

React

Advanced guides to adopt Nx in 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
On this page
  • Overview
20.3kGive us a Star!
Report an issue

Footer

Nx

Smart, Fast and Extensible Build System

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
  • NxCloud

© 2023 made with by