Welcome back.
I've just put our robo friends project on GitHub but let's say you're downloading this project.
Maybe you're sharing a project with other developers but this project let's say was written last year.
How can we update this project if you remember when we look at the package.
Dot Jason File.
We have the react version as sixteen point two but the react version is now higher.
So let's update this project as you would on any other project.
I'm going to clone this repo and I'm going to use SS H.
You might have to use HDP s if you haven't had that setup but I'm going to use SSA just so I don't have
to enter my password every time.
So I'm going to clone this repo say get clone robo friends awesome.
Now if I go into my robo friends folder and I open this and sublime.
There we go.
We have our package dot Jason File which we can see over here.
Now when I usually download a project I want to make sure it starts.
So I'm going to say NPM start and make sure that everything is still working and I get an error because
I have to first do npm install
Oh boy.
And we get a bunch of errors or warnings saying we've audited some of your packages and there's a few
vulnerabilities.
Actually quite a lot.
And two critical one and we can run NPM audit fix to fix the so let's copy that and run that again
and now I get another issue that twenty seven vulnerabilities required manual review.
And you see here that it's mainly because some of them require what we call breaking changes it might
break our app.
And this is the tradeoff when updating libraries you are using an older version of a library that may
have changed and now breaks your app completely so sometimes you want to go one by one to actually check
and see what the changes are in these libraries.
Now if I run NPM plot it here
it'll actually give me some idea of what my issues are now.
Before I do NPM audit fix and then do dash dash force to force all those changes I want to talk a little
bit about this package that Jason
you see the react scripts which is the create react app script that runs is outdated.
There's a way higher version of React scripts a bigger version of the CIA create react.
And same with react.
So one thing I can do is say NPM update and if I run this and when I click on this file check this out
did you see that.
My version's got updated now and p.m. update what it does is it looks at this version and says What's
the highest version that I can upgrade to in my case because I use that card.
It said hey you can upgrade to whatever the highest version is in the minor release.
So if there was a react version 17 well this wouldn't upgrade to 17 because we're using the carrot.
Remember we can use greater than if we want to but this way we make sure that we only update whatever
is in the minor release which tends to not have any breaking changes.
For example when we have react 17 that's most likely going to have some breaking changes.
Okay.
So we have the react version updated but we still have these vulnerabilities that we need to fix let's
now run the audit fix and force assuming that we've looked through the changes and we assume that it's
ok everything should still work.
So I'm going to run this and again keep in mind that when using force you want to make sure that you
actually review the updates.
Now while this is going another thing I could have done with react is actually gone to the react Web
site and checked the actual version and instead of having that cared just or doing NPM update I could
just change the version let's say version 17 comes out in react seventeen point zero point two.
Well I can just change that and package that Jason and run npm install again
let's clear this.
We see here that our ReACT script is now updated to version three point two.
That is the latest version of create react.
That's awesome.
If I do NPM audit once again I have zero vulnerabilities.
All right.
Looks like everything is looking fine but we have one issue right.
We've updated everything that we have.
There's no vulnerabilities but because we've updated all these things will our project still work while
there's one way to find out.
Let's do NPM start.
All right.
The new create react app asked me for a target browser so I'll click yes here and look at that.
Looks like things are still working.
Good job robo friends.
If I open up the developer tools and I go to console there's no errors.
That's great so just like that I was able to update my project upgrade my project with all the latest
react all the latest react on the react scripts which is what create react app uses.
We have TAC yarns updated as well and everything is working fine.
So I can now push this change to get hub so that we don't have those security warnings.
Let's do that.
I'm going to say get ad get commit.
I'll say fixing security issues updated libraries
to get push origin master because while I'm the only one on this project so I can just push to Max sir.
Now if I go back to my github page and I refresh let's check out the security tab and look at that we
have zero closed zero open because our project is now fully up to date.
How cool is that.
This is a great way to keep your projects updated and the security vulnerabilities fixed.
But the more libraries you have the more dependencies you have the more maintenance you have to do to
make sure that every time you update a library that it doesn't break your app.
Our robo friends app was fairly small but you can imagine this being a bigger and bigger issues as applications
grow.
But I hope you learned one little trick that took me a long time to actually learn and my developer
career.
That is the easiest way to keep your projects up to date and secure is to just simply update the package.
On file.
I'll see in the next one by.