git feature branch example

alright now let's let's do this so what I want to do is to show how does this work in the world world so you can point at diagrams all day long but how does this work I will show you exactly how it works so let's actually say I'm gonna get started on the frequently asked questions page so the first thing I'm going to do is in the coding garden community app Channel I'm gonna go to front-end and say I'm going to start work on the FAQ anyone else working on that is that okay I'm gonna do and at here too just so people can so I sent the message I'll wait for a reply but right I don't think anyone else is working on it maybe Sean is Sean let me know but I'm gonna work on this one so first thing is I'm gonna put my name on it so I'm gonna put CJ cuz that's me and this is linked to a specific epic story but I am now going to drag this into the doing column and you can see this specific card has the card number CA - 38 so I'm going to use that when I create my feature branch let's see in the discord all good however the backend is not not not you haven't implemented I think that's okay I can get started on the basic components and then once the API is in place I can hook it up to that but and then in the meantime I can put that story in the blocked column so people know that we're waiting on the API I think Shawn's gonna say something - okay so Shawn is saying I'm working on the computer contributors page so I'm all good if I want to grab the fact okay so that's what I'm going to work on so let me clean up my tabs here okay so specifically I am going to be adding a new feature to the app mobile I just want to check my checklist here yeah so we talked about get workflow now I'm actually going to talk about feature branching and this relates heavily to get workflow so first thing I need to do is clone this repo down now if you are a contributor on the product so if you are a member of the coding garden community just github and you're on the let's see on the front-end developer team you actually have access to push directly to this repo so if you are a core member here and you like your github name is on here you can actually just clone the app mobile directly you don't need to fork it so as because I am a member I'm just gonna clone it so I'll grab the URL now I'm just gonna clone it in here so I'm gonna do a git clone throw it in and I have a tool installed in my shell that shows me that I'm actually on the develop branch but all of the work that I do here I want to do on a specific feature branch so because I've decided work to work on the FAQ we see that the fact has card number CA - 38 so I'm gonna check out a branch called CA - 38 so and forget to do that you can do git checkout - beep - B means you want to create this branch and I'm gonna call it CA - 38 is that right I'll hit enter and you'll notice my terminal nails tells me I am on a feature branch CA - 38 okay let's start this thing up I think the first thing I need to do is just install dependencies with yarn we probably need a story that we where we update the readme on how to get started with this thing but I'll let that run for a second it's done and then I should be able to just do yarn start that'll start up expo because this is a react native app okay and then let's try running this on the iOS simulator cool so the app starts up I at least know that I'm good there we right now just have a super basic app it has a nav bar along the bottom I've got our homepage contributors and our frequently asked questions page this is the page that I'm going to be working on also shout out to Isaac and whose tornado Titan but Isaac in the chat he's the one that implemented this navbar so that's pretty cool but yes I want to work on the frequently asked questions page so I know that I specifically am on the ca - thirty-eight branch this is where I'm gonna do all of my work so let's open this up with code you awesome okay so we've made it this far I have implemented my feature I now want to make a pull request so that I can get merged back into the app so the first thing I'll do is push up to github so because I am a contributor of this repo I can actually push directly up to origin so I'm not working with the fork here I can push to the branch CA - 38 on the the app mobile repo itself so let's do that first we'll commit everything sparkles adding frequently asked questions page okay so that committed it and now I'm gonna push up to that branch so if I do get push origin so this is where do I want to go if I do get remote sorry so list all of my remotes right now origin is at mobile so this is the the direct the main thing this is the main repo that has like developed release and master but because I'm working on a feature branch I don't have to worry about accidentally messing up develop or accidentally messing up release or master so that's my origin and I want to say git push origin so I'm pushing to this remote and the branch I want to push to is ca - thirty-eight so push to the origin on the branch ca - thirty-eight go okay so that creates the branch on github and pushes my code up to it but it doesn't create the pull request so if we look at the repo let's look at it here it is if I go to branches we can now see that there's this new branch CA - thirty-eight but there is no pull request open so I still technically need to create a pull request so that I can have my code reviewed before it gets merged into develop so I'm gonna click compare and pull request and typically this will pop up for you on github if you just pushed up to a branch it'll say hey do you want to make a pull request on that and I do so when I'm making a pull request I want to first be sure that the base is develop because if we look back that image let me pull up that branching image that I had before general someone's at hi YouTube so if we look back at this diagram where we were was a future branch we just created that CA - 38 feature branch we did all of our code stuff and now we're gonna make a request that says hey we want to merge this into develop so that eventually it can make it into production but at this point we're saying hey please merge CA - 38 into develop so if you look at it our bases develop we're comparing CA - 38 that's the branch that we worked on one thing I like to do in the pull request is to put the name of the card in brackets this is not required but it helps people at a glance to see oh I know that pull request is directly related to where's our teleport directly related to the card on the board that has the ID CA - 38 so it really just helps with organizing things so I've created it I don't want to add some notes so I'll say this adds an accordion party on to the FAQ page we'll say do not merge still waiting on API for dynamic frequently asked question data cool and when you create a pull request you'll also see your changes down below and you'll see any commits that were associated with that pull request now I was just showing you an example so I only have one commit when you create a pull request you might actually have like five commits that did all of the work for that specific pull request when we merge it in we do what's called squashing commits so even though you it took you five commits to get there we squash it down to one commit so that way in the main repo that one commit represents all of the work that you did for that specific feature branch but we can see all of the changes that we made and then I can click create pull request now I have this github repo set up so that merging automatically is blocked so this says at least one approving review is required by reviewers with right access so there are core contributors on this repo that have permissions to review a specific pull request so that's Shawn Josh Sam John I think I think pretty much anyone that has write access has specific access to approve it but this is like a protection that I'm a not allowed to merge my own pull request I've basically said okay I did this work for this specific feature will you please merge it and someone else has to review it that actually gets to one of the last things that I wanted to talk about which was code reviews we'll talk about that next but this is the point where a a code review would happen someone would come in they'd pull my branch down and just make sure that I followed all of the good coding practices if they approved it they could approve it then it could be merged in the other thing I want to show is we can actually link this to Trello so if I go to Trello and I go to this specific card I can attach a pull request so I'm going to attach a pull request and I'll choose the one that I just created make sure it's the right repo it has the name that I chose so I know that's the one and I'll attach it so what's cool about that is now I can click here and go directly to the pull request and then it automatically adds a comments on github that links me back to the story as well so that's nice you get some continuity between the issue and the pull request that's pretty much it the next process is to wait for the code review to happen so I'll have a separate video on that thanks for watching

Channel: Coding Garden

Views: 12,735

Rating: 4.9463086 out of 5

Keywords: learn to code, live streaming, mechanical keyboard, learn web development, node.js, frontend, coding, lesson, full stack javascript, live coding, programming, debug, learning, javascript, full stack, vscode, frameworks, full stack web development, html, how to code, web development, backend, css, learn javascript, beginner, debugging, learn node.js, educational

Id: IfD3PwpOz7U

Length: 12min 12sec (732 seconds)

Published: Sun Mar 03 2019