1 00:00:00,180 --> 00:00:06,090 Now that you have your keys in place, you're ready to start sharing your code with those third party 2 00:00:06,090 --> 00:00:06,910 services. 3 00:00:07,050 --> 00:00:11,310 In this video, you're going to get your code pushed up to the GitHub servers. 4 00:00:11,310 --> 00:00:16,980 And in the next video, you'll get your code pushed up to Hiroku so your application can be deployed 5 00:00:17,370 --> 00:00:17,920 to start. 6 00:00:17,940 --> 00:00:20,700 Let's head over to GitHub Dotcom now. 7 00:00:20,710 --> 00:00:25,170 You should already be logged into your account, as we did that earlier in the section. 8 00:00:25,470 --> 00:00:29,160 On the left hand side, you'll notice I have a list of repositories. 9 00:00:29,310 --> 00:00:34,100 These are projects that I've been working on for clients and for other classes. 10 00:00:34,260 --> 00:00:37,580 What we want to do is create a new repository. 11 00:00:37,920 --> 00:00:41,070 So we're going to have our local repository on our machine. 12 00:00:41,190 --> 00:00:45,870 It lives in that dot get directory, which we explored earlier in the class. 13 00:00:46,140 --> 00:00:50,190 We're also going to create a repository for the project on GitHub. 14 00:00:50,370 --> 00:00:56,550 That is how GitHub is going to be able to get access to our code so it can show it in the user interface 15 00:00:56,550 --> 00:01:01,090 and so we can do other great things like track issues and collaborate with others. 16 00:01:01,530 --> 00:01:05,330 Now, creating a repository on GitHub dotcom is really easy. 17 00:01:05,580 --> 00:01:08,700 There's a plus icon near the top right of the screen. 18 00:01:08,850 --> 00:01:13,440 We click new repository and then we fill out a very simple form. 19 00:01:13,740 --> 00:01:17,220 The only thing we need to do is pick a repository name. 20 00:01:17,550 --> 00:01:23,100 Now, this does not need to line up in any way with the name you chose for your project locally. 21 00:01:23,250 --> 00:01:28,590 You can pick anything you'd like as long as you're not already using it for a repo name on your account. 22 00:01:29,070 --> 00:01:34,400 I'm going to go ahead and use Node three hyphen weather website. 23 00:01:34,500 --> 00:01:37,870 Once again, you can pick whatever name makes the most sense for you. 24 00:01:38,340 --> 00:01:41,580 Next up, we have an optional description, which I'll leave blank. 25 00:01:41,730 --> 00:01:47,700 And then we have the option to create a public repository where anyone can see the code or a private 26 00:01:47,700 --> 00:01:51,290 one, which you could use for private proprietary projects. 27 00:01:51,600 --> 00:01:56,750 Now, in this case, you can stick with public as private does require you to be on a paid plan. 28 00:01:56,940 --> 00:02:02,670 I'm going to switch mine over to private, though, so I can keep this project hidden from students 29 00:02:02,820 --> 00:02:06,420 so no one will know I'm working on the course until the whole class is ready. 30 00:02:06,660 --> 00:02:09,280 Once again, though, you can just leave yours as public. 31 00:02:09,780 --> 00:02:15,300 Next up, we have an option to initialize our project with various things like a README file. 32 00:02:15,330 --> 00:02:17,460 Again, ignore file or a license. 33 00:02:17,580 --> 00:02:19,080 We're not going to do any of that. 34 00:02:19,260 --> 00:02:23,640 We're going to move on to the next step, which is to create the repository. 35 00:02:24,090 --> 00:02:29,400 So right here, when we do that, it's not going to be able to show us our repo code because there is 36 00:02:29,400 --> 00:02:29,730 none. 37 00:02:29,880 --> 00:02:36,150 GitHub doesn't know what code is associated with this project, so it's simply giving us some instructions 38 00:02:36,300 --> 00:02:38,370 for the various ways we can get started. 39 00:02:38,670 --> 00:02:43,830 We can create a new repository from the command line and send that to get hub. 40 00:02:44,220 --> 00:02:50,850 We can push our existing repository up to get hub, or we can import it from some other version control 41 00:02:50,850 --> 00:02:51,360 system. 42 00:02:51,660 --> 00:02:54,210 In this case, the second option is what we want. 43 00:02:54,330 --> 00:02:58,230 We already have a repository with commits locally on our machine. 44 00:02:58,410 --> 00:03:01,550 We simply want to send it to the GitHub servers. 45 00:03:01,620 --> 00:03:06,480 Now, there are two commands here to get set up, but before we run them, I want to explain what they 46 00:03:06,480 --> 00:03:10,170 do so you can actually understand what you're doing right here. 47 00:03:10,170 --> 00:03:15,450 We have the first command get remote at Origin, followed by a long U. 48 00:03:15,450 --> 00:03:16,020 RL. 49 00:03:16,290 --> 00:03:21,840 So to start, we are indeed using it like we've done from Visual Studio Code plenty of times already 50 00:03:22,020 --> 00:03:24,840 and we're using remote to manipulate our remotes. 51 00:03:25,050 --> 00:03:29,760 A remote is nothing more than a version of your project hosted somewhere else. 52 00:03:30,030 --> 00:03:36,230 So we're going to have a version of our project hosted on GitHub, Dotcom's servers and on her Roku's 53 00:03:36,240 --> 00:03:37,050 servers. 54 00:03:37,470 --> 00:03:40,140 Next up, how are we trying to work with our remotes? 55 00:03:40,140 --> 00:03:41,550 We're trying to add them. 56 00:03:41,760 --> 00:03:45,300 For example, you could also use remove to remove a remote. 57 00:03:45,450 --> 00:03:47,130 In this case, though, we don't have any. 58 00:03:47,130 --> 00:03:49,260 So we're setting up our very first one. 59 00:03:49,860 --> 00:03:52,260 Next up, we choose a name for the remote. 60 00:03:52,500 --> 00:03:57,780 This value could be anything you like, but by default, your first remote should have the name Orjan. 61 00:03:57,960 --> 00:04:00,570 This is a common convention you'll see across the Web. 62 00:04:00,990 --> 00:04:03,630 After that, we have a nice, long, neutral. 63 00:04:03,840 --> 00:04:07,170 This neutral contains two nice pieces of information. 64 00:04:07,320 --> 00:04:09,390 It has our user name right here. 65 00:04:09,420 --> 00:04:14,640 You should see your username and it has the name of the repository that you picked. 66 00:04:14,640 --> 00:04:17,070 So right here I have the name that I chose. 67 00:04:17,100 --> 00:04:21,240 Now, when we run this command, we're not actually sending our code to get Huub. 68 00:04:21,240 --> 00:04:25,110 All this command does is it sets up that channel of communication. 69 00:04:25,440 --> 00:04:28,440 You can think about it like adding a contact in your cell phone. 70 00:04:28,560 --> 00:04:33,020 You pick a name for the contact and then you pick their phone number or in this case, the euro. 71 00:04:33,180 --> 00:04:35,430 But we're not actually sending anything to them. 72 00:04:35,460 --> 00:04:39,120 We're just setting that up so it can be used in the future right here. 73 00:04:39,120 --> 00:04:44,310 We're going to take that command, copy it to the clipboard and from the terminal, we're going to run 74 00:04:44,310 --> 00:04:46,170 it from the Web server directory. 75 00:04:46,170 --> 00:04:50,310 Once again, it's important that you run these commands from the right location. 76 00:04:50,670 --> 00:04:51,750 So I'm going to paste it in. 77 00:04:52,080 --> 00:04:53,100 I'm going to run it. 78 00:04:53,250 --> 00:04:59,760 And now we have a remote called Orjan, which we can push to, and that's going to send our code to 79 00:04:59,760 --> 00:04:59,940 get. 80 00:05:00,400 --> 00:05:06,070 As we add new permits, we will push those new permits up to get Hub, making sure that GitHub has the 81 00:05:06,070 --> 00:05:09,870 latest code, that's where the second command comes into play. 82 00:05:10,180 --> 00:05:14,530 We have get push with the new flag origin master. 83 00:05:15,160 --> 00:05:19,030 So get once again is just the get command followed by push. 84 00:05:19,360 --> 00:05:23,080 Push allows us to push our commits up to a given remote. 85 00:05:23,350 --> 00:05:26,080 Then we provide the remote name Orjan. 86 00:05:26,560 --> 00:05:30,880 Now Master is the default name for what's called the branch and get. 87 00:05:31,150 --> 00:05:36,730 We're not going to get into branching in this course as it's a more advanced concept if you are interested 88 00:05:36,730 --> 00:05:38,860 in diving into the advanced workflows. 89 00:05:38,860 --> 00:05:45,460 And yet I recommend checking out a course on Udemy or checking out that free get book that I talked 90 00:05:45,460 --> 00:05:47,140 about earlier in the class. 91 00:05:47,320 --> 00:05:51,220 Hey, this is Andrew from the Future with a quick update right here. 92 00:05:51,220 --> 00:05:54,130 You might notice that your branch name isn't master. 93 00:05:54,130 --> 00:05:56,620 You're likely seeing Mayne instead. 94 00:05:56,830 --> 00:06:03,820 So GitHub A recently changed the default branch name for a master over to the more descriptive main. 95 00:06:04,000 --> 00:06:07,010 So now the default branch is your main branch. 96 00:06:07,210 --> 00:06:12,760 Now, all that means for us is that when we run the command in just a few moments, we'll want to push 97 00:06:12,760 --> 00:06:19,120 up to the main branch instead of pushing up to the master branch, which isn't going to exist for you. 98 00:06:19,270 --> 00:06:24,310 If you try to push your limits to the master branch, you'll end up getting an error when you run the 99 00:06:24,310 --> 00:06:24,880 command. 100 00:06:25,090 --> 00:06:31,540 So in just a few moments when we run this command, we will instead push up to the main branch and will 101 00:06:31,540 --> 00:06:38,410 continue to push up to the main branch throughout the class as we push our local commits up to GitHub. 102 00:06:38,560 --> 00:06:43,870 And I'll jump back in in just a second to remind you when we run the command for the first time. 103 00:06:44,050 --> 00:06:48,130 So once again, the only thing that's changed is the branch name. 104 00:06:48,280 --> 00:06:50,450 It was Master, now its main. 105 00:06:50,560 --> 00:06:53,400 So when I push to master, you push domain. 106 00:06:53,570 --> 00:06:55,210 All right, let's jump back in. 107 00:06:56,300 --> 00:07:02,930 Now, the EU flag allows us to set the upstream, which is essentially the default, and in this case 108 00:07:02,930 --> 00:07:07,400 we are setting the default to origin, which is where we're going to push to the most. 109 00:07:07,590 --> 00:07:13,550 So in the future, after we run this command, once we could just use get push to send our latest comets 110 00:07:13,550 --> 00:07:14,600 up to get hub. 111 00:07:14,870 --> 00:07:20,030 Sure, we'll be pushing to other remotes like Hiroku, but we're not going to do that nearly as often. 112 00:07:20,390 --> 00:07:22,790 Now, we're not actually ready to run this command yet. 113 00:07:22,790 --> 00:07:28,760 If we tried to run it, it would fail because GitHub isn't sure exactly who's sending it the code. 114 00:07:28,970 --> 00:07:33,080 But we need to do is finalize our configuration. 115 00:07:33,530 --> 00:07:39,320 So to get that done, what we need to do is take the public key file and give that to GitHub dotcom 116 00:07:39,530 --> 00:07:41,760 so it can create that secure connection. 117 00:07:42,170 --> 00:07:44,350 We do this in our settings up top. 118 00:07:44,690 --> 00:07:46,880 I'm going to go to my little profile picture. 119 00:07:47,210 --> 00:07:50,720 We're going to go down to settings and then the left hand side bar. 120 00:07:50,720 --> 00:07:54,740 You should see an option, S.H. and GPG Keys. 121 00:07:55,010 --> 00:08:02,400 In our case, we're trying to set up a new HQ and we can go ahead and do just that by clicking new S.H. 122 00:08:02,540 --> 00:08:03,680 key here. 123 00:08:03,680 --> 00:08:05,270 It's asking for two things. 124 00:08:05,270 --> 00:08:09,130 First, it's asking us for a name to identify this key. 125 00:08:09,290 --> 00:08:13,070 I typically use something like work laptop. 126 00:08:13,070 --> 00:08:16,760 I have other keys like home desktop or home laptop. 127 00:08:16,970 --> 00:08:19,760 It just makes it easy to identify the given key. 128 00:08:20,180 --> 00:08:24,980 And the next thing we need is the contents of that public key file. 129 00:08:25,160 --> 00:08:30,950 That is, I'd underscore RSA Dot pub to get the contents of that file. 130 00:08:30,950 --> 00:08:36,470 We can use the following command from the terminal that's going to be CAT, which simply concatenate 131 00:08:36,500 --> 00:08:38,960 the contents of a file out to the terminal. 132 00:08:38,960 --> 00:08:44,450 So it's going to print the contents of our key file, followed by the file to actually print. 133 00:08:44,780 --> 00:08:52,730 That is Tilde Forward sGot S.H. Forward Slash IDE Underscore RSA Dot pub. 134 00:08:53,060 --> 00:08:55,760 Now when we do that, we're going to get the following. 135 00:08:55,760 --> 00:09:03,530 It's a really long string which starts with S.H. Hyphen RSA and it ends with that value you put for 136 00:09:03,530 --> 00:09:04,250 the comment. 137 00:09:04,250 --> 00:09:06,230 And in our case we put our email. 138 00:09:06,470 --> 00:09:12,350 We have to grab all of that, including the S.H. RSA all the way to the end of the email. 139 00:09:12,620 --> 00:09:17,480 We're going to copy that to the clipboard and we're going to bring that over to this big textfield. 140 00:09:17,660 --> 00:09:23,180 We paste it in, click, add SS, HP, and now that's been added to our account. 141 00:09:23,690 --> 00:09:26,960 Now, right here you can notice it saying it's never been used. 142 00:09:26,960 --> 00:09:27,800 And that's true. 143 00:09:27,980 --> 00:09:31,940 We have this key set up, but we've never used it to communicate with GitHub. 144 00:09:32,180 --> 00:09:36,200 We can test our connection by running the following command from the terminal. 145 00:09:36,230 --> 00:09:39,410 If you were on windows, make sure to use get Basche for this one. 146 00:09:39,440 --> 00:09:46,820 That is S.H. hyphen capital T, then space get at GitHub dot com. 147 00:09:47,180 --> 00:09:51,290 This is going to test our S.H. connection to the GitHub servers. 148 00:09:51,290 --> 00:09:56,480 If it works, then we know our key has been set up successfully and we can push our comments up. 149 00:09:56,600 --> 00:09:59,720 If it doesn't work, then we know we have a problem right here. 150 00:09:59,720 --> 00:10:02,210 I'm going to run it and we're going to get the following message. 151 00:10:02,210 --> 00:10:03,560 This is not an error. 152 00:10:03,800 --> 00:10:07,670 It's simply saying that it can't confirm the identity of the server. 153 00:10:07,790 --> 00:10:09,980 But we can indeed accept that by typing. 154 00:10:09,980 --> 00:10:12,980 Yes, since we can see that things look good. 155 00:10:13,250 --> 00:10:16,610 And once we do that, we can see the final line. 156 00:10:16,640 --> 00:10:17,120 Hi. 157 00:10:17,210 --> 00:10:19,550 Followed by your GitHub username. 158 00:10:19,760 --> 00:10:24,140 You've successfully authenticated, but GitHub doesn't provide shell access. 159 00:10:24,140 --> 00:10:26,930 If you're seeing this, that is a good thing. 160 00:10:27,110 --> 00:10:33,350 This means you are able to correctly authenticate with GitHub and now we're ready to push our code up. 161 00:10:33,770 --> 00:10:39,530 Now, actually creating the SS keys and configuring them with GitHub is something you only have to do 162 00:10:39,560 --> 00:10:43,130 once it's set up and we can use it for all of our future projects. 163 00:10:43,670 --> 00:10:49,550 I'm going to head back over to the dashboard, the homepage, then I'm going to grab that repository 164 00:10:49,550 --> 00:10:50,570 I just created. 165 00:10:50,750 --> 00:10:52,250 I can search for it over here. 166 00:10:53,300 --> 00:11:00,080 Node three weather website, I click it, it brings me back to those instructions and we can run that 167 00:11:00,080 --> 00:11:05,840 second command, this command is actually going to take our commits and it's going to push them up to 168 00:11:05,840 --> 00:11:08,920 whatever's at the following you R-AL from the previous step. 169 00:11:09,470 --> 00:11:11,030 I'll bring that over to the terminal. 170 00:11:11,450 --> 00:11:13,370 I'm going to paste that command in. 171 00:11:13,760 --> 00:11:17,030 This is Andrew from the Future with one last interruption. 172 00:11:17,060 --> 00:11:23,780 As I mentioned previously in the lesson, the default branch name for new GitHub repositories has changed. 173 00:11:23,900 --> 00:11:29,370 Previously it was Master, which is what I'm seeing here, but now it is called main. 174 00:11:29,600 --> 00:11:35,330 Now, if you copied the command directly from GitHub, you should already have exactly what I have right 175 00:11:35,330 --> 00:11:35,680 here. 176 00:11:35,900 --> 00:11:42,020 So this is the new command and almost everything is the same except for the branch name. 177 00:11:42,260 --> 00:11:45,050 So we're still using git push with the EU flag. 178 00:11:45,320 --> 00:11:47,630 We're still pushing to the origin remote. 179 00:11:47,900 --> 00:11:53,590 The only thing that's different is instead of pushing to master, we are now pushing to Maine. 180 00:11:53,840 --> 00:11:56,570 So this is the command you should already have copied. 181 00:11:56,720 --> 00:12:02,690 If you're manually typing it out, make sure to use the main branch instead of the master branch. 182 00:12:02,900 --> 00:12:03,440 All right. 183 00:12:03,470 --> 00:12:07,850 We're going to jump back into the video and actually push our commits up to GitHub. 184 00:12:09,700 --> 00:12:15,160 I'm going to run it, and now our code, it's getting sent off to the servers, we can see various pieces 185 00:12:15,160 --> 00:12:19,900 of output about that and we can see exactly at the end what happened. 186 00:12:19,990 --> 00:12:25,240 It set up a new master branch to coordinate with our local master branch. 187 00:12:25,270 --> 00:12:26,710 This is a good thing. 188 00:12:26,860 --> 00:12:31,900 If we refresh GitHub, dotcom, we're actually going to be able to see our project. 189 00:12:32,020 --> 00:12:34,840 No longer will we see these set up instructions. 190 00:12:35,110 --> 00:12:38,680 I'm going to refresh the page now that there are comets to show. 191 00:12:38,710 --> 00:12:41,330 That is exactly what we see right here. 192 00:12:41,380 --> 00:12:42,970 I have a lot of great stuff. 193 00:12:42,970 --> 00:12:47,050 Obviously, I have the files and folders that make up my project. 194 00:12:47,230 --> 00:12:51,100 If I dive into those, I can see exactly how they've changed. 195 00:12:51,220 --> 00:12:53,230 I can see who's contributed to them. 196 00:12:53,350 --> 00:12:55,840 I can view the history of their changes. 197 00:12:56,050 --> 00:12:59,410 I can also use this service to track issues. 198 00:12:59,560 --> 00:13:01,540 So right here I could set up issues. 199 00:13:01,540 --> 00:13:05,230 I could set up various projects outlining what I'd like to complete. 200 00:13:05,530 --> 00:13:08,640 I could set up a wiki for documentation. 201 00:13:08,800 --> 00:13:14,260 There are all sorts of great features that GitHub provides when you're using their service. 202 00:13:14,600 --> 00:13:17,440 Now, in our case, we're just using them for a basic setup. 203 00:13:17,590 --> 00:13:20,230 We're going to keep our code backed up to GitHub. 204 00:13:20,380 --> 00:13:24,460 So if things do go wrong locally, we always have a backup of our copy. 205 00:13:24,940 --> 00:13:25,690 All right. 206 00:13:25,870 --> 00:13:28,120 That is where we're going to start for this one. 207 00:13:28,300 --> 00:13:31,120 We now have our code up on the GitHub servers. 208 00:13:31,120 --> 00:13:36,430 Don't worry, a little bit later in the section, we'll talk about how we can push our other changes 209 00:13:36,430 --> 00:13:37,540 up to the service. 210 00:13:37,540 --> 00:13:39,040 And there'll also be a challenge. 211 00:13:39,060 --> 00:13:40,300 Will, you'll have to do the same. 212 00:13:40,660 --> 00:13:46,660 For now, though, the goal was just to get that basic configuration set up with the keys in place. 213 00:13:46,780 --> 00:13:50,950 We can now use the same setup with any other projects we end up creating. 214 00:13:51,460 --> 00:13:57,730 The next video is all about pushing up to Heroku and getting our application deployed live to production. 215 00:13:57,880 --> 00:13:59,800 It's the grand finale of sorts. 216 00:13:59,950 --> 00:14:02,230 So let's go ahead and jump right in.