So we know that it's working, we were able to go and play with it in the browser but we haven't really seen the code yet and so that's what we're gonna start doing. Now, I'm gonna break the next few guides up into a few smaller chunks, I originally filmed this and it was over an hour long to go through the file system.

This course is called Dissecting Vue for a reason. I want you to have as much understanding of the Vue framework as humanly possible but no one should have to listen to me for an hour straight so we're not going to keep that video, I'm redoing it.

So now let's go into Visual Studio code or whatever code editor that you want to use. So I'm gonna use this for this course but if you wanna use Sublime text or VIM or Atom or anything like that you can definitely do that, just don't use Microsoft Word or something.

So if you hit command + O then we're gonna open up the project. So just navigate to wherever you saved it, I put it in my admin directory in code and then I have this devcamp devworkflow Project. Now I'm not gonna open it up, I'm just going to click open and that's going to bring in all of the files, the directories, everything like that, everything that got generated.

As you're gonna see that provides us with quite a bit of code. So we have our node modules directory, a public directory, SRC, and then some configuration files.

So I'm gonna start by going top to bottom and then we'll take breaks at spots that it makes sense to take a break. So starting at the very top, we have our node_modules directory and also if this old warning comes up or it says get repository here, is too big, you can hit just okay, you'll never show again. We're not gonna get into using get in this course so you don't have to worry about that.

So it created this little VS code directory here where it gives some settings but that is something that is specific to the editor, we're not going to get into that in this course at all. Now the node_modules directory, this directory is incredibly important, this is the full set of dependencies for the application.

Now if you open this up, you're gonna see that there are literally thousands of files and they're organized into directories. Each one of these is a package, it's coming straight in from the node package manager, from NPM, and it is giving us some type of functionality.

So you can definitely feel free to open this up and look at it but do not ever change any of these files and I'm going to show you why here in a moment. But let's just come up, actually, let's go all the way to the bottom and let's go take a look at Vue.

So because Vue's a dependency you can actually go into the Vue source code right here. You can see that we have this vue directory then we have the dist, which is the distributed package and this is something that is going to have all the minified code, so this is going to be compressed, it's gonna be very hard to look at.

Instead, we're going to look at the source, this is the actual source code for Vue. So you can see what the Vue server looks like, compiler. If you click on core right here you can come and see what a component JS file looks like and look at that, it's pretty magical looking, right? Nope, it's just a few lines of code.

What Vue does and pretty much every large library does is they try to keep all of their code in as small of files as possible. The Vue JS library is thousands if not tens of thousands of lines long and so if their files got too large it'd be very difficult to maintain so you're going to see a lot of files like this where they are really just a file that is gonna call another set of modules.

So you can see that we have this keep alive file right here, and I'm going to close that just so you can take a look at it and this is just some JavaScript code. So this is something that the Vue developers felt was necessary in order to build Vue properly.

And you can go through any of the files here. We're not going to dive into them to look at their functionality but instead I just wanted you to see that when it comes to a lot of these concepts like building out Vue projects, it may seem like there's some magic that happens that allows you to build these applications.

And what I wanna show you is that they're not. They are just the basic JavaScript building blocks that you already know. You can see here we have functions, we have variables, we have four loops, we have conditions. At the end of the day, every one of these libraries can be broken down into some fundamental concept like that. And so all we're doing with our node_modules is we're just taking all of those outside code libraries and we're importing them.

Now when it comes to the node_modules directory, I mentioned earlier that you do not ever wanna make changes to it and the reason is because this node_modules directory is something that you should think of as temporary. So node_modules is something that is built and then destroyed over and over again.

These are files that should simply be seen as your dependencies but the actual code right here is something that you are not going to ever change and it's gonna work pretty much silently, it's gonna work behind the scenes and if you don't believe me, I'm going to do something that may look crazy.

You saw all those files, I'm gonna right click here and I'm just gonna say delete, and I'm gonna say move to trash and on the outside of the screen I am going to go and I'm gonna delete all those files and it was something like 15,000 files or something.

