Bitbucket with Visual Studio Code 101

hello everyone we are going to see today bit packet which is one of the commonly used remote repository in the market in along with get labs and get hubs I'm gonna walk through how to use bit packet as a remote repository and have it installed in my machine and also use Visual Studio core to do most of my development so one of the good thing about Visual Studio code which is now one of the favorite open source IDE by most of the developer is that there's a lot of futures that that hen that enables Visual Studio code by use of plugins to install them and and flex it to whatever a developer needs are you're not constrained to like one IDE where you are tied to whatever that ID has to offer like Visual Studio code is just a generic IDE but there's a lot of plugins out there would you can make it like dotnet go Python no HTML Java I mean whatever your Salesforce I mean whatever your platform is it doesn't matter you can tweak Visual Studio code to accommodate to your needs and we are going to see how Visual Studio code could be used with bit packet along with all the plugins it has to offer so that you can get the most utilization of Visual Studio code let's get started with that before we dive deep into demoing what we are going to do I want to show you like overall what the goal of this demo is about so this is more like I'm gonna walk you all guys through cloning committing creation of branches pull and push request and pull requests using GUI so that you can have a code review done which is one of the coolest feature in the bit packet where it lets you do a pull request and ask a reviewer to go through code review process and then once it is then then go ahead and merge it so generally people tend to use pull requests to do merging from your future branch into your development branch so if you go to Enterprise Solution generally what they have in repository is that they create at least three branches I mean at least two batches one is master which is production another is the development tree which would most of the development would happen in the development branch but they don't allow the developer to directly check-in into the development branch they would ask each developer to create a future branch then do a pull request let the code review be done and then take the code from the future branch and merge into the development branch so the pull request is very very critical in enterprise so that you do the code review and and make sure that the code is much better when when it goes to production so the full request is like a prequel before you merge your future branch where your developers are working on into a development branch so the first step is to clone a repository so in Visual Studio code if you want to clone a repository you could always come here and there is an option for you to say clone repository and then you need to give a URL so in our case we are gonna have this URL so this doesn't have anything I'm gonna just create a readme file so that we have something to clone - so I'm gonna commit this readme file I created a simple repository with nothing in it I just added a readme file by default it just creates a dummy treatme file I'm gonna do that so I'm gonna say clone so that I can get this HTTP I'm gonna get this URL so that I know what repository I am cloning from so let me copy that and then I'm gonna come to my Visual Studio code and paste that that's enter here and it's going to ask you where you want clonaid so let me clone it to my D Drive that's my location where I am cloning it so it is asking for me the password I will not type in my password so might have given a wrong password here go ahead and do that again so I'm gonna pick the D Drive select the repository path it's asking me the password so he cloned my repository now so I would like to open it in the same window I don't want to open it in another window so it has just a readme file with nothing much so we just learned how to clone the repository it's so easy you just need to click on this and just if you close this it will let you clone it so for example if you just want to show you if I close this folder this Visual Studio code doesn't have anything so it can open our clone so I send already cloned I'm just gonna open into that path where I cloned this and it should show me the readme file now so that's how you would clone a project in Visual Studio code I have installed a lot of plugins I've installed like what I would recommend you guys to do would be to go to this extension and there is like bitbucket if you search for bitbucket here you would probably find lot of extensions that is interesting to you I have installed some of them that I think it was useful like this one and the bitbucket JIRA one and unlike JIRA and bitbucket official version of that I got I have installed that Gord and installed that and then I also installed like there's a git essential package so if you say gate so I install gate lengths and git project manager another better way would be to use this this is what I wanted to show you if you install this get extension pack it installs the get history project manager get lines so get lenses installed this is the project management which if your multiple project you can manage a project through here get ignored I have plug-in is installed if you wanna ignore certain files ok you could use get ignore to ignore certain files so these are the options that you have on the table if you're thinking about installing the plugin so I have all the plugins that I thought is essential is installed here go ahead and install and it you can click on each one and you know sign in and use good you're passing by username and password like you see in the bottom I'm signed in in bitbucket I'm a master branch because that's what we opened this folder here with bit back with that project so it's in the master branch so you can do mostly anything you would like to do even from even pull request from here so you would not need to go outside visual studio code that's the fun part here almost you can do everything that you want just being in that in this ID and that's what I like about this so let me go ahead and start creating some basics so I'm gonna create an index dot HTML I'm gonna create an HTML tag here I want to say h1 I'm gonna create a head and a body and I'm gonna say h1 hello world so if you have created this basic HTML now it shows that you know some it's untracked because it's you're still working on it and then you you can do almost everything want to do from here right like so it says that so you can go here to the source control and say that I want to track I mean you you can you can add this and then it becomes tracked you know now it's tracked and then committed or just type in your message and it will come it off for you so my first check-in using V s code so I'm just checking in my first HTML code after I cloned using visual studio code and you can come here and do pull push sync I'm I prefer I mean I don't want to go over each one of these it almost has everything that you want to do here but but I will go over some of the cool things I would think that would make your job done quickly so now it's push but it's still not in the remote repository right we just checked in the code into the gate it's not in the remote or possibly so all you have to do is if you see at the bottom it says that one up that arrow means like if you can see it it's one app hit this arrow at the bottom means that you should be able to click on it and it should sync it up so it's asking me a password if I would have set it up up the HHS it would have not so I'm typing in my password it's prompting again dad and it should sync it up now so so if I go to the remote repository now and refresh this in my master branch I should be able to see that there is the master branch having the index dot HTML in in push to the remote repository here so we kind of cloned a repository we kind of showed how to you know commit a code and you can push and pull the cord through this as they were showing you you can push and pull the code and do whatever you want from from here so we went through push and pull and next thing we will create a couple of branches maybe the development branch and we would end up and creating a future branch and then we will see how to do a pull request and merge and some of those so let's go ahead and move on to the next topic here then next thing what we are going to do is to create few branches since we now know how to pull or push the code how to clone how to commit a code the next other thing you would end up in doing is creating a branch so generally I tend to use this get lens to do that so we were in the source control here which was a plugin and now I'm going to use the gate lengths plugin so you could go here and create a branch if you want so what I'm gonna do is like go right click there and kind of see you if there is a way to create a branch here so I'm gonna click on here and see how many branch I have so it has two branches so I can always go up here to this and try to see if I can create a branch out of this so I'm gonna say create a branch from the master branch I'm gonna make this a develop branch I'm gonna say create a branch and switch to the development branch yes I would like to do that so it went ahead and created a development branch and it checked out my code in to the development branch so but as a developer you would not be developing on the development branch either so let's create another branch now let's create a branch called future and say like you know homepage whatever your future is so and then you want to create a future home branch and just create a branch and switch to that branch so now I am checked out in the future branch so we have created now three branches and we could we can go back to our this and just say publish branch it's asking me the password if I would have set it up in the SSH or at the global I don't have to type in this password each time but it pushed it so let's make sure that when we go up to the cloud here see what we have here so it should have published the master and the future branch the dev branch is not pushed because we didn't yet push it so let's go here and go to our let's check out our thing into the development branch so let's check out its you need to click on this small arrow that is pointing towards this so I'm going to click on that to check that out so now I am in my development branch so I know we didn't publish it so I'm gonna publish this branch or you might be you know able to publish from here too but I generally tend to use this to publish my branch so I'm gonna say publish branch it's again asking me the password so it went ahead and published the development branch so if I go to my code and refresh mine now I should see that it's it's now published now so I should see the three branches that I have so I'll go to my Visual Studio code and make sure I'm checked out in my sorry I'm checked out in my future branch so that I will be working on the future branch so we created three branches we publish those branches to the cloud by using the publish command here and and so we are ready to do the pull request so now we have three branches let's say let's make a change in our branch so let's go here and say we added some more code now let's say I added some more code saying new changes made by developer one in huge ohm so I just made some new changes to this code so it shows modified and we just go here and say new chain just made by for future one our future homepage I'm committing that so you need to stage it and then commit I'm doing it all together so it's coming do you want to do it I say yes and it's committed and I'm gonna sink it I'm you can push it or sink it I have the sink is kind of push and pull together so now if you see it's your zero and one at the bottom the one means you need to push a local commit to this repository remote repository so I'm gonna do that it's gonna prompt me the password it's annoying but you could fix it by setting it up through HTTP as a as a search which I can run another video how to set it up for now we are going to just publish this so now the future branch has more code than what a development branch has now we need to figure out how to merge this code from my future branch into my development branch and as I said you should go with the practice of creating a pull request which is what we would be doing next so we may need to be doing pull requests to this so I'm using now the next plug-in that I have which is like the bitbucket plug-in which shows Atlassian issues if you log in with JIRA it will show all the tickets in JIRA that is assigned to you and here at the bottom it shows you all the pull requests that you can make are doing so I'm going to create a pull request here quickly let me put in my password again so I'm gonna say I want to take my future branch and merge it with my development branch give my command that I would like to merge my cord so and once once the reviewer sees it you can put the list of reviewers name I'm not going to go through that workflow and kind of give that reviewers name here I mean we assumed that that would be done in real time you would have a reviewer like your boss or someone who is reviewing the code a release manager reviewing the code so you would be putting someone here so the fun part is that you did not have to go from your machine anywhere to another browser to create a pull request you're sitting on your IDE and doing everything that you need so now we just showed how to create a pull request right on Visual Studio code so you just create a pull request here it's prompting me the password again and it looks like it went ahead and did a pull request so you can even approve I mean I'm maybe I'm a developer manager I can go ahead and approve here or go ahead and merge it you know into my development branch but generally you need to approve or deny as a command I mean you can go to your bit bucket here and see everything happening right here right like you add a pull request and you can go and approve here but the the power of Visual Studio code is awesome you you are just right in Visual Studio and doing everything that you need so I'm just gonna prove it from here it could be another person who is approving it it says who the Prueher is I did have the permission so I went ahead and approve it I could have added some comments and I could have done a lot so I'm just not going to do all those and and that's how you go ahead and approve like you can even give comments at the bottom so you can check on the files like you can even check on the files what got changed here like what what like Souls it's so powerful that you can almost do everything in Visual Studio code so yeah so we kind of did that and again you can even merge the code from here so if I click on this merge it's gonna try to merge my future branch into my development branch right sitting on right sitting in Visual Studio code like you didn't go anywhere I just want to emphasize that so if I say merge if there is no conflicts it's going to merge the code and it's asking me how we want I generally prefer the merge commit our fast-forward let's go ahead with a much coming which is the default behavior and I don't want to close the future branch because I want to show you four few other examples over here I'm gonna just merge and the code is much now so if you let me do some refresh I'm gonna go to my editor and I'm gonna see what happened so the code is so I'm still in my future branch oh another thing I wanted to show you was that this one you can just click on it and it shows all the branch you have and it's so this is all the remote branches this is all your get practice in your machine and I just want to flip it now to the development because we just need a pull request and you know much it's not there yet because we didn't yet push it so let me go to my future branch and make sure we think that let's do a pull request and I'm also gonna make sure that I go to my development branch and then sync up okay so now you see the changes from the development coming over here you didn't see it because your development branch was not synced up so I mean you didn't pull it I mean if you want to pull it you can go and do and pull it here all your changes I just like this one button which does the pull and push you're just thinking I mean in Visual Studio go you're just sinking it could be a push or a pull depending on your situation I mean you tell it's very rarely you would do both I mean it happens but I mean that's a cool future so now I'm in the development branch my changes came over here and if you go to the future branch its merged so we went in to end like everything in Visual Studio code I didn't even switch out of my Visual Studio code for anything so next thing I want to do is to show a conflict and just show how to do the same so we will let's and I don't have to go anywhere from Visual Studio to just do that either so I'm gonna create another file called home dot HTML I'm in my future branch I would prefer to be on my development branch okay let me do this in a future plan it doesn't matter now so I'm gonna say HTML I'm gonna say hello world just for fun it's a new page with just hello dot HTML I'm just gonna go ahead and that's something we just added into my future branch so let me go and see if I if I have anything to commit I'm gonna see refresh I typed my password wrong yeah so let me make sure I come into this I'm gonna say add at a new home page right I should have again I should have done this first in the development branch and just then do it in the future branch but lack of time I'm just gonna do it in the future branch and also in the development branch and try to create a conflict now so my future branch now has a home page let me check out with my go to my development branch go to my browser I'm gonna again add something called as home dot HTML I'm gonna have this hollow world on my home page - I I could have done it in the development branch and merged it with I could have done that way but that it's it's the same I'm just adding making sure I'm simulating a data so that I can show you how to make a conflict here added a home page you should not literally go to it directly into a development branch and add like an HTML page it should go from a future branch into the development branch but I want to make it a quick and dirty so I went ahead and dude did this and it's annoying that it's asking this password once you set it up and setup an SSH with a public and a private key or even through HTTP it might work so something I should be doing and demoing you how to do that so now I have like on my both my development branch if you see I have a home dot HTML with this and if I go to my future branch I do have the same home dot HTML with this so let me I'm in my future branch I'm gonna say it's not allow hollow world it's hollow test okay and then I'm gonna make this change and say made a modification on future um okay so in the future branch right so in the future branch so I just messed up with my future branch or made a change to that home dot html' in my future branch so I'm gonna sync it up I'm going to type in my password again and now now I have the power my future branch having a file called hello test now let let's do a pull request right we go to a C and I'm gonna say create a pull request I'm gonna type in my password to do a pull request I want to merge my future branch with my development branch I'm not going to comment anything yet so I'm just gonna leave it as it is or you can even go and create that in a browser but I'm just loving what I'm doing here you need to put an approver technically I'm not gonna do that I'm gonna approve my own pull request so I created a pull request did you see the C there so there is a conflict now so if I click on this homepage it's it should show that there is a conflict between two both my both my system it's not showing clearly what's happening but it shows that there's a conflict and so the best way to resolve a conflict so it shows me that there is a conflict so it so we should generally tend to resolve the conflict before you do a pull request right so I would not like to you know approve this yet so I would like to add you can add a reviewer from here so I'm not going to approve it right I'm not going to go ahead and approve it and leave it here and let that developer fix this issue before we go ahead and approve it so I'm going to so the best way to resolve this would be to go ahead and merge whatever you have with whatever you have in your development branch with the future branch before you do the pull request so so you need to have your future branch current like you cannot be out of sync at this point your future branch has a code that you modified so you need to fix it it could be that you would overwrite what is in the development branch or it's up to you you could replace or have both the both they're tagged as another example we would end up and having both the tag so let's see how to do that like how to merge two branches so the next thing as I said what we are gonna do is like we are gonna merge let me quickly write that in a notepad and show you or maybe use the draw dot IO quickly if I can to show you this and you create a new one blank one and I'm gonna say yes just for fun so you are like you are in a master branch and then you have a development branch and then you have let's say if you have a develop branch and then you have a future branch so when you did a pull request just now what we did was we were trying to do a full request so that we can merge it into development branch but then we got rejected because there was conflicts here so the better practice when you did a pull request from here a good practice would be to whenever you have troubles like this a good practice would be to always get what is in the development branch first into your into your future branch so that you have all the latest code from here week and then do the pull request again because you would get denied if there is a conflict generally the approvals the probability of someone approving with conflicts is less because you need to fix it in your future branch before you you consider pushing that conflicts to the development branch so that's exactly where we were like we were doing a pull request and we had conflicts I think we kind of saw that we kind of saw the conflicts in our machine that there was conflicts he didn't show it clearly but it showed that there was some conflicts here so we need to resolve our conflicts before before we do a pull request so so I am in my future branch you can see that I'm in my future branch and then you can even create a new branch from here just so that you know but I'm in my future branch and I would like now to you know merge it with with my development branch right that's what we want to do we want to merge it with our development branch so what I would do is that I would go to my development branch and try to right-click it and say that much branch into current so the current branch is future branch the branch we are trying to merge is development so I'll click on that and it's asking how do you want to do there are different ways you can merge you can go and read the get documentation on each one of these I always pick the first one or the fast-forward one so I'm gonna do that and it's gonna say that there was a conflict so the merge did not go through so so it's saying that automatic merge frail and you need to resolve the conflict so so that if we expected that that was a whole intent but we don't want to do it in the development branch we wanted to fix it in the in the in the in the future branch and then push it to the development branch one of the cool thing with Visual Studio code again is that it says do you want to accept the incoming change or you you want to accept the current change that you have or you want both I mean this is cool like you can just go ahead and do some of these and compare what you want to do and decide on which direction you want to go with so I'm going to say I want to accept both and it took my both the hello world from my develop branch and also the hollow test from a future branch so it had both of those now into my my future branch so I merged all the code now it's good I'm gonna save that I'm gonna make sure I checked that in so I'm gonna say add that I'm gonna make sure that I'm gonna say commit dad so my future branch is now merged with the development branch like I was showing in my diagram that I pull down all the changes in my future branch so that I can do the pull request again so I I didn't deny the pull request so I'm gonna just use it that's why that's the reason I did not deny so what I would do is that since I am done I'm gonna push my changes what I have in my local get into the remote repository now since I already pushed it all I have to do now is to now go ahead and do the pull request again or reuse that pull request again so I'm gonna go here I'm gonna open this pull request for me so let's show open pull request just trying to pull that okay so I have that now I think you can approve because there should not be a conflict now see it shows the UM instead of see as will be resolved the conflict in the future branch we don't have to worry about this anymore right like we resolved it in the in the lower level now if I try to merge this with my development branch I can approve it technically that there will be another person approving it I'm gonna hypothetically make this up and then I'm gonna merge this so that I can now I mean I'm done with the example with the complex use case of having a conflict so I'm gonna close this branch if you think that you don't need any more that future branch you just want to close as a future branch because you're done with your work to be much cleaner so I'm just closing the future merging the cord into the Deb and it says that the cord is merged I'm gonna refresh this go to my cord I'm gonna go back to my development branch and make sure that all my changes are there into my development branch so let me I don't see that yet because I didn't yet you know pull it down so let's go ahead and pull it down so let me do a sync from here it's gonna ask my password again because the merge happened yeah then the remote repository and this now it looks good so we pulled down the changes that the merge happened and we brought it down to a development branch that's a full circle of using visual studio code and just being in Visual Studio code I did not go out of the show studio code for anything I was able to do everything that I need just sitting in the visual studio code and that's the hassanis of Visual Studio code it just lets you install a lot of plugins like the plug-in that I installed for Atlassian the get lens and the source control plug-in I mean you if you just install the get basic package that should get you know so if you go to the managed extensions and you're just looking up for kid just try to install this get extension package and then look at things that you like I mean each one has a unique taste so you would like something that I may not so let's install whichever you like but then I would also recommend you to go ahead and install this flaxian thing which is bitbucket if you search for bit packet it should pop right on the top so just go ahead and install that because then you can do the code review and everything within Visual Studio code so that's all I had for today with Visual Studio code bitbucket and good see you next time thank you

Channel: Praveen Raj

Views: 92,872

Keywords:

Id: G9UO82yI8Ro

Length: 36min 38sec (2198 seconds)

Published: Fri May 08 2020