Skip to main content

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

  1. 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

  1. 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

  1. 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"
}
]
}
}
}
}
}
}
}
  1. 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 with yarn nx serve team1/appA

  2. 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