Now if you come back to the terminal, I'm at a different project open that I was working on in between videos, if you stop this now and started again, you're going to get all kinds of errors and it's not gonna work because it doesn't have those libraries anymore.

But watch what happens, make sure you're in the directory of the project, if you type NPM install, this is gonna go and it's gonna go out to the NPM Registry and it's gonna pull down all of those dependencies and it's gonna build that node_modules directory completely from scratch and that is the reason why I said you do not ever wanna make changes to your node_modules because every time that this gets pushed up to production, this process is going to occur, you're not gonna ever push up your node_modules.

If you have another developer, you have another team member that is working on the same project with you, they are going to run NPM install on their own system and they're gonna bring down their own node_modules. Now, while that's installing, let's open up Visual Studio Code again and take a look at the package JSON file because I'm not sure about you but the very first question that I would have, and you can see our node_modules are back, just like magic, they've all been installed.

The first question you may ask is, how in the world does it know which modules to bring in? Well, that is where these two files come in and these will be the last two we talk about before we take a break. So we have our package.json file and this is how the application knows which node_modules to go out and get.

So if you open up that package.json file you can see that it is a set of key value pairs. It has the name of the application, the version and it also has some scripts. Now these scripts are pretty cool, if you noticed, whenever we run the server we run NPM run serve.

So anything that starts with NPM run and then you're gonna run a script, it has to be listed right here. So we only have two when we start out the application but later on we're gonna add more. So let's go and test this out, so if I switch back here into the terminal I can run NPM run serve and now that we've re-installed all of those packages this should be working.

As you can see, it's now compiling, we're not getting those errors like before. And we should be able to switch to the browser and there we go. Back on local host 8080, our application is back and working and that is the NPM run serve command. Now none of that gets in to the dependencies though so how do those work? Well, we have the list of dependencies here.

Now, by default, we just start off with vue, vue-router, and vuex. We're gonna talk about router and vuex later on. For right now, just know they are Vue related libraries. And then we have some dev dependencies here like the CLI plug ins, CLI service, some sass, sass loader and then the template compiler.

Now you may be wondering what is the difference between the dependencies and the dev dependencies? Well, the reason or the difference is hidden right here in the name. If it says dev dependencies this is the set of dependencies that are the libraries that are only needed on your local system. So these are only needed for you to build your application.

When it comes to the libraries that you need for running the app in production. So in order to build the app and what will be running on a server somewhere when users are accessing it, that is these set of dependencies.

Now, another question you may have is okay, that all makes sense hopefully but right here I can count looks like five and then three more. We have eight dependencies and we have, as you saw, thousands of node_modules. How does that work?

Well, that is because each one of these dependencies is not a single library. They bring their own set of dependencies and some of their dependencies have their own dependencies so that I know sounds very convoluted and probably confusing and that is where they package lock file comes in.

So let's open that up and close this and now what you can see, this package lock file, this is another file that you should not change. You should not ever have to make any changes directly to the lock file. But this is like the verbose version of the package JSON. So this actually shows all of the nested dependencies, so this is gonna show not just that we have Babel but also it's gonna show all of the things that Babel requires.

So Babel brings in very popular libraries like Lodash and JSON Five and Babylon and different things like that. And so if you go through that file you'll see all of the dependencies and this is everything in the application. When you run NPM install, what the system is going do, is it's gonna look at your package lock file and it's gonna go and then install all of those dependencies and that is how you get your node_modules.

So in this guide, just to review, we talked about the node_modules directory in Vue and how we're able to use that, how it's a temporary tool that our system can use to pull in all of the supporting foundational code that we are going to build with.

We remember that we do not make any changes to the node_modules directory because this directory is temporary, it is going to be removed and it's gonna dynamically be built whenever we push to production or whenever we share it with somebody else and that we use the package JSON and when the package lock file in order to generate those set of node_modules.

So great job if you went through that. In the next guide, we're gonna continue traversing down the file system.