Upgrade Your React.js Project!

Let’s say you want to share one of your projects written a year ago with your pal (who happens to be a fellow developer). How would you update the project and ensure that it still runs securely and seamlessly?

A great place to start is within your package.json file.

The image above shows that the version of React in this project is out of date. To update the project, clone the repo, and open your package.json file in your preferred editor.

Typically, when you first clone a repo, you want to make sure the project will run successfully. Usenpm installto download dependencies and npm startto run the server.

If the project is out of date, you will probably see a bunch of errors and warnings returned that might look something like the image below:

Screenshot of terminal with error messages after running `npm start`.

After you’ve run npm start and see dependency errors, the terminal will suggest you run the commandnpm audit fix. Running the audit fix command will solve some of the problems, but you will find that other errors will need to be fixed manually.

Don’t be that guy! It’s actually a good thing that npm audit fix doesn’t automatically resolve all of your vulnerabilities. This is because some updates involve “breaking changes”, meaning they might break the app. This is the trade-off when you’re updating NPM libraries. Sometimes it is preferable to resolve one issue a time to ensure that you keep track of which update is causing the problem. You can use npm auditto get a clearer idea of what all of your issues are. For example:

Screenshot of a terminal window with details of npm audit vulnerabilities found.

Alternatively, you could use the command npm audit fix --force to force-execute all suggested changes. You only want to do this if you have thoroughly looked through the suggested changes, and are confident that they will work.

Another alternative is starting with npm update which checks the dependencies in your package.json file and upgrades them to the highest available version. You can determine how large an update by using “^” in front of your version numbers to upgrade minor releases (i.e., “^16.10.2” would potentially become “16.11.0”). Using “ >” will allow for major release upgrades (i.e., “>16.10.2” would potentially become “17.0.2”). Ideally, you want to avoid the latter method, because major releases are the ones that usually result in breaking changes.

Another way to complete a version update is to visit the website of the package you are trying to update, change the version number manually in your package.json file, and run npm install.

Let’s say that you have now made the necessary upgrades, either manually or by using npm audit fix --force. Next, ensure that npm auditreturns zero vulnerabilities and that your server runs on npm start . Open up developer tools in the browser and check for any errors in your console.

And just like that, your project is updated and upgraded. Go ahead and push these changes to GitHub and send that repo link to your pal! And that, my friend, is the…

Full Stack Engineer — THIS CODE IS ON FIRE!!!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store