Migrating a Create-React-App project into an Nx Workspace
Create-React-App (CRA) is one of the most widely used tool for creating, building and testing a React app. This guide will show you how to move an app generated with CRA into an Nx workspace. Once the migration process is complete, you'll be able to take advantage of all of Nx's features without needing to completely recreate your build process.
The easiest way to setup Nx in your CRA project is to use the automated migration tool.
npx nx@latest init
This automatically migrates to an Nx standalone setup. If you would rather migrate to a Nx monorepo setup, pass the
The command above will detect that the project is generated with CRA, and that it has not been ejected, or _ customized_ with either
@craco/craco. If the project has either been ejected or customized, then the migration will still continue but you will be prompted for more information.
You will notice that the project now uses Vite and Vitest to build and test your application. Vite is a next-gen tooling for building frontend applications, and is much faster than Webpack ( which CRA uses).
If you do not want to use Vite, you can run
npx nx@latest init --vite=false instead.
Use the same scripts as before, and Nx will run underneath the hood with
npm run build
test are set up to automatically cache their results. Subsequent runs of
npm run build (without changing any code), for example, should only take a couple seconds.