Working with Branches

Objective

After completing this lesson, you will be able to use Git branches for starting an independent line of development

Branches in GIT

Git provides a concept called branch. The default branch is called main branch. The main branch contains usually the code of the current productive running code line.

  • serves as an abstraction for the staging and commit process.
  • works with an independent working directory and staging area.
  • is a reference to a commit.

GIT Usage

  • git branch List all branches in the repository.
  • git branch <branch name> Create a new branch.
  • git branch –d <branch name> Delete a branch.

Different Branch Types

Different branch types are used to represent different development activities as indicated by the example branches in this image:

Illustration showing different branch types : Master Branch, Feature Branch and BugFix branch.

git Checkout

Illustration of the checkout for creating a feature branch

git checkout allows switching between different branches. The following are examples of usage:

  • git checkout <yourbranch> Switch to a branch.
  • git checkout –b <yourbranch> Create and checkout a new branch.
  • git checkout –b <newbranch> <existingbranch> Create and checkout a branch from an existing branch.

git Merge

Illustration of the merge scenario.

git merge <yourbranch>Merge a branch into the current branch.

Work with Git Branches

Business Example

In this exercise, you will learn how to work with branches.

Note

SAP BTP Platform and SAP Business Application Studio are cloud services. Due to the nature of cloud software, the naming of fields and buttons, as well as the content of the steps, may differ from the exercise solution provided here.

Task 1: Create and Work with a Feature Branch

Steps

  1. Open the SAP Business Application Studio.

  2. Create a new branch with the name featureA. You can create and check out branches directly through the Git: Checkout command over the command palette of the SAP Business Application Studio.

    1. Open the command palette, by choosing ViewFind Command… or by pressing F1 (on your keyboard) and type into the opened input field Git. (A dynamic list with the Git commands will appear).

    2. Execute the command Git: Checkout to...

    3. Choose Create new branch…

      Screenshot of the command line. Choose Create new branch
    4. Enter featureA into the input field and press the Enter key (on your keyboard).

      Screenshot of the command line. Enter branch name.
    5. Open the Git view and observe that the new branch is selected now.

      Screenshot of the Git Pane. Future changes will now be commited to the new branch
  3. Add a new folder with the name util to your epository project webapp folder.

    1. From the context menu of your repository project webapp folder, choose New Folder.

    2. Enter util and press the Enter key (on your keyboard).

  4. Add a new file with the name Formatter.js to the newly created folder util. Then save your changes and close the file.

    1. From the context menu of your util folder, choose New File.

    2. Enter Formatter.js and press the Enter key (on your keyboard).

    3. Save your changes and close the file.

    4. Check to ensure that the artefacts are created correctly. Your folder and file structure should now look like what we see in the following figure.

      Screenshot of the project structure.
  5. Stage and commit your changes to the local Git repository. Use Formatter added as the commit message.

    1. Open the Git view and look at the commit section. As you can see, the Formatter.js file is now marked as unstaged (U) and located under Changes.

      Screenshot of the Git Pane showing the formatter.js file with the flag U (Untracked).
    2. Now, stage all changes. You can stage the Formatter.js file directly by choosing its + symbol (Stage Changes). Now the Formatter.js file should be marked as staged (A) and located under Staged Changes.

      Screenshot of the Git Pane showing the file with the flag A (added).
    3. Commit the files that you have staged in your local Git repository. For the commit, enter Formatter added in the Message input field of the Git view and select the Commit button or click on the checkmark symbol. Now, there should be zero changes.

      Screenshot of the Git Pane. All changes have been committed.
  6. Switch to the main branch by using the Git: Checkout to command. Then merge the featureA branch and the main branch. For the merge, use the Merge… action from the Git view.

    1. Open the command palette, by choosing ViewFind Command… or pressing F1 (on your keyboard).

    2. Execute the command, Git: Checkout to...

    3. Choose main.

      Screenshot of the command line. Choose the main branch.
    4. Check the folder structure and the artefacts of your project. As you can see in the main branch, the new util folder and the Formatter.js file are not displayed.

      Screenshot of the project structure. The formatter.js file is no longer there.
    5. Open the Git view. For the merge, select the three dots symbol (Views and More actions…) and choose BranchMerge Branch…

      Screenshot of the Git Pane menu options. Choose Branch → Merge Branch.
    6. Choose the featureA branch.

      Screenshot of the command line. Choose featureA branch.
    7. Check the artefacts of your project, which should appear as it is shown in the following figure.

      Screenshot of the project structure. The formatter.js file is now there.
  7. Perform a Push request to add the changes to the master branch of your remote Git repository. Use the Push to… action from the Git view.

    Caution

    If multiple people are working on a remote Git repository, you should Pull before you Push, but in this case it is not necessary.
    1. Open the Git view.

    2. Choose the three dots symbol (Views and More Actions…) and then choose Pull, PushPush to…

      Screenshot of the Git Pane menu options. Choose Pull,Push → Push to...
    3. In the input field, choose origin.

      Screenshot of the command line. Choose origin.
  8. Check the content of your remote Git repository on GitHub.

    1. Visit https://github.com/ and log into your account.

    2. Open your remote Git repository trainingrepository.

    3. Observe the content of your repository.

      Screenshot of the github web page showing the last stage of the app.
    4. To see the four commits, click on the clock symbol.

      Screenshot of the github web page showing the 4 stages.

Log in to track your progress & complete quizzes