Difference Between package.json and package-lock.json Files in a React App
I hope you found that deep dive into the package.json file helpful in the last guide.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this guide, we're going to extend our knowledge, and we're going to see the package-lock.json file, and we're gonna see how the two are connected and how you use one versus the other.

Inside of your package.json file, we went through the name, the scripts, and all kinds of things like that. If you scroll all the way down to the dependencies list, let's take a look and just pull out a sample item, say the Express listed item right here.

So, Express is the web server that we're gonna be using later on in the course, it says Express version 4.16.3, I'm gonna copy this and let's open up the package-lock file here and give ourselves some more room. You can see that I have Express right here, it has a pretty long list of items. You can see Express is located on line 2,899.

So, you can see our package-lock file is much more extensive than the regular one, and also, if you wanna search for Express, I already had it pre opened, but if you wanna search for it, you can just hit command + F and then in double quotation marks just type Express and then you can hit return and after hitting return a couple of times it'll take you right to where Express is defined.

What is different about the package-lock versus just a regular package.json file? Well, they're structured exactly the same way. Where the difference is, is package-lock is a much more comprehensive list of all of your dependencies and all the metadata associated with your application.

And a great example is right here with Express, you can see it has the name, but now, instead of having the name and the version like we have in the package.json file, it contains quite a bit more information. We have the exact version that is being used, notice it doesn't have the little tilde item in front of it, because package-lock is very explicit.

It tells you exactly what is being used in your application. The reason why we have the little tilde in front of the version number in package.json like you can see right here,

large

the reason for that is because in the package.json file we're letting the application know that it's okay if we're working with a version that is slightly different than, say, 4.16.3, it's perfectly fine if we're using, say, 4.16.4. If there's a small security patch or something like that, that's perfectly fine, and so we'll use that.

In the package-lock file, though, it's very different, and so there is a one-to-one correlation between what we see and what's listed in the package-lock file and what is in our NPM or in our node modules list, and so this is a version that's being used.

Then it has a link to resolve, this is the actual set of files that are in the NPM registry, so this is where it goes to pull down all of those files to put them inside of our node modules directory.

Then it has a little security check here, you don't have to worry about this at all, but it's called the Integrity Check, and it is using what is called a SHA checksum, and whenever we're going out and we're asking NPM to bring us down this list, so to bring us down the Express Library, it performs a security check to make sure that someone isn't trying to jump in the middle and say, give us a library that has a virus or something like that in it.

That's what it's there for, you never have to do anything with that. It all happens automatically, but just in case you're curious, that's what it's for.

Then, this is the key item right here, when it says requires, Express as a library, does not just stand alone, it also has its own set of dependencies. Just like our application is gonna have its own set, such as Express or React, or any of the other dependencies we bring in, Express has its own set of files and other libraries that it brings in.

It has this accepts library, it has array-flatten, it has body-parser. Each one of these is a library that it brings in that it can use, and that's really one of the most important things to understand with how the package-lock file works, is that it is going to give you a very explicit look into your set of dependencies, and just into the metadata for your application.

Now, I want to give you one piece of warning, you should never, ever change your package-lock file. It's generated automatically for you, so every time that we run NPM install or anytime that we say NPM install and then we bring in a specific package, it is going to be automatically updated.

You do not want to make a change to your package-lock file or else there could be a conflict when you go and you try to install a new library. So you use this file purely as a point of reference.