miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore(misc): update README file for cra-to-nx (#13765)

Browse Source
This commit is contained in:
Jack Hsu 2022-12-12 10:20:56 -05:00 committed by GitHub
parent 32cf32a09b
commit 6b2f266f0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/cra-to-nx/README.md
View File

@ -1,43 +1,39 @@
# CRA - to - Nx
# Migrating CRA to Nx
This package will turn your React app into an [Nx workspace](https://nx.dev/). To use this package, your React app must have been generated and kept the structure of [Create-React-App](https://reactjs.org/docs/create-a-new-react-app.html), with files generated either in js/jsx or ts/tsx.
This tool follows the steps described in this [migration guide](https://nx.dev/migration/migration-cra), with some enhancements.
It will, essentially, generate a new Nx workspace, and then place your existing CRA React app in the `apps` directory of the Nx workspace, while configuring the Nx workspace as needed.
## Before starting
As this package will change your folder structure and edit some of your files, you must commit any local changes you have, to start with clean history. In any case, to protect you, the package will exit if there are local uncommited changes.
This package will turn your React app into an [Nx workspace](https://nx.dev/) with [Vite](https://vitejs.dev/). To use this package, your React app must have been generated and kept the structure of [Create-React-App](https://reactjs.org/docs/create-a-new-react-app.html), with files generated either in js/jsx or ts/tsx.
## How to use
Go to your CRA React app directory and run the following command:
```
npx cra-to-nx
npx nx init
```
Then just sit back and wait. After a while you will be able to take advantage of the [full magic of Nx](/getting-started/intro).
Nx will automatically detect that you are in a CRA project and add Nx, Vite, and Vitest for you.
## Ok, it's done, what do I do now?
### Run, build, lint, test
You can try the following commands:
Your previous scripts still work:
```
nx serve your-app-name
nx build your-app-name
nx lint your-app-name
nx test your-app-name
# Serve and build app with Vite
npm start
npm run build
# Run unit tests with Vitest
npm test
```
### Generate code
Take a look at [this guide](https://nx.dev/latest/react/workspace/generators/using-schematics)
Nx comes with code generators to automate repeatable tasks performed on your code.
Or just try generating a library:
Take a look at [this guide](https://nx.dev/plugin-features/use-code-generators).
And try generating a library:
```
nx generate lib ui-button
@ -45,12 +41,8 @@ nx generate lib ui-button
### Courses, guides, docs
- [Follow the Nx React tutorial](https://nx.dev/react-tutorial/1-code-generation)
- [Follow the Nx React tutorial](https://nx.dev/getting-started/react-standalone-tutorial)
- [Free Nx course on Egghead.io](https://egghead.io/playlists/scale-react-development-with-nx-4038)
- Or just use the VS Code Nx Extension, [Nx Console](/core-features/integrate-with-editors) to do all these using a UI.
## So, now I just have my React app in a monorepo?
No. You have your React app in an **Nx workspace**. So you also have the full power of Nx tools. You can watch this [10-minute quick overview](https://youtu.be/sNz-4PUM0k8) if you want to know more.