**Installing Dependencies**
If you're following along and it'll do the same thing for us so when we hit enter it's going to get all those packages and install them and depending on how large the project is and how many packages you know this could take a while you know also if you have a slow internet connection or you're running this on an old computer you know you may have time to go get a cup of coffee but in this case it's a small project on a fast computer with a fast connection so it's done already. Let's go back now and look at what's new so we can see our folder tree here and look, we have this node modules folder that was not there before if we take a peek in here, here's a bunch of packages it's huge right, let's close that thing up because each one of these packages also has a package.json file with more packages right, so the bulk of our project's code is in this node modules folder.
**Ignoring Files**
okay, so that's why we have this git ignore file and this tells says these are all the files that i want get to ignore and i don't want these saved to github uh, so node modules is there because that would be a whole lot to push up to github right, so now that we have that, let's try to run our start script again and see what happens. This time, I'm going to hit the up arrow key and that's going to let me just run through all the commands that i've recently typed so this is a big time saver, so I'm going to go back up to npm run start and hit enter and let's see what happens.
**Running the Application**
All right, so it's telling me something is already running on port 3000, I happen to have another project running but that's not a big deal we can just run on a different port so I'm going to hit y and hit enter to run on a different port now on my other screen this just opened okay, so this will pop up in your default browser at localhost:3001 so for you if you don't have any other projects running it'll probably be localhost:3000 but we now have this react seating manager project and you know we can run it it works it works just like as if it was on online so if you went to that url, that's in our package.json file, you would see the same thing.
**Making Changes**
So, this is running it's working but it's running off of our code here and now we can make changes. So, let's go to our our file, let's just change something very obvious, uh where's our title there, we are let's go, I'm really excited about this so let's add three exclamation points, i think it's always a good idea, we're gonna save to use either one exclamation point or three for some reason two just bothers me and here you are, see we've changed the code, we've changed the program and we see an automatic change there not every project is going to automatically change like that it depends on how the repository owner set up the project but in this case, it automatically updates.
**Conclusion**
so, that's it, that's all you need to know to download a repository quick recap before we before we go, step one make sure you have node installed on your machine, step two uh and also node comes with npm so it's not a separate install, step three is find a repository on github and get that clone link okay when you do that, you can run git clone paste the link in and now you have the repository if there are instructions in the readme, read over those first and follow those a project may have some extra steps you need to do so if a project readme varies from what i've said in this video, go with that particular uh project's instructions.
"WEBVTTKind: captionsLanguage: enhey everyone it's jesse and today i'm going to walk through how to clone a github repository so i'm going to start way at the beginning by installing node and with that is going to come npm node package manager we're going to go over how to install git on your local machine and then we're going to actually take a repository from github we're going to clone it onto our machine and we're going to install all the packages that we need and then start it up so that we could actually see the project on our local machine and make changes if we want so let's get started you can see i have a command line terminal open so i use item and i have some custom colors here so if your terminal doesn't look like mine don't worry about it it'll still work so whether you're on windows mac or linux you know this should work pretty much the same way i'm on a mac so my commands will match up with the linux commands there may be some slight differences on windows so if some of these commands aren't working check on what the windows equivalent of these mac commands are so the first thing you want to do is install node okay this is nodejs it allows you to run server-side code server-side javascript code okay you can go to the nodejs website and the the download page will recommend downloads depending on your system so the safest bet is to go with the lts if you like to live on the edge and be you'll have the newest features you you could try to do the the current one but you know you can download this now there are other ways to download note on your machine i'm going over one way to do it so if you see a different tutorial that says something different then it doesn't mean it's wrong there there are just a variety of ways to do it when we download node this will also come with node package manager so i'm not going to download node again but just to test to make sure that we do have node on our system we can run node dash v and it tells me the version number of node so i know i have node to make sure i have npm node package manager in my system i can also run npm-v i'm sorry it's hyphen it's not a it's not a dash it's hyphen v okay and i have npm as well okay so after you go through that process which which may take a while okay now you're ready to go on to get now at any point during this process you if you're on a mac you may be prompted to download xcode download xcode it might take a while but you're going to need xcode you're also going to want to make sure you have the administrator access to your machine if you don't have admin access a lot of this probably will not work so you're going to have to figure out you know a way to get administrator access somehow on a machine so there are also a variety of ways to install git locally for me the way i usually use it seems to be the easiest is to download the github desktop app and then all your command line tools for git will also be installed it's really easy this is like download you you click it and it it's nice so you don't really have to have a lot of command line experience so that's why i like it if you want and you're not really comfortable with the command line you can even use this desktop app to do a lot of the things and get that we're going to do here on the command line so it's entirely up to you i've never used the desktop app but the result will be the same whether you use the command line or the desktop app so go ahead and download that when that's finished you can also check to make sure you have get installed by saying git v oops okay so the v doesn't work oh you actually have to type version okay so we have get installed now we can get a repository so let's go to github if you have a github account you'll see a screen like this i happen to be using the dark theme for github so by default you it won't look like this it'll be a lot lighter it won't have the black background and everything uh don't worry it you know works the same way no matter what the colors are if you don't have an account you may see a little bit of a different screen but what we want to do is navigate to an actual repository so i've already selected a repository uh that i've done and this is one i i finished up a week or two ago and you'll see here is a clone or download button that's where we want to be all right we want to go to the cloner download button a good repository will have some instructions so this one happens to have instructions to walk you through how to clone and install it so that can be very helpful you won't always see that in a repository though so what you should do first is click on this cloner download button and you want to grab this pass uh sorry not password uh address that's what i'm thinking of you want to get this address so you can copy it to your clipboard now you have to have ssh keys set up for this to work if you haven't done that you can just use this link the https link uh now we're not going to use these ways but if you'd like to use that desktop version you can just open it up right in the desktop version like this or you can download the zip file so we're going to use the ssh version of this on the command line so let's go back here to our command line by default your terminal will put you in your your home directory i don't like to clone repositories right to my home directory it makes things too messy so i create a directory called projects so let's go into that so i'm going to cd all right to change directory and i'm going to type projects okay if if you're new to the command line you'll notice that i didn't type the whole thing out a nice trick is just to type the first few letters of the directory or file you're looking for and then hit the tab key and it'll auto complete the rest of it so let's hit enter now i'm in the projects folder if i do ls it'll show me all the folders in this projects folder so you can see i have a lot of stuff going on in here uh so you can see how messy it would get if i put all of that in my home directory so that's why i like to separate it out so what we want to do now remember we've copied this so we still have that copy to our clipboard so we want to use that git command so we're going to say git space clone i'm going to put another space in there and then we're going to paste in that link that we just copied on github when we hit enter that whole project now has been saved so if we do an ls again we can see that we now have a folder and that folder is called react seating manager so the folder name matches the project name so if you want to do anything with the project we have to remember to actually go into that folder i've often made the mistake of starting to work in this projects folder and not realizing why nothing is working because i'm not i didn't actually go into that folder i actually made that mistake uh yesterday so it's very common don't worry if it happens but you want to make sure you cd right into that folder so you can see it's not i'm trying to hit tab and it's not auto completing because i have so many things that start with react it doesn't know which one i want so i have to type a little bit more there we are now let's go into there and if we hit ls and then give it a flag which means we're going to say hyphen and then put a letter in this case a we can see even the hidden files in this repository so we're seeing everything now and we see this dot get which anything with a dot in front is normally hidden but that tells us that this is a git repository which we should expect because we just got it from github all right but we also have this package json file and that's an important file so let's take a look at it before we do anything else and that package package.json file is going to show us a lot of what's going to go on uh when we go to install and then run the code that's here so i'm going to open up this project in visual studio code you can open it up in whatever editor you like to use adam is also another good editor it's open source from github visual studio code is also free there are some other paid editors like sublime which which are very good but no matter what editor you use it'll still get the job done so i'm going to type code space and then a period and that's going to open up this whole directory in visual studio code and let's maximize this so we have a little bit more space and go to that package json and now i'm going to make some more space for us here and we can see the package.json file is like instructions to the computer and to us as the the developers uh about what this project is built from and what it can do so obviously we have name version right home page which is nice for this particular project you you could go and see an action at the home page we have the dependencies now these tell the computer in this case the node package manager it tells the node package manager what packages need to be installed for this project to run properly and so this is great this is what allows us to run projects on our machine and be confident that they're most likely going to work because we're getting all the same packages in all the same versions we don't actually store all the code for all those packages in our repository on github that's why we're able to push code to github and download code from github so quickly because the bulk of the project code is going to be here in these dependencies right so by simply including this package.json file we're giving all the instructions that uh npm needs to rebuild this on someone else's computer so the packages here the the node modules live on my computer and if you download it they'll live on your computer but they'll never go up to github we also have our scripts now our scripts are going to tell us what commands we need to use to run this project so it in this project we do have oops where we at here we go in this project we do have a readme that gives instructions on how to run the project but you won't always have that sometimes the maintainers or repository may not have instructions written out like that so in that case we can look here and see what kind of scripts we have so pre-deploy we're not ready for deployment yet right we just download this but we can try this to start right and this will run react scripts start our build is going to get ready for deployment we don't want to run tests yet and we don't want to eject so pretty safe to assume if we want to run this locally for development purposes we're going to use start okay and in fact that's what it does say in the readme to use so let's run the start command to start script and see what happens whoops before we do that let's install our packages right i guess we could try the start script first let's see what happens when we do that so we could run npm run start on newer versions of npm you can leave the run out so i i believe that's optional in newer versions see look what happened we got all kind of errors it's looking for all these packages and we don't have them all right so now let's run uh you can run npm install okay so npm install will download all those packages there's an alternative to npm called yarn i happen to be using yarn on this project if you're interested in yarn you can read more about it and choose to download it if you want it does the same thing as npm so i'm gonna run yarn you can run npm install if you're following along and it'll do the same thing for us so when we hit enter it's going to get all those packages and install them and depending on how large the project is and how many packages you know this could take a while you know also if you have a slow internet connection or you're running this on an old computer you know you may have time to go get a cup of coffee but in this case it's a small project on a fast computer with a fast connection so it's done already let's go back now and look at what's new so we can see our folder tree here and look we have this node modules folder that was not there before if we take a peek in here here's a bunch of packages it's huge right let's close that thing up because each one of these packages also has a package json file with more packages right so our the bulk of our project's code is in this node modules folder okay so that's why we have this git ignore file and this tells says these are all the files that i want get to ignore and i don't want these saved to github uh so node modules is there because that would be a whole lot to push up to github right so now that we have that let's try to run our start script again and see what happens this time so i'm going to hit the up arrow key and that's going to let me just run through all the commands that i've recently typed so this is a big time saver so i'm going to go back up to npm run start hit enter and let's see what happens all right so it's telling me something is already running on port 3000 i happen to have another project running but that's not a big deal we can just run on a different port so i'm going to hit y and hit enter to run on a different port now on my other screen this just opened okay so this will pop up in your default browser at localhost 3001 so for you if you don't have any other projects running it'll probably be localhost 3000 but we now have this react seating manager project and you know we can we can run it it works it works just like as if it was on online so if you went to that url that's in our package json file you would see the same thing so this is running it's working but it's running off of our code here and now we can make changes so if we go to our our file let's just change something very obvious uh where's our title there we are let's go i'm really excited about this so let's add three exclamation points i think it's always a good idea we're gonna save to use either one exclamation point or three for some reason two just bothers me and here you are see we've changed the code we've changed the program and we see an automatic change there not every project is going to automatically change like that it depends on how the repository owner set up the project but in this case it automatically updates so that's it that's all you need to know to download a project now there are some projects that aren't javascript based you may need some other things for that but a lot of projects on github are javascript race so if you're a web developer you're most likely going to be doing something similar to this maybe in another video we'll cover what to do next like i may change is now what okay but for now you should know everything you need to know to pull down a repository quick recap before we before we go step one make sure you have node installed on your machine step two uh and also node comes with npm so it's not a separate install step two make sure you have get installed on your machine right we used github desktop app to kind of do the installation for us and then step three is find a repository on github and get that clone link okay when you do that you can run git clone paste the link in and now you have the repository if there are instructions in the readme read over those first and follow those a project may have some extra steps you need to do so if a project readme varies from what i've said in this video go with that particular uh project's instructions so let me know if this video was helpful uh if i messed up anything or there's something else that you'd like me to to cover if if this is helpful to you i'd love to do more videos so uh please let me know if you like it that's awesome if you know you could like the video but really i love feedback so you know let me know in the comments uh what you think and hopefully i'll be back soon uh with another video and be sure to check out my live streams on the free code camp youtube channel as well uh have a great day i'll see youhey everyone it's jesse and today i'm going to walk through how to clone a github repository so i'm going to start way at the beginning by installing node and with that is going to come npm node package manager we're going to go over how to install git on your local machine and then we're going to actually take a repository from github we're going to clone it onto our machine and we're going to install all the packages that we need and then start it up so that we could actually see the project on our local machine and make changes if we want so let's get started you can see i have a command line terminal open so i use item and i have some custom colors here so if your terminal doesn't look like mine don't worry about it it'll still work so whether you're on windows mac or linux you know this should work pretty much the same way i'm on a mac so my commands will match up with the linux commands there may be some slight differences on windows so if some of these commands aren't working check on what the windows equivalent of these mac commands are so the first thing you want to do is install node okay this is nodejs it allows you to run server-side code server-side javascript code okay you can go to the nodejs website and the the download page will recommend downloads depending on your system so the safest bet is to go with the lts if you like to live on the edge and be you'll have the newest features you you could try to do the the current one but you know you can download this now there are other ways to download note on your machine i'm going over one way to do it so if you see a different tutorial that says something different then it doesn't mean it's wrong there there are just a variety of ways to do it when we download node this will also come with node package manager so i'm not going to download node again but just to test to make sure that we do have node on our system we can run node dash v and it tells me the version number of node so i know i have node to make sure i have npm node package manager in my system i can also run npm-v i'm sorry it's hyphen it's not a it's not a dash it's hyphen v okay and i have npm as well okay so after you go through that process which which may take a while okay now you're ready to go on to get now at any point during this process you if you're on a mac you may be prompted to download xcode download xcode it might take a while but you're going to need xcode you're also going to want to make sure you have the administrator access to your machine if you don't have admin access a lot of this probably will not work so you're going to have to figure out you know a way to get administrator access somehow on a machine so there are also a variety of ways to install git locally for me the way i usually use it seems to be the easiest is to download the github desktop app and then all your command line tools for git will also be installed it's really easy this is like download you you click it and it it's nice so you don't really have to have a lot of command line experience so that's why i like it if you want and you're not really comfortable with the command line you can even use this desktop app to do a lot of the things and get that we're going to do here on the command line so it's entirely up to you i've never used the desktop app but the result will be the same whether you use the command line or the desktop app so go ahead and download that when that's finished you can also check to make sure you have get installed by saying git v oops okay so the v doesn't work oh you actually have to type version okay so we have get installed now we can get a repository so let's go to github if you have a github account you'll see a screen like this i happen to be using the dark theme for github so by default you it won't look like this it'll be a lot lighter it won't have the black background and everything uh don't worry it you know works the same way no matter what the colors are if you don't have an account you may see a little bit of a different screen but what we want to do is navigate to an actual repository so i've already selected a repository uh that i've done and this is one i i finished up a week or two ago and you'll see here is a clone or download button that's where we want to be all right we want to go to the cloner download button a good repository will have some instructions so this one happens to have instructions to walk you through how to clone and install it so that can be very helpful you won't always see that in a repository though so what you should do first is click on this cloner download button and you want to grab this pass uh sorry not password uh address that's what i'm thinking of you want to get this address so you can copy it to your clipboard now you have to have ssh keys set up for this to work if you haven't done that you can just use this link the https link uh now we're not going to use these ways but if you'd like to use that desktop version you can just open it up right in the desktop version like this or you can download the zip file so we're going to use the ssh version of this on the command line so let's go back here to our command line by default your terminal will put you in your your home directory i don't like to clone repositories right to my home directory it makes things too messy so i create a directory called projects so let's go into that so i'm going to cd all right to change directory and i'm going to type projects okay if if you're new to the command line you'll notice that i didn't type the whole thing out a nice trick is just to type the first few letters of the directory or file you're looking for and then hit the tab key and it'll auto complete the rest of it so let's hit enter now i'm in the projects folder if i do ls it'll show me all the folders in this projects folder so you can see i have a lot of stuff going on in here uh so you can see how messy it would get if i put all of that in my home directory so that's why i like to separate it out so what we want to do now remember we've copied this so we still have that copy to our clipboard so we want to use that git command so we're going to say git space clone i'm going to put another space in there and then we're going to paste in that link that we just copied on github when we hit enter that whole project now has been saved so if we do an ls again we can see that we now have a folder and that folder is called react seating manager so the folder name matches the project name so if you want to do anything with the project we have to remember to actually go into that folder i've often made the mistake of starting to work in this projects folder and not realizing why nothing is working because i'm not i didn't actually go into that folder i actually made that mistake uh yesterday so it's very common don't worry if it happens but you want to make sure you cd right into that folder so you can see it's not i'm trying to hit tab and it's not auto completing because i have so many things that start with react it doesn't know which one i want so i have to type a little bit more there we are now let's go into there and if we hit ls and then give it a flag which means we're going to say hyphen and then put a letter in this case a we can see even the hidden files in this repository so we're seeing everything now and we see this dot get which anything with a dot in front is normally hidden but that tells us that this is a git repository which we should expect because we just got it from github all right but we also have this package json file and that's an important file so let's take a look at it before we do anything else and that package package.json file is going to show us a lot of what's going to go on uh when we go to install and then run the code that's here so i'm going to open up this project in visual studio code you can open it up in whatever editor you like to use adam is also another good editor it's open source from github visual studio code is also free there are some other paid editors like sublime which which are very good but no matter what editor you use it'll still get the job done so i'm going to type code space and then a period and that's going to open up this whole directory in visual studio code and let's maximize this so we have a little bit more space and go to that package json and now i'm going to make some more space for us here and we can see the package.json file is like instructions to the computer and to us as the the developers uh about what this project is built from and what it can do so obviously we have name version right home page which is nice for this particular project you you could go and see an action at the home page we have the dependencies now these tell the computer in this case the node package manager it tells the node package manager what packages need to be installed for this project to run properly and so this is great this is what allows us to run projects on our machine and be confident that they're most likely going to work because we're getting all the same packages in all the same versions we don't actually store all the code for all those packages in our repository on github that's why we're able to push code to github and download code from github so quickly because the bulk of the project code is going to be here in these dependencies right so by simply including this package.json file we're giving all the instructions that uh npm needs to rebuild this on someone else's computer so the packages here the the node modules live on my computer and if you download it they'll live on your computer but they'll never go up to github we also have our scripts now our scripts are going to tell us what commands we need to use to run this project so it in this project we do have oops where we at here we go in this project we do have a readme that gives instructions on how to run the project but you won't always have that sometimes the maintainers or repository may not have instructions written out like that so in that case we can look here and see what kind of scripts we have so pre-deploy we're not ready for deployment yet right we just download this but we can try this to start right and this will run react scripts start our build is going to get ready for deployment we don't want to run tests yet and we don't want to eject so pretty safe to assume if we want to run this locally for development purposes we're going to use start okay and in fact that's what it does say in the readme to use so let's run the start command to start script and see what happens whoops before we do that let's install our packages right i guess we could try the start script first let's see what happens when we do that so we could run npm run start on newer versions of npm you can leave the run out so i i believe that's optional in newer versions see look what happened we got all kind of errors it's looking for all these packages and we don't have them all right so now let's run uh you can run npm install okay so npm install will download all those packages there's an alternative to npm called yarn i happen to be using yarn on this project if you're interested in yarn you can read more about it and choose to download it if you want it does the same thing as npm so i'm gonna run yarn you can run npm install if you're following along and it'll do the same thing for us so when we hit enter it's going to get all those packages and install them and depending on how large the project is and how many packages you know this could take a while you know also if you have a slow internet connection or you're running this on an old computer you know you may have time to go get a cup of coffee but in this case it's a small project on a fast computer with a fast connection so it's done already let's go back now and look at what's new so we can see our folder tree here and look we have this node modules folder that was not there before if we take a peek in here here's a bunch of packages it's huge right let's close that thing up because each one of these packages also has a package json file with more packages right so our the bulk of our project's code is in this node modules folder okay so that's why we have this git ignore file and this tells says these are all the files that i want get to ignore and i don't want these saved to github uh so node modules is there because that would be a whole lot to push up to github right so now that we have that let's try to run our start script again and see what happens this time so i'm going to hit the up arrow key and that's going to let me just run through all the commands that i've recently typed so this is a big time saver so i'm going to go back up to npm run start hit enter and let's see what happens all right so it's telling me something is already running on port 3000 i happen to have another project running but that's not a big deal we can just run on a different port so i'm going to hit y and hit enter to run on a different port now on my other screen this just opened okay so this will pop up in your default browser at localhost 3001 so for you if you don't have any other projects running it'll probably be localhost 3000 but we now have this react seating manager project and you know we can we can run it it works it works just like as if it was on online so if you went to that url that's in our package json file you would see the same thing so this is running it's working but it's running off of our code here and now we can make changes so if we go to our our file let's just change something very obvious uh where's our title there we are let's go i'm really excited about this so let's add three exclamation points i think it's always a good idea we're gonna save to use either one exclamation point or three for some reason two just bothers me and here you are see we've changed the code we've changed the program and we see an automatic change there not every project is going to automatically change like that it depends on how the repository owner set up the project but in this case it automatically updates so that's it that's all you need to know to download a project now there are some projects that aren't javascript based you may need some other things for that but a lot of projects on github are javascript race so if you're a web developer you're most likely going to be doing something similar to this maybe in another video we'll cover what to do next like i may change is now what okay but for now you should know everything you need to know to pull down a repository quick recap before we before we go step one make sure you have node installed on your machine step two uh and also node comes with npm so it's not a separate install step two make sure you have get installed on your machine right we used github desktop app to kind of do the installation for us and then step three is find a repository on github and get that clone link okay when you do that you can run git clone paste the link in and now you have the repository if there are instructions in the readme read over those first and follow those a project may have some extra steps you need to do so if a project readme varies from what i've said in this video go with that particular uh project's instructions so let me know if this video was helpful uh if i messed up anything or there's something else that you'd like me to to cover if if this is helpful to you i'd love to do more videos so uh please let me know if you like it that's awesome if you know you could like the video but really i love feedback so you know let me know in the comments uh what you think and hopefully i'll be back soon uh with another video and be sure to check out my live streams on the free code camp youtube channel as well uh have a great day i'll see you\n"