How to Clone a GitHub Repository for Beginners

Key Takeaways

Hey everyone, it's Jesse and today I'm going to walk through how to clone a GitHub repository. So, I'm I'm going to start way at the beginning by installing node and with that is going to come 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 of the packages that we need, and then start it up so that we can actually see the project on our local machine and make changes if if we want. So, let's get started. You can see I have a command line terminal open. So, I use iTerm 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 node.js. It allows you to run server-side code uh server-side JavaScript code, okay? Uh you can go to the node.js 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 uh live on the edge and be, you you 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 Node on your machine. I'm going over one way to do it. Uh so, if you see a different tutorial that says something different, then you know, it doesn't mean it's wrong. Uh there are 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 -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, on 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 Git. 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 uh 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 uh somehow uh 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 in Git 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 uh 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 Git installed by saying Git V. Oops. Okay, so V doesn't work. Oh, you actually have to type version. Okay. So, we have Git 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, you know, it works the same way no matter what the colors are. Uh if you don't have an account, you may see a a little bit of of a different screen. Uh 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're going to go to the clone or 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 clone or download button. And you want to grab this pass uh sorry, not password. Uh address, that's what I where 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 uh your home directory. I don't like to clone repositories right to my home directory. It makes things too messy. So, I created 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 copied 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. And 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 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 get 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.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 uh the code that's here. So, I'm going to open up this project in Visual Studio Code. Uh you can open it up in whatever editor you like to use. Atom is also another good editor. It's open source from uh GitHub. Visual Studio Code is also free. Uh there are some other paid editors like Sublime, uh 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. Now, 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. Uh so, obviously we have name, version, right? Homepage, which is nice. Uh, for this particular project, you you could go and see it in action at the homepage. 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. Okay, so this is great. This is what allows us to run uh, projects on our machine and be confident that they're most likely going to work because we're getting all the same packages and 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, in in this project, we do have Oops, where are 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 uh the maintainers of the 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 downloaded this. Uh but we can try this uh the start, right? And this will run React scripts start. Our build is going to get ready for deployment. We don't want to run test 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 it does say in the readme to use. So, let's run the start command, the 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. Uh 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 going to 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 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 get ignore file and this tells says these 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. Cuz 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 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 uh online. So, if you went to that URL that's in our package.json file, uh 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. And it's always a good idea, we're going to save, to use either one exclamation point or three. For some reason, two just bothers me. And there 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 uh set up the project. But, in this case, it automatically updates. Uh so, that's it. That's all you need to know to download a project. Uh now, there are some projects that aren't JavaScript-based. You may need some other things for that. Uh but, a lot of projects on GitHub are JavaScript-based. 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 made changes, now what? Okay? Uh but, for now, you should know everything you need to know to pull down a repository. Quick recap before we before we go. Uh 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 Git installed on your machine. Right? We used GitHub Desktop uh app to kind of do the installation for us. And then, step three is find a repository on GitHub and get that clone uh 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's 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, uh if if this is helpful to you, I'd love to do more videos. So, please let me know. If you like it, that's awesome. If you could like the video, but really I love feedback. So, you know, let me know in the comments what you think. And hopefully I'll be back soon with another video. And be sure to check out my live streams on the freeCodeCamp YouTube channel as well. Have a great day. I'll see you.