Up and Running with GitHub and Visual Studio 2019

hi I'm Bill Raymond I'm not a full-time developer but there are a few projects I work on I created this video for people who need to use git or github but do not know how to use it in Visual Studio this is not an extensive course on how to manage the workflow of your project using git instead it teaches you the basics of using git and github in Visual Studio if you want me to add more videos let me know in the comments of course you'll want to install Visual Studio 2019 you can see I have it installed right here however you want to make sure that you have the git and github extensions installed so click the windows icon and type Visual Studio [Music] installer and then go ahead and run that application locate the Visual Studio 2019 version you have installed click the more button and then click modify the Visual Studio installer should look something like this now click the individual components tab at the top of the page and then scroll down and just a few items down you'll find the section called code tools you'll notice down here there's a git for Windows and github extension for Visual Studio you'll want to have both of these selected so that you can use git in your projects go ahead and click the modify button once complete you might see this update available item with view details you look at that and just make sure that there's no git or github extension updates but this is actually Visual Studio just telling you that it has updates not necessarily updates to the components you just installed when you run Visual Studio 2019 there's this new getting started area you'll notice it says clone or check out code and get code from an online repository like get github or Azure DevOps now we're not going to use this because I just want to walk you through using Visual Studio from scratch so go ahead and choose continue without code now we're going to create a brand new project so click file new project you can choose any project I'm going to choose this asp.net web application and click Next answer the questions and click create with your new project created you can edit the source control now what's nice about this is git is just a source control technology so it will just be here on your computer and you can use your project and keep it in source control locally but of course putting it up onto github or some other technology is a best practice because you do not want to worry about your harddrive crashing and losing all of your work start by getting this into source control notice down here at the bottom right hand corner of Visual Studio it says add to source control when you click this you'll see one or a few options this option says git so go ahead and click that once you choose get you'll notice that it says master so there's these this concept of branches and it will also show your web application name with this little diamonds next to it kind of showing a little branching image you'll also notice the team Explorer displays and team Explorer is asking you if you want to connect your application up to github or Azure DevOps we're gonna go back to our solution Explorer and cover that team Explorer item in just a little bit on the right hand side we're going to take a look at the solution Explorer if you don't have the solution Explorer open then you can just go to the View menu and choose solution Explorer well you can see are all these little icons next to each one of the items with little locks on them that means that the items are checked in and are under source control as you drill into your different folders and files you'll see that they all have these little icons next to them now if you're familiar with dot git attributes and get ignore you may not see that here and I'm not gonna get into it in this video but I'm gonna show you how to get to them up here in the solution Explorer there's a little toggle between solution folder and views icon go ahead and click that and now you're in a view of the folder structure and here's where get attributes and get ignore are located visual studio created these for us and then we can modify them again I'm not going to get going to get into details on these files in this video to get back to your solution just go ahead and click the little icon here to toggle back to the solution view if you haven't already done so you might want to go to github.com and sign up you can do it through Visual Studio but you might want to do it through the website so you can see the different options available for you once you have signed up for github you should have a profile page that looks something like this you may or may not have as much hair as I do think of a repository as a solution or a project in Visual Studio you can see I have one right here this is a visual studio project that I maintain on my computer and then synchronize with github occasionally sometimes people recommend code and I update that accordingly when you sign up for github you might also get this funny-looking project this is sort of a place for you to do some training and learn about how to use github we're going to leave here now and go into visual studio and upload a new project to github for the first time before we can publish our project to github we first need to sign in so go to the View menu and choose team Explorer then click this green connections icon here you can log in to any number of different services right now I have Azure DevOps and github as services that I can use obviously I want to connect to github so I'll click connect I just entered my username and password for github and not a whole lot has changed here but what you can see is this little github line and it says clone create and sign out so I note is my clue that I am signed in now I'm going to publish my project to github but if I want to do that I have to already have my project on a local git repository and I know that I am because I see this branching here and they see my application with the little branch icon if you need to add your code to a local gate repository and you don't know how to do that then go back earlier in this video and you can learn how after you've created a connection using team Explorer you'll spend most of your time here at the home icon the home icon gives you all of the menus that you need to access for your git repository now once you've actually published a github you'll see more options as well so how do we publish to github after we click the home icon we click the sync icon and here you can see you can synchronize to Azure DevOps github and other remote repositories click the publish to github icon now you'll see it automatically recognized that I was logged in because I did sign in earlier and it's asking for a description I'll just type the s integration with github and click the publish button now here's what's gonna happen you're gonna see this little sign one coming across the top of the page for a while pretty soon you're gonna see a message that says the project was created and there it goes up repository was created successfully but this sign one thing just keeps on going across the top of the page that may or may not be real there seems to be a bug in Visual Studio 2019 where it just keeps showing that it's synchronizing so to find out if it's real or not click the Home icon you'll see you have more menu options now and go back to sync and if you go back to sink and that cylon is no longer running there you know that you're all set and the projects up on github back up at github we can see here's my application with that short description I provided it and if I drill down you can see all the application files that are needed from Visual Studio are now up here on github back on my computer you can see there's this web application to app that I created in Visual Studio that's what I ultimately pushed up to github but what if you are a new developer and you want to start working and collaborating on this project or what if you're the existing devel and your hard drive crashed or you accidentally deleted the files I'm gonna go ahead and wipe this out and delete the folder after running Visual Studio there's this get started area where I can choose clone or check out code you may or may not use this get started window so I'm just gonna go ahead and choose continue without code and show you the same exact way to get to that item which is to go to the file menu and choose clone or check out code it's the same exact way of accessing that dialog here it's asking you for the repository location but since we already have a repository on github we can just choose github and it's going to list all of the projects that I have I'll choose my web application - and click clone in just a moment all of the files will download and then I'll have the entire solution on my computer there now one thing that's interesting when you download or clone a project is when you open it this way it kind of starts at the folder location but in visual studio where we're used to using the solution file well in fact we are it's just the view that we're in so in the solution Explorer just come up here to this toggle between solution and folder view and when I click that it goes to the solution view and now we see our project the way we'd normally expect to see it when you use Visual Studio to clone your project it automatically put the folder name in place that represents your github username so that's that and it put the application inside of there you can actually change that if you'd like now I'm going to delete this one more time because I'm going to show you one other way to clone a project from github in Visual Studio earlier I showed you that you can go to the file menu and choose clone or check out code however I like to use a team Explorer so I'm just gonna go to the View menu and make sure team's Explorer is selected and you can see this is it here and I'm just going to choose clone from here and I'll choose the project name and remember earlier I said that it creates a folder with your name on it with your github username here's where you can change it if you just want for example the project to be at the root repos folder click clone and once again the files will download onto your computer and you can go to solution Explorer and then once again this is the folder view so you do need to come up here and toggle to the solution view in order to see the folder structure that you used to working with when you're coding now I'm going to start showing you some of the ways that you can use git and please do keep in mind I am NOT a full-time developer please if you are a full-time developer and I say something that's not a best practice I'd really appreciate you sharing that in the comments but not flaming me for it now that you know how to publish and clone a github repository let's talk about how we can use git to update our project and make changes so the first thing that I should show you is what is this project do I'm gonna run the solution and you can see that Microsoft provided a scaffolding application that has a basic web page with a scrolling bar at the top and some text with links let's talk strategy here I've got these pages and one of those web pages is the index file that's what I showed you when I ran the application the first time let's say I want to put a big heading text at the top of the page and it doesn't exist right now of course I can just go in and make that change however I might want to test that and even share this idea with my colleagues before we go and put it into production if that's the case then one of the things that I could do is come over here to team Explorer make sure I click the home button and then choose branches you can see right now we're at the master branch what I'm going to do is create a new branch and I'm going to call this change title and click create branch now I have the change title branch selected and I know that it's selected because it is in bold you'll also see down here at the bottom right of the page it's also selected it's useful to keep an eye on the bottom right-hand corner of the page because you may not always have the team Explorer listed or showing so now I can go into my code here and type in what I want to type so h1 and put in some big hello world text I'll just go ahead and run that to make sure that it works great here's our hello world text looks great doesn't it so I'll close this page and what I want to point out if I come back to the solution Explorer you'll see that index dot CS HTML has been edited and I know that because of this little red checkbox here and if I mouse over enough over here it'll say that it's been edited now what's important to know here is that all you've done is made a change on your local computer you haven't pushed anything up to github and the original index file is still there how do I know that well if I right-click on the file you'll see that there's an undo option I can do undo all the changes that I made even if I exited visual studio so we're not talking about control-z undo we're talking about undoing the full change that I made to the page there's also a commit option a view history option and a compare the compare is really useful because here you can see there is the original file where my hello world did not exist and here's the new file where hello world does exist I'll close this diff tab now let I'm comfortable with this change I could do one of two things I could right click and choose commit or I could come over to the team Explorer click the home button and then choose changes and here's where I can make a commit change and when I choose commit all that will be committed to my computer what does that mean well if I come back to the solution Explorer here you can see that this index page no longer has the checkbox next to it that meant I said make sure that use this new change title branch and update it with my changes now when I come back over here to the team Explorer you can see it says sync to share your changes on the server so I'll go ahead and choose the sync option and you'll notice that it looks like it might have actually synchronized but in fact it's just it says push here so you have to do is click this push link and now you can see it's pushing the branch up to the server back in github you'll see we have this change title less than a minute ago was updated so we get some notification that our changes are in the system also if I come down here to web application 2 and then click pages and go to index dot CSS HTML you're not going to see that hello world text what's going on well that's because we started with what's called the master branch and again I'm not getting into everything having to do with git so you're gonna have to read up on this but I can change it to the change title of branch and when I do that you can see there is a hello world text as you're making changes to your code you might want to look at the history at the bottom right corner where we have the change title branch I can go view history and now I can see all of the changes that have occurred now let's go ahead and take a look at how we can use this history option I'm going to come back here to this index page I'm going to change this from hello world - hi there and I'm going to save that change and I'm going to commit the change there once I've made the change whether I've synchronized to github or not that changes in my current branch which is this change title branch I'm gonna come and back here to the view history area and there's my change - hi there option well what happens if I really didn't want that well I showed you before that you can undo however what I might want to also do is just right click on this and choose revert and it will say do you want to revert from the previous commit yes ok now it doesn't look like anything happened here but actually this view history pages actually going to be very useful for you but you do have to remember to click this little refresh icon and now it's saying that I did a revert so if I go back to this index page you can see it's back to hello world again ok so you can use this history page to understand all of the changes that have been made not only to the current branch you're on but previous branches as well at this point you kind of have to code basis you have this change title code base and you have this master code base in my example from my project the master represents the production release of the product that means that if I want to get this new title into my code I need to get this change title over here into master there's a number of ways you can do that I'm going to show you one way and again there's many options for how you get code moved around and and get it back into the master but I'm just going to double click on the master and by doing so it's bold and that's showing that that's the car branch I'm on and you can see down at the bottom right-hand corner of the screen masters selected as well what I'll do now is choose merge and I'll say merge from the change title branch on to the master branch and when I click merge you can see the repository was updated and committed so if I come here to index.html you can see hello world now exists in the index page in the master even though it didn't just before I ran this change now that I made these changes I'm going to upload them to github and at this point I think you'll get the idea as to how you do this you go to the team Explorer you click the Home icon and then you can go ahead and push all the changes that you made so just click push and you're successfully published to github so far I've shown you how to upload your Visual Studio Projects up to github but what happens if we have a change that happened online and we need to bring it down to our computer let's go ahead and add a readme file and a readme file is essentially something that anyone can look at on this github page that has access and I'll just go ahead and type my readme so that we can see that and it looks like github also added some code as well so I'll just go ahead and say commit that directly to the master branch and there it is you can see there's my application with the my readme file and right now this only exists on github let's take a look at what it looks like in Visual Studio that readme file will not show up here in the solution Explorer the way we're looking at it right now what we need to do is click this toggle between solution and folder views icon and when we do that we'll see good attributes get ignore and the solution file but where does that readme file go to team Explorer click the Home icon and choose sync and then choose the sync link once the synchronization was successfully committed you can now go to solution Explorer and you'll see there's that readme file and you can treat that just like any other code that you're working with in your visual studio solution do remember though that to continue working with your project you need to click this toggle button toggle icon to get back to your normal project view when you're done working with the readme file there are so many other things that I did not cover make sure you go to the team Explorer click the home icon and learn about some other things you can do such as issues pull requests and so much more thanks a lot for watching this video it takes a lot to produce so I'd appreciate it if you like comment and sign up for notifications

Channel: Bill Raymond

Views: 69,889

Rating: 4.982842 out of 5

Keywords: visual studio 2019, git, github, visual studio, windows, cambermast, bill raymond

Id: csgO95sbSfA

Length: 23min 39sec (1419 seconds)

Published: Tue May 07 2019