ember.jsember-cli

How can I upgrade ember 2.7 to 3.28?


My team inherited an old (around 2017) ember.js based project, and we need to choose between remake the project with vue, or just upgrade ember version.

The project use node 6.16, and here are the dependencies :

// package.json
{
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.2.0",
    "chart.js": "2.2.1",
    "ember-ajax": "0.7.1",
    "ember-browserify": "1.1.13",
    "ember-cli": "2.4.2",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-autoprefixer": "0.6.0",
    "ember-cli-babel": "^5.1.5",
    "ember-cli-chart": "3.1.0",
    "ember-cli-chartjs": "2.3.1",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-htmlbars": "^1.3.5",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "^1.10.2",
    "ember-cli-moment-shim": "2.2.0",
    "ember-cli-qunit": "^1.2.1",
    "ember-cli-release": "0.2.8",
    "ember-cli-sass": "5.3.0",
    "ember-cli-spinjs": "1.0.8",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-cookies": "0.0.9",
    "ember-data": "^2.18.5",
    "ember-disable-proxy-controllers": "^1.0.2",
    "ember-export-application-global": "^1.0.4",
    "ember-load-initializers": "^0.5.0",
    "ember-models-table": "1.11.0",
    "ember-moment": "7.0.0-beta.3",
    "ember-pikaday": "2.1.0",
    "ember-power-select": "1.0.0-beta.14",
    "ember-resolver": "^2.0.3",
    "ember-rl-year-picker": "^0.2.0",
    "liquid-fire": "0.24.0",
    "loader.js": "^4.0.0",
    "semantic-ui-ember": "2.0.0-beta.0"
  },
  "dependencies": {
    "ember-colpick": "^0.6.2",
    "findup": "^0.1.5",
    "semantic-ui-icon": "^2.3.3"
  }
}
// bower.json
{
  "dependencies": {
    "ember": "~2.7",
    "ember-cli-shims": "0.1.0",
    "ember-cli-test-loader": "0.2.2",
    "ember-qunit-notifications": "0.1.0",
    "hammerjs": "^2.0.6",
    "matchMedia": "0.2.0",
    "semantic-ui": "^2.2.4",
    "chartjs": "2.1.6",
    "spin.js": "^2.3.2",
    "mjolnic-bootstrap-colorpicker": "^2.3.6",
    "colpick": "2.0.2",
    "pikaday": "^1.4.0"
  },
  "devDependencies": {
    "js-cookie": "^2.1.2"
  }
}

Yes the project use bower & npm, no idea why.

Knowing this, I got some questions :

The project is quite large, so we would like to avoid remaking it with vuejs.

And to answer the "why upgrading ember ?", well, node 6 is awful. We need at least node 12


Solution

  • every version is upgradable! But the safest way to do so is probably to traverse from LTS to LTS.

    So, 2.4 -> 2.8 -> 2.12 -> 2.16 -> 2.18 -> 3.4 -> 3.8 -> 3.12 -> 3.16 > 3.20 -> 3.24 -> 3.28

    More information about Releases here

    That may sound like a lot of work, but it's why it's so important to keep up with upgrades. (It may not actually be that much work, depending on the size of your app, and how much you get distracted by new features)

    The general strategy at each step is:

    Getting off bower is a little non-standard though (in that it's a one-time thing), but there are some blog posts to help you out:

    The 2x release blog posts: https://blog.emberjs.com/tag/version-2-x The 3x release blog posts: https://blog.emberjs.com/tag/version-3-x

    From reading the 2-x blog posts, I found this migration guide for getting off bower: https://github.com/ember-cli/ember-cli/releases/tag/v2.13.0-beta.1

    However, since you're thinking about re-writing in Vue, it may make sense to just re-write in Ember 4.2 instead -- since a lot of the concepts transfer (if you're not familiar with the latest ember, I cannot recommend the tutorial enough, as it's hard to top.

    For a full list of features there is this app: https://upgrade.emberjs.com/changes?fromVersion=2.4&toVersion=4.2

    (It says to run some commands, I wouldn't do either of those commands being as far back as 2.4)

    For better support through you're upgrade, I recommend joining ember's discord server: https://discord.gg/emberjs