docs(core): remove CRA migration guide (#22696)
This commit is contained in:
Isaac Mann
GitHub
parent
900db73c1d
commit
81c6c72121
@ -1444,14 +1444,6 @@
|
||||
"id": "react",
|
||||
"isExternal": false,
|
||||
"children": [
|
||||
{
|
||||
"name": "Migrating from CRA",
|
||||
"path": "/recipes/react/migration-cra",
|
||||
"id": "migration-cra",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React 18 Migration",
|
||||
"path": "/recipes/react/react-18",
|
||||
@ -2595,14 +2587,6 @@
|
||||
"id": "react",
|
||||
"isExternal": false,
|
||||
"children": [
|
||||
{
|
||||
"name": "Migrating from CRA",
|
||||
"path": "/recipes/react/migration-cra",
|
||||
"id": "migration-cra",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React 18 Migration",
|
||||
"path": "/recipes/react/react-18",
|
||||
@ -2670,14 +2654,6 @@
|
||||
],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Migrating from CRA",
|
||||
"path": "/recipes/react/migration-cra",
|
||||
"id": "migration-cra",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React 18 Migration",
|
||||
"path": "/recipes/react/react-18",
|
||||
|
||||
@ -1974,17 +1974,6 @@
|
||||
"mediaImage": "",
|
||||
"file": "",
|
||||
"itemList": [
|
||||
{
|
||||
"id": "migration-cra",
|
||||
"name": "Migrating from CRA",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/migration/migration-cra",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/recipes/react/migration-cra",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "react-18",
|
||||
"name": "React 18 Migration",
|
||||
@ -3550,17 +3539,6 @@
|
||||
"mediaImage": "",
|
||||
"file": "",
|
||||
"itemList": [
|
||||
{
|
||||
"id": "migration-cra",
|
||||
"name": "Migrating from CRA",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/migration/migration-cra",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/recipes/react/migration-cra",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "react-18",
|
||||
"name": "React 18 Migration",
|
||||
@ -3654,17 +3632,6 @@
|
||||
"path": "/recipes/react",
|
||||
"tags": []
|
||||
},
|
||||
"/recipes/react/migration-cra": {
|
||||
"id": "migration-cra",
|
||||
"name": "Migrating from CRA",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/migration/migration-cra",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/recipes/react/migration-cra",
|
||||
"tags": []
|
||||
},
|
||||
"/recipes/react/react-18": {
|
||||
"id": "react-18",
|
||||
"name": "React 18 Migration",
|
||||
|
||||
@ -510,11 +510,6 @@
|
||||
"id": "react",
|
||||
"description": "Advanced guides to adopt Nx in React.",
|
||||
"itemList": [
|
||||
{
|
||||
"name": "Migrating from CRA",
|
||||
"id": "migration-cra",
|
||||
"file": "shared/migration/migration-cra"
|
||||
},
|
||||
{
|
||||
"name": "React 18 Migration",
|
||||
"id": "react-18",
|
||||
|
||||
@ -65,8 +65,6 @@ Alternatively, here are some recipes that give you more details based on the tec
|
||||
|
||||
{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%}
|
||||
|
||||
{% link-card title="Migrate from CRA" appearance="small" url="/recipes/react/migration-cra" icon="cra" /%}
|
||||
|
||||
{% link-card title="Migrate from Angular CLI" appearance="small" url="/recipes/angular/migration/angular" icon="angular" /%}
|
||||
|
||||
{% /cards %}
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
# 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.
|
||||
|
||||
{% youtube
|
||||
src="https://www.youtube.com/embed/zvYb7XCLQzU"
|
||||
title="From CRA to Vite in 10 seconds"
|
||||
width="100%" /%}
|
||||
|
||||
## Automated migration
|
||||
|
||||
The easiest way to setup Nx in your CRA project is to use the automated migration tool.
|
||||
|
||||
```shell
|
||||
npx nx@latest init
|
||||
```
|
||||
|
||||
{% callout type="note" title="Want to migrate to a monorepo instead?" %}
|
||||
This automatically migrates to an [Nx standalone setup](/concepts/integrated-vs-package-based#standalone-applications). If you would rather migrate to a Nx monorepo setup, pass the `--integrated` flag.
|
||||
{% /callout %}
|
||||
|
||||
The command above will detect that the project is generated with CRA, and that it has not been _ejected_, or _
|
||||
customized_ with either `react-app-rewired` or `@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.
|
||||
|
||||
That's it!
|
||||
|
||||
{% callout type="note" title="Vite" %}
|
||||
You will notice that the project now uses [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/) 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.
|
||||
{% /callout %}
|
||||
|
||||
## Try Nx
|
||||
|
||||
Use the same scripts as before, and Nx will run underneath the hood with `nx exec`.
|
||||
|
||||
```shell
|
||||
npm start
|
||||
npm run build
|
||||
npm test
|
||||
```
|
||||
|
||||
`build` and `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.
|
||||
@ -881,7 +881,7 @@ Check out one of these detailed tutorials on setting up CI with Nx:
|
||||
Here's some things you can dive into next:
|
||||
|
||||
- Learn more about the [underlying mental model of Nx](/concepts/mental-model)
|
||||
- Learn how to [migrate your CRA app to Nx](/recipes/react/migration-cra)
|
||||
- Learn how to [migrate your React app to Nx](/recipes/adopting-nx/adding-to-existing-project)
|
||||
- [Learn how to setup Tailwind](/recipes/react/using-tailwind-css-in-react)
|
||||
- [Setup Storybook for our shared UI library](/recipes/storybook/overview-react)
|
||||
|
||||
|
||||
@ -1100,7 +1100,7 @@ Check out one of these detailed tutorials on setting up CI with Nx:
|
||||
Here's some things you can dive into next:
|
||||
|
||||
- Learn more about the [underlying mental model of Nx](/concepts/mental-model)
|
||||
- Learn how to [migrate your CRA app to Nx](/recipes/react/migration-cra)
|
||||
- Learn how to [migrate your React app to Nx](/recipes/adopting-nx/adding-to-existing-project)
|
||||
- [Learn how to setup Tailwind](/recipes/react/using-tailwind-css-in-react)
|
||||
- [Setup Storybook for our shared UI library](/recipes/storybook/overview-react)
|
||||
|
||||
|
||||
@ -77,7 +77,6 @@
|
||||
- [Preserving Git Histories](/recipes/adopting-nx/preserving-git-histories)
|
||||
- [Manual migration](/recipes/adopting-nx/manual)
|
||||
- [React](/recipes/react)
|
||||
- [Migrating from CRA](/recipes/react/migration-cra)
|
||||
- [React 18 Migration](/recipes/react/react-18)
|
||||
- [React Native with Nx](/recipes/react/react-native)
|
||||
- [Remix with Nx](/recipes/react/remix)
|
||||
|
||||
@ -218,7 +218,7 @@ const diataxis = {
|
||||
'/recipes/advanced-plugins/project-graph-plugins',
|
||||
'/migration/lerna-and-nx': '/recipes/adopting-nx/lerna-and-nx',
|
||||
'/migration/adding-to-monorepo': '/recipes/adopting-nx/adding-to-monorepo',
|
||||
'/migration/migration-cra': '/recipes/adopting-nx/migration-cra',
|
||||
'/migration/migration-cra': '/recipes/adopting-nx/adding-to-existing-project',
|
||||
'/migration/migration-angular': '/recipes/adopting-nx/migration-angular',
|
||||
'/migration/migration-angularjs': '/recipes/adopting-nx/migration-angular',
|
||||
'/recipes/angular/migration/angularjs':
|
||||
@ -905,7 +905,10 @@ const latestRecipesRefactoring = {
|
||||
'/recipes/other/setup-incremental-builds-angular':
|
||||
'/recipes/angular/setup-incremental-builds-angular',
|
||||
// react
|
||||
'/recipes/adopting-nx/migration-cra': '/recipes/react/migration-cra',
|
||||
'/recipes/adopting-nx/migration-cra':
|
||||
'/recipes/adopting-nx/adding-to-existing-project',
|
||||
'/recipes/react/migration-cra':
|
||||
'/recipes/adopting-nx/adding-to-existing-project',
|
||||
'/recipes/other/react-18': '/recipes/react/react-18',
|
||||
'/recipes/other/react-native': '/recipes/react/react-native',
|
||||
'/recipes/other/remix': '/recipes/react/remix',
|
||||
|
||||
@ -145,7 +145,8 @@ async function reorgnizeWorkspaceStructure(options: NormalizedOptions) {
|
||||
? `npx nx build ${options.reactAppName}`
|
||||
: 'npm run build';
|
||||
printFinalMessage({
|
||||
learnMoreLink: 'https://nx.dev/recipes/react/migration-cra',
|
||||
learnMoreLink:
|
||||
'https://nx.dev/recipes/adopting-nx/adding-to-existing-project',
|
||||
bodyLines: [
|
||||
`- Execute "${buildCommand}" twice to see the computation caching in action.`,
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user