Migrating a Create React App application into the monorepo
This guide describes the steps necessary to move your Create React App into this repo. However, depending on the configuration and what CRA features you're using it might require additional steps to fully integrate the app.
First steps
Start by following the steps outlined in the Migration.md
file, up until the section named Move from .temp to Gatsby.
Move from .temp to React app
When migrating an CRA into a NX workspace there are two approaches, either use react-app-rewired or NX’s built in React support. Choosing which approach to use mostly comes down to how much of the CRA functionality is used and how much effort is going to be spent migrating.
Important: always use
git add .
&git commit
, as it preserves the history of the file being moved.git commit -am
does not.
Ex 1. We want to move appA from
apps/
team1/
.temp/
appA
to a app using React in
apps/
team1/
appA/
Using react-app-rewired
NX has a guide to on migrating from CRA to react-app-rewired .
// TODO: expand this if needed when some app migrates using this strategy
Using NX’s React configuration
If you use Typescript in your projects you can ommit the
--js
flag on commands when creating apps (or libs) with nx
- Create an empty React app using the NX cli tool
yarn nx g @dnb/react:app team1/appA --js
This will create a (mostly) empty React application
- You can start moving files and folders from .temp/appA into the team1/appA, where they fit.
You should be able to delete the generated src
folder and move src
and public
folder from your CRA app into the
team1/appA folder.
Its a good practice to move one set of files or a file at a time and run
git add .
&git commit
with a message"Move appA components"
before continuing
- Change the configuration in the root
workspace.json
file
{
"projects": {
"team1-appA": {
"root": "apps/team1/appA",
"sourceRoot": "apps/team1/appA/src",
"projectType": "application",
"architect": {
"build": {
"executor": "@nrwl/web:build",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "apps/team1/appA/dist",
"index": "apps/team1/appA/src/index.html",
// change this to point to your index.html
"main": "apps/team1/appA/src/main.tsx",
// change this to point to your entrypoint
"polyfills": "apps/team1/appA/src/polyfills.ts",
// can be removed if not in use
"tsConfig": "apps/team1/appA/tsconfig.app.json",
// can be removed if not in use
"assets": [
"apps/team1/appA/src/favicon.ico",
// can be removed if not in use
"apps/team1/appA/src/assets"
// if you have assets in the public folder it should be added here
],
"styles": [],
"scripts": [],
"webpackConfig": "apps/team1/appA/webpack.config.js"
},
"configurations": {
"production": {
"fileReplacements": [
// fileReplacements can be removed if not in use
{
"replace": "apps/team1/appA/src/environments/environment.ts",
"with": "apps/team1/appA/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
}
}
}
}
}
-
When you have moved all hooks, providers, components etc. and run
yarn install
(don't forget to move package.json) you can serve the App withyarn nx serve team1/appA
-
You can run your test with
yarn nx test team1/appA
, NX uses Jest behind the scenes and all .spec and .test files should run
Side note: NX also creates an application to run e2e test with Cypress (much like pupeteer). Run it with
yarn nx e2e team1/appA-e2e
e2e test are written with Cypress and are placed in the integration folder under/team1/appA-e2e/src/integration/app.spec.js