1 00:00:01,090 --> 00:00:03,220 Let's now go very quickly 2 00:00:03,220 --> 00:00:06,120 over the absolutely fundamentals of Git, 3 00:00:06,120 --> 00:00:10,140 and this is by no means a complete overview of Git. 4 00:00:10,140 --> 00:00:12,410 All I want to do here is to get you started 5 00:00:12,410 --> 00:00:14,730 with Git as quick as possible 6 00:00:14,730 --> 00:00:18,297 so that we can then deploy our project to Heroku. 7 00:00:19,760 --> 00:00:21,790 And as I mentioned in the last video, 8 00:00:21,790 --> 00:00:25,460 I will start using Git in the command line now, all right? 9 00:00:25,460 --> 00:00:27,100 And actually I'm using the terminal 10 00:00:27,100 --> 00:00:29,290 right here in VS Code again. 11 00:00:29,290 --> 00:00:33,320 So let's now quit the current process here, okay? 12 00:00:33,320 --> 00:00:35,770 And now here in our local project folder, 13 00:00:35,770 --> 00:00:37,950 create a new repository, 14 00:00:37,950 --> 00:00:42,750 and we do that by writing git init, okay? 15 00:00:42,750 --> 00:00:45,640 Hit Enter and that's it. 16 00:00:45,640 --> 00:00:48,650 So we just initialized an empty Git repository, 17 00:00:48,650 --> 00:00:50,990 or we can also call it just a repo. 18 00:00:50,990 --> 00:00:53,290 So that's a bit easier to say. 19 00:00:53,290 --> 00:00:56,470 So, again, in order to create a new repository, 20 00:00:56,470 --> 00:00:58,530 or repo, for your project, 21 00:00:58,530 --> 00:01:01,080 you need to navigate to that project folder, 22 00:01:01,080 --> 00:01:04,790 which here in VS Code happens kind of automatically. 23 00:01:04,790 --> 00:01:07,837 So we're automatically right here in the Home folder 24 00:01:07,837 --> 00:01:10,970 and then in there you write git init, 25 00:01:10,970 --> 00:01:14,350 and so that then spins up this new repository. 26 00:01:14,350 --> 00:01:16,170 And here in my command line, you can actually 27 00:01:16,170 --> 00:01:19,480 see this yellow part now here of the prompt, 28 00:01:19,480 --> 00:01:22,330 and probably on your terminal you won't have that, 29 00:01:22,330 --> 00:01:23,670 and it doesn't really matter. 30 00:01:23,670 --> 00:01:26,290 So all that means here is that right now 31 00:01:26,290 --> 00:01:31,100 we have a repository with a branch called master, okay? 32 00:01:31,100 --> 00:01:34,950 And a bit more about the master branch later. 33 00:01:34,950 --> 00:01:37,600 Anyway, before we now do anything else, 34 00:01:37,600 --> 00:01:40,770 let's create a special file called gitignore, 35 00:01:40,770 --> 00:01:42,863 and in there we will add all the files 36 00:01:42,863 --> 00:01:45,703 that we do not want to have in our repository. 37 00:01:47,630 --> 00:01:50,080 So that's kind of a configuration file 38 00:01:50,080 --> 00:01:53,423 just like this prettier or eslint configurations. 39 00:01:54,420 --> 00:01:58,883 So I can create a new one here. 40 00:02:00,990 --> 00:02:01,910 The output here. 41 00:02:01,910 --> 00:02:04,617 So .gitignore, like this, all right? 42 00:02:09,370 --> 00:02:11,220 And VS Code, actually once more, 43 00:02:11,220 --> 00:02:13,110 already recognized this file 44 00:02:13,110 --> 00:02:15,700 and adds this nice symbol to it. 45 00:02:15,700 --> 00:02:17,630 And the first folder that we actually want 46 00:02:17,630 --> 00:02:20,633 to completely ignore is the node_modules folder, 47 00:02:21,870 --> 00:02:24,733 so we write node_modules, all right? 48 00:02:27,720 --> 00:02:30,040 Give it a second and then also want 49 00:02:30,040 --> 00:02:32,690 to ignore the configuration file. 50 00:02:32,690 --> 00:02:34,970 So all the environment variables file. 51 00:02:34,970 --> 00:02:39,970 And so we can say all the .env files, okay? 52 00:02:40,260 --> 00:02:43,130 So the node_modules folder, we do really not want 53 00:02:43,130 --> 00:02:46,980 in our repository because that's simply not necessary. 54 00:02:46,980 --> 00:02:49,840 So, for example, if we're gonna upload our repository 55 00:02:49,840 --> 00:02:54,050 to GitHub, we then don't want to upload all these 56 00:02:54,050 --> 00:02:57,030 tens of thousands of files because once we download 57 00:02:57,030 --> 00:02:59,120 the project from GitHub somewhere else, 58 00:02:59,120 --> 00:03:02,060 we can then easily get the node_modules folder back 59 00:03:02,060 --> 00:03:05,770 by writing npm install, right? 60 00:03:05,770 --> 00:03:09,630 And so keep in mind that Git is all about sharing as well, 61 00:03:09,630 --> 00:03:13,610 not just about saving your code with snapshots over time, 62 00:03:13,610 --> 00:03:17,240 but it's really also about all this collaboration. 63 00:03:17,240 --> 00:03:19,670 Now here in VS Code on this left side, 64 00:03:19,670 --> 00:03:22,250 we actually have this integration with Git. 65 00:03:22,250 --> 00:03:24,520 So if you click here, you'll see all 66 00:03:24,520 --> 00:03:27,720 of the files that are marked as modified. 67 00:03:27,720 --> 00:03:29,810 Well, right now we don't see any here, 68 00:03:29,810 --> 00:03:34,030 so let's just reload, but they still don't show up here, 69 00:03:34,030 --> 00:03:36,250 and I think that's because we initially 70 00:03:36,250 --> 00:03:38,840 had too many files in node_modules, 71 00:03:38,840 --> 00:03:42,540 and so now VS Code is a bit confused with that. 72 00:03:42,540 --> 00:03:43,910 Let's check our Problems. 73 00:03:43,910 --> 00:03:47,160 No, it doesn't have anything to do with that, all right? 74 00:03:49,680 --> 00:03:52,423 But, anyway, that doesn't really matter, okay? 75 00:03:53,300 --> 00:03:55,940 What matters is that we can now actually also see 76 00:03:55,940 --> 00:03:59,033 all these modified files by writing git status. 77 00:04:01,170 --> 00:04:03,010 Like this, okay? 78 00:04:03,010 --> 00:04:06,550 And so here are now all the files and folders 79 00:04:06,550 --> 00:04:10,063 which are basically not yet committed to our repository. 80 00:04:11,220 --> 00:04:14,320 So Git is all about commit, and so let's now learn 81 00:04:14,320 --> 00:04:17,310 how we can commit files to the repository, 82 00:04:17,310 --> 00:04:19,590 and that's kind of a two-step process. 83 00:04:19,590 --> 00:04:23,550 First we need to add the files to a so-called staging area, 84 00:04:23,550 --> 00:04:26,030 and only after they are in this area, 85 00:04:26,030 --> 00:04:27,700 we can then commit all files 86 00:04:27,700 --> 00:04:31,380 that are there to a new commit, all right? 87 00:04:31,380 --> 00:04:32,533 So let's do that. 88 00:04:33,800 --> 00:04:38,680 So git add, and then if I want to add all the files, 89 00:04:38,680 --> 00:04:43,680 I can simply write -A, am I right? 90 00:04:43,910 --> 00:04:45,880 So that's taking a bit of time now 91 00:04:45,880 --> 00:04:47,890 because there are so many files, 92 00:04:47,890 --> 00:04:50,363 and so now if I write git status again, 93 00:04:51,360 --> 00:04:54,543 let's see, now all of them are actually green. 94 00:04:55,980 --> 00:04:59,050 So here you can see all the tons of these files 95 00:05:01,050 --> 00:05:04,610 which are now gonna be added to our git commit, okay? 96 00:05:04,610 --> 00:05:07,600 Now, actually, I don't want these cached files 97 00:05:07,600 --> 00:05:09,150 in this cache folder, 98 00:05:09,150 --> 00:05:11,513 so let's quickly get rid of this folder. 99 00:05:14,330 --> 00:05:18,623 Okay, so I hope they are gone now actually also from this. 100 00:05:19,580 --> 00:05:22,850 So let's hope they are gone from here as well now. 101 00:05:22,850 --> 00:05:25,340 And delete, they are now deleted, 102 00:05:25,340 --> 00:05:26,713 so they're no longer here, 103 00:05:27,700 --> 00:05:30,143 but let's see if all the others are still here. 104 00:05:31,300 --> 00:05:34,790 Okay, so you see that these are not staged for commit, 105 00:05:34,790 --> 00:05:36,350 but all of these other files, 106 00:05:36,350 --> 00:05:39,570 they will now be committed to the repository. 107 00:05:39,570 --> 00:05:42,010 Now probably it sounds a bit confusing to you 108 00:05:42,010 --> 00:05:45,210 why we first have to add these files to the staging area, 109 00:05:45,210 --> 00:05:47,480 and only then they can be committed. 110 00:05:47,480 --> 00:05:50,310 And the quick reason for that is that you might want 111 00:05:50,310 --> 00:05:53,860 to add different files for different commits, okay? 112 00:05:53,860 --> 00:05:56,470 So imagine you change 10 files but only want 113 00:05:56,470 --> 00:05:59,200 to commit five of them to a certain commit. 114 00:05:59,200 --> 00:06:01,670 And so by staging, you can do that. 115 00:06:01,670 --> 00:06:05,070 But we just want to keep it very simple here, 116 00:06:05,070 --> 00:06:06,830 and so we simply add all the files 117 00:06:06,830 --> 00:06:09,640 to this staging area and then commit all of them. 118 00:06:09,640 --> 00:06:11,180 And, actually, let's do it again 119 00:06:11,180 --> 00:06:13,270 because now I deleted all these files. 120 00:06:13,270 --> 00:06:18,270 So let's do git add -A again, okay? 121 00:06:19,240 --> 00:06:21,800 And so now we're ready to commit the files 122 00:06:21,800 --> 00:06:24,603 by writing git commit -m, 123 00:06:26,680 --> 00:06:29,710 and then we specify a commit message. 124 00:06:29,710 --> 00:06:32,250 And this message should really be descriptive 125 00:06:32,250 --> 00:06:34,490 of the changes that you did. 126 00:06:34,490 --> 00:06:37,920 Now usually the first commit is called Initial commit, 127 00:06:37,920 --> 00:06:39,620 and so let's do that here as well. 128 00:06:41,550 --> 00:06:46,480 So Initial commit, hit Return, and that's it. 129 00:06:46,480 --> 00:06:48,580 So with this commit we saved 130 00:06:48,580 --> 00:06:51,550 all the modifications to the repository, 131 00:06:51,550 --> 00:06:54,610 and, again, a commit is like a snapshot 132 00:06:54,610 --> 00:06:58,380 of all the code at a certain point in time, all right? 133 00:06:58,380 --> 00:07:02,170 And kind of the philosophy is to create one new commit 134 00:07:02,170 --> 00:07:05,633 each time that you do significant changes to your code base. 135 00:07:06,481 --> 00:07:10,870 So the concept of commit is really the central point of Git. 136 00:07:10,870 --> 00:07:14,880 So everything revolves around committing, okay? 137 00:07:14,880 --> 00:07:17,893 And now let's just try to modify some file here. 138 00:07:18,900 --> 00:07:20,350 So we can close all of these. 139 00:07:20,350 --> 00:07:25,163 Now let's now open up app.js here, all right? 140 00:07:26,240 --> 00:07:27,563 Close this a bit more. 141 00:07:29,070 --> 00:07:34,070 And here let's just say Start express app. 142 00:07:35,220 --> 00:07:38,070 Give it a save, and you see it right away 143 00:07:38,070 --> 00:07:41,260 in VS Code how we get this green line. 144 00:07:41,260 --> 00:07:42,540 And so that means that there 145 00:07:42,540 --> 00:07:45,810 was something new inserted at this point. 146 00:07:45,810 --> 00:07:47,510 You can now also click on it 147 00:07:47,510 --> 00:07:50,500 and see basically how it looked like before, 148 00:07:50,500 --> 00:07:53,730 and you can also, right here, move back in time. 149 00:07:53,730 --> 00:07:55,343 So revert the change. 150 00:07:56,630 --> 00:07:59,330 And the same thing when you delete something. 151 00:07:59,330 --> 00:08:01,500 So let's just delete this line of code. 152 00:08:01,500 --> 00:08:03,900 And so here you see that before 153 00:08:03,900 --> 00:08:06,130 basically there was something. 154 00:08:06,130 --> 00:08:08,340 So, again, you can click that 155 00:08:08,340 --> 00:08:11,740 and basically see what there was before. 156 00:08:11,740 --> 00:08:13,560 You can move back in time, 157 00:08:13,560 --> 00:08:16,123 and so let's do that in order to bring it back. 158 00:08:17,409 --> 00:08:19,583 Now let's quickly try to load it here, 159 00:08:20,600 --> 00:08:23,870 but for some reason the changed files do not appear here. 160 00:08:23,870 --> 00:08:27,960 So, ideally, now app.js would be here in this list 161 00:08:27,960 --> 00:08:32,580 because that is the file that I just edited, okay? 162 00:08:32,580 --> 00:08:35,270 But, again, anyway, that's not really important. 163 00:08:35,270 --> 00:08:37,900 It should also show up here in this file tree 164 00:08:37,900 --> 00:08:42,530 with a different color as soon as I edited it, okay? 165 00:08:42,530 --> 00:08:44,623 Now if we say git status again, 166 00:08:46,280 --> 00:08:51,280 then you will see here modified: app.js, okay? 167 00:08:51,730 --> 00:08:54,160 So that's the only output that we have here, 168 00:08:54,160 --> 00:08:56,420 and you also see that the changed 169 00:08:56,420 --> 00:08:59,770 are not yet staged for commit, okay? 170 00:08:59,770 --> 00:09:02,670 And so now, again, let's add all of them. 171 00:09:02,670 --> 00:09:05,810 So git add and then -A, 172 00:09:05,810 --> 00:09:09,313 or we could also just add this single file to the add. 173 00:09:10,300 --> 00:09:14,440 So app.js, all right? 174 00:09:14,440 --> 00:09:18,430 Let's try git status again, and so now it is green. 175 00:09:18,430 --> 00:09:21,940 And so that means that the changes will be committed 176 00:09:21,940 --> 00:09:24,300 as soon as we do a new commit. 177 00:09:24,300 --> 00:09:27,743 So let's do that, git commit -m. 178 00:09:29,820 --> 00:09:34,820 For the message, Added a comment, 179 00:09:36,810 --> 00:09:38,550 and that's it. 180 00:09:38,550 --> 00:09:41,000 So, you see, the message added the comment. 181 00:09:41,000 --> 00:09:43,850 One file has changed and there was one insertion. 182 00:09:43,850 --> 00:09:45,450 So that's this line here. 183 00:09:45,450 --> 00:09:49,150 And so now that green bar that we had here is gone, 184 00:09:49,150 --> 00:09:52,600 and so that means that everything is now clean again. 185 00:09:52,600 --> 00:09:55,640 Now you also see that this master here, 186 00:09:55,640 --> 00:09:57,030 you also see it here, 187 00:09:57,030 --> 00:10:00,040 and that means that we are on the master branch. 188 00:10:00,040 --> 00:10:04,180 So branches are another very important concept in Git, 189 00:10:04,180 --> 00:10:07,070 but I will not really go into that at this point. 190 00:10:07,070 --> 00:10:10,750 For now we will always just work in the master branch. 191 00:10:10,750 --> 00:10:14,140 Great, so now you have a local repository 192 00:10:14,140 --> 00:10:16,920 with all your code committed to it. 193 00:10:16,920 --> 00:10:19,000 And so in the next video, let's actually 194 00:10:19,000 --> 00:10:22,480 push this branch onto a remote branch on GitHub. 195 00:10:22,480 --> 00:10:25,170 So basically host it on the GitHub account 196 00:10:25,170 --> 00:10:26,960 that we just created before. 197 00:10:26,960 --> 00:10:28,560 So I hope to see you there soon.