Update Create React App projects
Fetches list of codemods and instructions from create-react-app-updater-codemods-manifest
This is a thin wrapper of boilerplate-update.
Ported from ember-cli-update
https://www.youtube.com/watch?v=pgS3-F0sXeM
As a global executable:
npm install -g create-react-app-updater
Make sure your git working directory is clean before updating.
Inside your project directory, if you installed globally run
create-react-app-updater
or the shorter
cra-update
If you want to use npx run
npx create-react-app-updater
It applies a diff of the changes from the latest version to your project. It will only modify the files if there are changes between your project's version and the latest version, and it will only change the section necessary, not the entire file.
You will probably encounter merge conflicts, in which the default behavior is to let you resolve conflicts on your own. You can supply the --resolve-conflicts option to run your system's git merge tool if any conflicts are found.
This tool can also run codemods for you. The option --run-codemods will figure out what codemods apply to your current version of React, and download and run them for you.
(These examples assume you are using the global command.)
To update to the latest version of Create React App:
cra-update
To update to a certain version of Create React App:
cra-update --to 2.1.1
To run codemods:
(This should be run after running the normal update shown above, and after you've resolved any conflicts.)
cra-update --run-codemods
| Option | Description | Type | Examples | Default |
|---|---|---|---|---|
| --from | Use a starting version that is different than what is in your package.json | String | "2.9.1" | |
| --to | Update to a version that isn't latest | String | "2.14.1" "~2.15" "latest" "beta" | "latest" |
| --resolve-conflicts | Automatically run git mergetool if conflicts found | Boolean | false | |
| --run-codemods | Run codemods to help update your code | Boolean | false | |
| --reset | Reset your code to the default boilerplate at the new version | Boolean | false | |
| --compare-only | Show the changes between different versions without updating | Boolean | false | |
| --stats-only | Show all calculated values regarding your project | Boolean | false | |
| --list-codemods | List available codemods | Boolean | false |
Need help using git mergetool? Here are some starting points:
If you made a mistake during the update/conflict resolution, run these commands to undo everything and get you back to before the update:
git reset --hard
git clean -f
If you notice ".orig" files lying around after a merge and don't want that behavior, run git config --global mergetool.keepBackup false.
To avoid being prompted "Hit return to start merge resolution tool (vimdiff):" for every conflict, set a merge tool like git config --global merge.tool "vimdiff".
If you run into an error like error: unrecognized input, you may need to update your git config color option like git config --global color.ui auto.
If you are getting an error or unexpected results, running the command with the debug flag:
- Unix (global):
DEBUG=create-react-app-updater,boilerplate-update,git-diff-apply create-react-app-updater - Windows (global):
set DEBUG=create-react-app-updater,boilerplate-update,git-diff-apply && create-react-app-updater - Unix (npx):
DEBUG=create-react-app-updater,boilerplate-update,git-diff-apply npx create-react-app-updater - Windows (npx):
set DEBUG=create-react-app-updater,boilerplate-update,git-diff-apply && npx create-react-app-updater
will give you more detailed logging.