Upgradin’ in Style: How to upgrade Ember CLI

Before we begin I should mention that there are official docs which point to the individual releases with detailed information on how to accomplish an Ember-CLI upgrade. 

Follow: https://ember-cli.com/user-guide/#upgrading

For the longest time I’ve been using ember init which is a handy little tool to show diffs, apply diffs, and generally work file-by-file through the upgrade process from whichever version you are on to your (presumably) updated Ember-CLI

It looks something like this:

Pretty neat, huh? I believe this is mostly inspired by the Git command git add --patch. I’m sure locks will correct me if I’m wrong. ;)

The unfortunate aspect about this command is that it tries to apply the files generated by Ember-CLI to files that are definitely going to be divergent in incompatible ways. For instance, if something is changed in the app/router.js on upstream ember-cli it will overwrite all of the route definitions you’ve created in your own app/router.js. As a result I (and I assume many others) use this mostly to view the diff. Favoring instead, to split a pane on the left side to view the diff and update the actual files in your favorite editor on the right.

You can also apply partial diffs with ember init but I’m apparently bad at getting those edited diffs to apply cleanly.

Let’s cut to the chase.

You can get a really nice diff view on GitHub. As part of the release process Ember-CLI publishes a tagged release of ember-cli/ember-new-output

Which you can compare with:


And resume your normal upgrade process with a kind of meta view that is really easy to work with.

But wait there’s more!

Once you get to the diffing of your package.json there is a neat command that I didn’t know existed until just the other day.
  yarn upgrade-interactive

Which gives you a great way to find and upgrade your out of date packages with a lot of precision.

It looks a bit like this:

Somewhat counterintuitively: 

Red you would get with a yarn upgrade (because it matches semver range in package.json), while yellow is a semver incompatible upgrade — SimonB

Happy Upgrading!

If your team needs help upgrading Ember-CLI, or with Ember in general, please contact us at http://www.201-created.com/