How to update legacy React/Angular/Ember/Vue project? [Definitive guide]

Sometimes you will run into a project, that has not been updated for several weeks, or even months! Taking into an account, such project in React, Angular, Vue, Svelte, Ember can have over one hundred of dependencies, it may take some time to update it.

In this definitive guide I will show you how to update legacy project easily. Examples of codes show yarn commands, but almost similar ones you can use for npm.

Update node.js

First of all you should update node. If you have installed nvm (what i recommend), it is very easy to install new versions and switch between them:

nvm install --lts
nvm list
nvm use LATEST-VERSION-NUMBER

First command installs latest node.js long term support version of node.js. Second line — lists all installed versions. From the list you can find out what is the number of latest LTS. With third line, you switch to the latest version. Just replace LATEST-VERSION-NUMBER with the number discovered with second line of bash code.

Check if application works

You will have to check if application works often during the process. There are two methods you can use. You can run unit tests. If you don’t have them, it’s great to…