1 00:00:00,180 --> 00:00:04,610 In this video you're going to initialize get in the web server folder. 2 00:00:04,680 --> 00:00:11,360 Once our project is under version control we'll be able to track changes to all of our application files. 3 00:00:11,370 --> 00:00:17,370 Now as I mentioned in the last video when we want to use get we have to explicitly initialize it in 4 00:00:17,370 --> 00:00:20,330 the project where we're trying to use it for us. 5 00:00:20,340 --> 00:00:24,450 That means we need to run a command from the web server folder. 6 00:00:24,450 --> 00:00:30,120 Now it's important that we run this command from the web server folder and not from a nested directory 7 00:00:30,180 --> 00:00:37,380 like the public folder or from a parent directory like node Course the Command we run needs to be from 8 00:00:37,470 --> 00:00:40,860 the root project folder which is web server. 9 00:00:40,860 --> 00:00:47,020 So right here in the web server directory we are going to use the get in it command. 10 00:00:47,250 --> 00:00:52,560 Let's run the command and initialize get in our project when we do that quite a few different things 11 00:00:52,560 --> 00:00:53,580 are going to happen. 12 00:00:53,580 --> 00:00:57,780 Let's go ahead and start with the output we're getting in the terminal down below. 13 00:00:57,780 --> 00:01:01,050 Right here we got the following message initialized. 14 00:01:01,050 --> 00:01:01,440 Empty. 15 00:01:01,440 --> 00:01:08,760 Get repository in followed by a path to our project folder to the web server directory where we ran 16 00:01:08,760 --> 00:01:13,000 the command from from there get has created a new folder. 17 00:01:13,020 --> 00:01:18,430 Dot get this is where get stores everything that makes up your get project. 18 00:01:18,450 --> 00:01:24,450 So as we add new files and create new commits those are going to end up getting stored in data structures 19 00:01:24,480 --> 00:01:25,850 inside of Dot. 20 00:01:25,890 --> 00:01:30,900 Get this directory is not something we're going to manage ourselves we're not going to go inside of 21 00:01:30,900 --> 00:01:33,240 there and change or add things. 22 00:01:33,240 --> 00:01:40,080 Instead it is managed by get and it gets altered when we run get commands which we'll do in just a few 23 00:01:40,080 --> 00:01:41,180 moments. 24 00:01:41,190 --> 00:01:48,240 Now you'll notice they're using the term repository outside of the context of get a repository is defined 25 00:01:48,240 --> 00:01:50,720 as a place where things are stored. 26 00:01:50,760 --> 00:01:56,810 So a get repository is nothing more than a place where things related to get are stored. 27 00:01:57,000 --> 00:02:00,930 We're going to see the word repository come up quite a bit in this case. 28 00:02:00,930 --> 00:02:02,880 We have a local repository. 29 00:02:02,940 --> 00:02:04,140 It's in a directory. 30 00:02:04,170 --> 00:02:09,550 Dot get on our machines as we start to integrate with get hub and Heroku. 31 00:02:09,630 --> 00:02:13,710 We'll have remote repositories where our code is backed up. 32 00:02:13,770 --> 00:02:19,830 For example Heroku needs the code to deploy to the server and get hub needs the code so it can actually 33 00:02:19,860 --> 00:02:24,500 use it as part of its little software project management platform. 34 00:02:24,540 --> 00:02:29,880 Now that we have get initialized let's talk about a couple of the other things we're seeing here in 35 00:02:29,880 --> 00:02:35,760 the tree view on the left hand side bar everything in the web server folder just showed up in green 36 00:02:36,210 --> 00:02:42,990 so Visual Studio code by default has it get support and when we initialize a project it shows files 37 00:02:43,020 --> 00:02:45,930 in green that have not yet been committed. 38 00:02:46,140 --> 00:02:52,650 So these are brand new files which would show up under that on tracked files category that we had saw 39 00:02:52,740 --> 00:02:54,630 in the previous video. 40 00:02:54,630 --> 00:03:00,350 You'll also notice that while a new directory was created it's not showing up inside of the web server 41 00:03:00,360 --> 00:03:02,780 folder where it actually lives. 42 00:03:02,790 --> 00:03:07,200 That's because Visual Studio code hides that directory by default. 43 00:03:07,200 --> 00:03:11,130 It's not something we're manually going to change or manage. 44 00:03:11,130 --> 00:03:19,660 Now if you wanted to see what's inside of there you could if we go up to code Preferences Settings we 45 00:03:19,660 --> 00:03:22,750 can change the setting to actually see that directory. 46 00:03:22,870 --> 00:03:26,760 Let's take a quick moment to get that done under commonly used. 47 00:03:26,770 --> 00:03:34,030 If we scroll down about a dozen or so settings we're gonna see a small list of excluded files and folders 48 00:03:34,240 --> 00:03:36,600 one of them being dot get. 49 00:03:36,640 --> 00:03:40,210 That's why it's being ignored in the tree view over here. 50 00:03:40,210 --> 00:03:41,830 Let's go ahead and change this. 51 00:03:41,950 --> 00:03:44,560 Instead of dot get with one T. 52 00:03:44,560 --> 00:03:47,230 I'll just use dot get with two T's. 53 00:03:47,410 --> 00:03:53,050 We're going to click OK and we'll revert that change in just a moment and when we do we can see that 54 00:03:53,050 --> 00:03:56,650 a GET DIRECTORY does you show up if we crack that open. 55 00:03:56,650 --> 00:03:59,670 We can see there are all sorts of things inside of here. 56 00:03:59,680 --> 00:04:01,970 This is what makes up the get repository. 57 00:04:01,990 --> 00:04:05,020 And this is the stuff that we're never going to touch. 58 00:04:05,050 --> 00:04:07,540 So let's go ahead and collapse that directory. 59 00:04:07,540 --> 00:04:12,820 And we're also going to alter the pattern once again to have just one T. 60 00:04:12,850 --> 00:04:17,600 We'll click OK and that'll make sure that the get folder is indeed hidden. 61 00:04:17,650 --> 00:04:24,070 So that is what get in it does the only thing it does is it creates that new directory dot get and add 62 00:04:24,070 --> 00:04:25,860 initialize is the project. 63 00:04:25,900 --> 00:04:32,650 From here we can start the process of using the ad command and the commit command to actually track 64 00:04:32,650 --> 00:04:37,390 things with get from here we can go ahead and run another command from the terminal. 65 00:04:37,390 --> 00:04:44,590 This is the get status command get status prints the current status of our setup and this is going to 66 00:04:44,590 --> 00:04:49,180 show us output similar to what we saw in the visualization in the last video. 67 00:04:49,540 --> 00:04:56,230 If I run it one of the main categories here is entourage files and under there we can see all of the 68 00:04:56,230 --> 00:05:00,040 things that make up our project we haven't created a committee. 69 00:05:00,070 --> 00:05:04,570 So nothing is being tracked and that's why everything shows up under here. 70 00:05:04,570 --> 00:05:10,930 We have node modules we have our two Jason files we have the public directory list source directory 71 00:05:10,960 --> 00:05:13,420 and the templates directory. 72 00:05:13,420 --> 00:05:19,780 So from here we could use get add to add things to the staging area and get commit to actually commit 73 00:05:19,780 --> 00:05:21,900 them before we do though. 74 00:05:22,030 --> 00:05:28,000 There is a single folder in our project we don't want and get to track and that is the node modules 75 00:05:28,000 --> 00:05:34,450 directory when you're using get and you're using NPM you don't want to get to track the node modules 76 00:05:34,450 --> 00:05:37,690 folder as this is a generated directory. 77 00:05:37,690 --> 00:05:44,380 We can always recreate it by running npm install npm install is going to use the contents of package 78 00:05:44,680 --> 00:05:51,340 Jason and package lock dot Jason to bring this directory back to its exact state. 79 00:05:51,340 --> 00:05:58,630 So get doesn't need to know what's inside of node modules what's inside of there is a ton of other files 80 00:05:58,630 --> 00:06:03,790 and folders that are already under version control by the project owners. 81 00:06:03,790 --> 00:06:08,360 Now get gives us a very easy way to ignore things from our setup. 82 00:06:08,440 --> 00:06:12,940 We do that by creating a new file in the repository root for us. 83 00:06:12,940 --> 00:06:19,780 That means we create a new file in the web server directory and we're gonna call this dot get ignore 84 00:06:19,990 --> 00:06:21,710 and the name is very important. 85 00:06:21,790 --> 00:06:26,620 If it's not exactly spelled right gets not going to be able to find the file. 86 00:06:26,620 --> 00:06:31,270 Now in here we can simply list out the things we don't want and get to track. 87 00:06:31,270 --> 00:06:36,760 And for us that's going to be node underscore modules forward slash. 88 00:06:36,760 --> 00:06:43,590 Now when we do this get is not going to track that directory even if we tried to use get add. 89 00:06:43,600 --> 00:06:49,690 We'll see that it won't show up under contract files and we can go ahead and rerun and get status to 90 00:06:49,690 --> 00:06:53,090 prove that I'm going to run and get status once again. 91 00:06:53,110 --> 00:06:57,700 Right here we can see that node modules is nowhere in sight which is a good thing. 92 00:06:57,790 --> 00:07:03,670 And then we have dot get ignore it which is showing up because that's a new file we've added. 93 00:07:03,670 --> 00:07:10,060 So at this point in time everything in Entourage files are things we actually do want to track. 94 00:07:10,060 --> 00:07:15,790 These are the things that make up our application and we want to keep track of all of these files over 95 00:07:15,790 --> 00:07:16,570 time. 96 00:07:16,570 --> 00:07:19,430 That means that we're ready to create our first commit. 97 00:07:19,480 --> 00:07:23,190 You'll notice that up above node modules is now grayed out. 98 00:07:23,200 --> 00:07:27,640 This is Visual Studio code letting us know that well this thing exists. 99 00:07:27,640 --> 00:07:30,070 It has been ignored by version control. 100 00:07:30,130 --> 00:07:32,330 We can still open it and look at what's inside. 101 00:07:32,330 --> 00:07:38,620 Everything's just shown in a lighter gray to signify that it's ignored down below we can now use get 102 00:07:38,620 --> 00:07:44,430 added to add things to that staging area right here that is get add. 103 00:07:44,440 --> 00:07:50,020 Now when we use get add we have to list out the things that we want to add in this case we can list 104 00:07:50,020 --> 00:07:56,950 out things we are seeing here in Entourage files I could list out individual files or entire directories 105 00:07:56,980 --> 00:08:04,780 for example get add followed by source forward slash when I do that it's going to add all of the files 106 00:08:04,810 --> 00:08:11,200 in the source directory to the staging area meaning they're ready to be committed I can run get status 107 00:08:11,200 --> 00:08:17,850 to see that right here get status under contract files you'll notice that the source directory is no 108 00:08:17,850 --> 00:08:19,100 longer listed. 109 00:08:19,110 --> 00:08:23,910 That's because we've added it to the staging area so it's showing up up above. 110 00:08:23,910 --> 00:08:26,460 Under changes to be committed. 111 00:08:26,460 --> 00:08:31,110 Right here we have all three files that exist in that source folder. 112 00:08:31,110 --> 00:08:36,390 Now we could choose to make a comment with just these files in it but I do want to track all of the 113 00:08:36,390 --> 00:08:43,260 files that we have listed down below as well get add it gives us a shortcut to add everything that is 114 00:08:43,260 --> 00:08:45,120 get add dot. 115 00:08:45,120 --> 00:08:51,000 This is going to add everything to the staging area which in this case means everything listed right 116 00:08:51,000 --> 00:08:51,690 here. 117 00:08:51,870 --> 00:08:58,170 So I'll use get ad done then I'll run and get status once again and we can see that now we have a whole 118 00:08:58,170 --> 00:09:01,590 bunch of files listed under changes to be committed. 119 00:09:01,590 --> 00:09:08,490 We no longer have that on track to file section because there are no entourage files left now that our 120 00:09:08,490 --> 00:09:10,400 staging area is set up. 121 00:09:10,440 --> 00:09:15,370 We can actually create the commit and we do that using get commit. 122 00:09:15,570 --> 00:09:23,460 That is SEO and I.T. and we have to provide a message with each commit describing what exactly changed 123 00:09:23,550 --> 00:09:24,380 right here. 124 00:09:24,480 --> 00:09:31,290 We do that by providing the M flag followed by our message inside of quotes and for the first commit 125 00:09:31,500 --> 00:09:37,980 something like initial commit or in it commit is typically used as we create other commits will describe 126 00:09:37,980 --> 00:09:39,320 exactly what we're doing. 127 00:09:39,390 --> 00:09:45,300 Like adding new feature to allow people to communicate privately or adding support for image uploading 128 00:09:45,360 --> 00:09:51,480 a nice concise description of what exactly the changes are adding to the project. 129 00:09:51,570 --> 00:09:55,280 In this case though in it commit gets the job done for that first commit. 130 00:09:55,440 --> 00:09:57,240 I had enter and what happens. 131 00:09:57,270 --> 00:10:04,380 A new commit has been created now right here when we run that commit command we get a bunch of output. 132 00:10:04,380 --> 00:10:12,210 I can see right away that we have 16 files being changed and all 16 are listed down below and right 133 00:10:12,210 --> 00:10:12,540 here. 134 00:10:12,600 --> 00:10:18,780 All of them are being created for the first time they're being added to get I see create next to all 135 00:10:18,870 --> 00:10:20,010 16. 136 00:10:20,130 --> 00:10:27,150 So at this point we have one commit inside of our get repository and you'll notice over here that all 137 00:10:27,150 --> 00:10:32,100 of the files are back to their default color because now they are not new. 138 00:10:32,100 --> 00:10:38,520 Entourage files as we make changes to our application though the colors will change once again. 139 00:10:38,520 --> 00:10:45,240 For example in app dot J S I had this console dot log call which we had previously used to make sure 140 00:10:45,240 --> 00:10:47,580 the file was actually running. 141 00:10:47,640 --> 00:10:54,540 I'm gonna go ahead and remove that Save the file and over in the left hand sidebar I can now see that 142 00:10:54,570 --> 00:11:00,460 old directories up to and including app dot J S they're showing up in orange. 143 00:11:00,470 --> 00:11:05,300 This means that we have changes to a file that get is already tracking. 144 00:11:05,460 --> 00:11:11,930 So I see that for web server public J S and for the modified file itself. 145 00:11:11,940 --> 00:11:18,090 So at this point we now have a single change made to the project and we could add that to the staging 146 00:11:18,090 --> 00:11:20,430 area and create a another commit. 147 00:11:20,430 --> 00:11:25,890 Now let's go ahead and run get status get status is something we're gonna run a lot throughout this 148 00:11:25,890 --> 00:11:26,350 course. 149 00:11:26,370 --> 00:11:31,560 So we can make sure that our changes are actually doing what we're expecting them to do. 150 00:11:31,620 --> 00:11:37,810 And right here I can see we have just a single category changes not staged for commit. 151 00:11:37,830 --> 00:11:43,440 This is the onstage changes category from the previous video where we had our visualization. 152 00:11:43,440 --> 00:11:50,310 Right here we have one modified file it is app not J.S. in the public J.S. directory which is the exact 153 00:11:50,310 --> 00:11:54,210 file we had modified up above in the text editor. 154 00:11:54,210 --> 00:12:00,510 Now we can actually add this to the staging area and make the commit so to add it to the staging area 155 00:12:00,570 --> 00:12:07,500 we'll use get add I could either list out this individual file or just use get add dot to add everything 156 00:12:07,620 --> 00:12:09,900 which in this case is just our one file. 157 00:12:09,900 --> 00:12:12,210 Either way works from here. 158 00:12:12,240 --> 00:12:18,120 I'm gonna run get status again before committing just to make sure everything looks right under changes 159 00:12:18,120 --> 00:12:18,930 to be committed. 160 00:12:18,930 --> 00:12:25,620 We have a single modification to a single file so I'm ready to make that commit right here. 161 00:12:25,620 --> 00:12:33,660 That's get commit with the M flag to provide our message and I can use a message like remove unnecessary 162 00:12:34,760 --> 00:12:36,750 console dialogue. 163 00:12:36,860 --> 00:12:37,420 Call. 164 00:12:37,550 --> 00:12:38,480 Perfect. 165 00:12:38,540 --> 00:12:44,150 Now that we have the message in place I can hit enter to actually create the comment and write down 166 00:12:44,150 --> 00:12:44,550 below. 167 00:12:44,570 --> 00:12:46,010 We get our output. 168 00:12:46,010 --> 00:12:50,170 I can see that we had one file changed and we had two deletions. 169 00:12:50,180 --> 00:12:57,800 We deleted line 1 and 2 line 1 had the console dialog in line 2 was an empty line between that and what 170 00:12:57,800 --> 00:13:00,730 we now have as line 1 up above. 171 00:13:00,740 --> 00:13:08,720 So now we have a local get repository with two comments one which added everything into the repository 172 00:13:08,960 --> 00:13:14,030 and another which tracked a change to one of our already tracked files. 173 00:13:14,030 --> 00:13:18,960 Now it's time for a quick challenge where you're going to put the notes app under version control. 174 00:13:18,980 --> 00:13:22,340 I have challenged comments sitting right here as I just mentioned. 175 00:13:22,340 --> 00:13:25,710 Goal is to put the notes app under version control. 176 00:13:25,760 --> 00:13:33,110 Step one is to initialize a new repository or repo for short in that project directory in the notes 177 00:13:33,170 --> 00:13:34,340 app folder. 178 00:13:34,340 --> 00:13:39,450 Once you have that in place you do want to tell get to ignore the node modules directory. 179 00:13:39,500 --> 00:13:46,940 Since that project also uses modules from NPM and we don't want to track that folder and last up you 180 00:13:46,940 --> 00:13:54,230 want to commit all files to the repository creating an initial commit and to do that you'll use a combination 181 00:13:54,230 --> 00:13:59,090 of get add and get status and obviously get commit. 182 00:13:59,090 --> 00:14:05,330 So take some time to knock that out put the notes app under version control creating a single commit 183 00:14:05,540 --> 00:14:12,900 with all of the project files except for what's under node modules then come back and click play. 184 00:14:16,610 --> 00:14:17,490 How would you do. 185 00:14:17,490 --> 00:14:20,340 Let's go ahead and work through this process together. 186 00:14:20,340 --> 00:14:26,190 First up I'm going to close down Epcot and J.S. and I'll temporarily switch from web server over to 187 00:14:26,190 --> 00:14:33,000 notes app and I'll do the same thing in the terminal down below C D dot dot to get out of the web server 188 00:14:33,000 --> 00:14:37,560 folder then forward slash notes app to go into that directory. 189 00:14:37,560 --> 00:14:40,920 From here I'll use clear to clear the terminal output. 190 00:14:40,920 --> 00:14:47,520 Now the first thing we want to do is initialize a new repository for this project and we do that by 191 00:14:47,520 --> 00:14:50,490 running get in it as we did before. 192 00:14:50,580 --> 00:14:55,890 This is going to set up a new repository in the notes after rectory and now we're ready to start the 193 00:14:55,890 --> 00:14:59,400 process of actually setting things up the way we want them. 194 00:14:59,400 --> 00:15:05,340 The first thing we're gonna do is make sure that node modules never finds its way into the repository 195 00:15:05,520 --> 00:15:08,770 by setting up the getting your file right here. 196 00:15:08,830 --> 00:15:17,890 Don't get ignore and then we will set it up with just one entry node underscore modules forward slash. 197 00:15:17,910 --> 00:15:23,670 Now we can see that's been great out which means that that directory and the files inside of it won't 198 00:15:23,670 --> 00:15:24,960 get tracked. 199 00:15:24,960 --> 00:15:29,170 From here we can move on to the last step which is to create our initial comment. 200 00:15:29,250 --> 00:15:34,830 I'm going to start by running get status just to make sure everything looks correct down below. 201 00:15:34,860 --> 00:15:39,720 The only category we have is on tracked files and we have our files under there. 202 00:15:39,720 --> 00:15:41,610 We got all six of them. 203 00:15:41,610 --> 00:15:50,920 From here we can use get ad with DOT to add all of those over to the staging area and after I do that 204 00:15:50,950 --> 00:15:55,360 I will run and get status once again to make sure that things look good. 205 00:15:55,360 --> 00:16:00,100 Right here we have all of the things that are gonna be committed the next time we create a comet and 206 00:16:00,100 --> 00:16:01,240 this is what we want. 207 00:16:01,240 --> 00:16:07,810 We have our files here without node modules so we can go ahead and wrap up Step Three by running get 208 00:16:07,810 --> 00:16:08,760 Comet. 209 00:16:08,920 --> 00:16:11,260 We'll provide a message and we can use in it. 210 00:16:11,260 --> 00:16:17,440 Comet which is typically the message used for the first comet so right here we're going to create that 211 00:16:17,440 --> 00:16:22,510 comet and we can see that for all six files we have create mode being used. 212 00:16:22,600 --> 00:16:29,320 We have six files changed and we have five hundred and eighty seven lines being inserted now that we 213 00:16:29,320 --> 00:16:32,620 have this in place the notes app is under version control. 214 00:16:32,680 --> 00:16:38,140 If we were to make changes to the application in the future we would be able to track those changes 215 00:16:38,200 --> 00:16:39,520 as well. 216 00:16:39,520 --> 00:16:47,260 Now I'm going to run C.D. dot dot forward slash web server to switch back to that directory since the 217 00:16:47,260 --> 00:16:52,750 challenge is over and I'll use clear to clear the terminal output and I'm going to switch from the notes 218 00:16:52,750 --> 00:16:56,750 app folder back over to the web server project. 219 00:16:56,890 --> 00:17:02,370 That's where we're going to stop before this video now that we have the basics of get set up. 220 00:17:02,410 --> 00:17:06,820 It's time to focus on getting the code on github and Heroku. 221 00:17:06,940 --> 00:17:09,580 That's what we're going to start to do in the next video. 222 00:17:09,580 --> 00:17:10,210 I'll see you then.