Whaleshares Front End on your own computer - Part 4

Start here Part 1

In Part 3 I showed you how to create a new branch from the master branch. This new branch is the code you work with to make changes, the master branch stays untouched.

Though git can be operated by entering commands at the prompt, that is not the way I do it.

To organize and track the code (changes), I have Sourcetree installed. Sourcetree is a free graphic interface for git. Sourcetree has a Mac and a Windows version.

A few things that are easy to do with Sourcetree:

• create and delete branches
• sync your local repo with the original repo
• create merge requests
• load a different version of the code
• browse the changes you made
• keep track of different repos

Clone a repo

After cloning the screen will look like this:

You can browse all the changes made to the code so far. When you click an entry of the repo tree, the files that were changed in that entry will be listed at the lower left. When you click one of those files, the changes made to it will be shown next to it.

Red colored lines mean they were removed, green colored lines were added. When you change something in a line of a code, the old version will show up as removed, the new version will show up as added.

Create a New Branch

Click Branch in the top menu. Enter a name, use hyphens for spaces. It is best to clearly state what changes are made in this branch (I am bad at that). This name can be adjusted later on.

You always want to create a branch from Master branch. Checkout new branch, means as much as, make the new branch my working copy. Changes you make to the code will be tracked in that working copy.

When you have multiple branches you can switch from one to the other by right-clicking the name and selecting Checkout. When switching branches, the contents of the files of the repo will adjust to the committed changes made in that branch.

Since we didn't change anything yet, the screen of master and our new branch will look the same. The circle in front of the name, and the bold text, indicate which branch is active.

Changing the Code

Let's use the same example we used in Part 3
To change the code you open the folder created for this repo in the code editor of your choice. Then open the /src/client/components/Navigation/SidenavMain.js file.

At line 133, you will see the code that generates the Compose menu item in the left menu bar of the front-end. We'll change it to 'Write a Post'

After saving the file in your code editor, a change will be visible in Sourcetree.
At the top of the repo tree a new entry shows up Uncommitted changes. Click that entry to see the changes you made that have been saved to your local disc, but not committed to the repo yet.

The screen will look like this:

One of the major benefits is, you can undo the changes (per line, chunk or file) right from Sourcetree. Trust me, from time to time that is just what you want. The front-end uses React, which makes the front-end can be looked upon as being a collection of components. When you want to make a change to the code you will often find yourself going from one component to another, making changes everywhere, With the trial and error involved you easily lose track of what you did.

Sourcetree lists everything you did, and supplies an easy option to discard changes you are not happy with or debugging code you no longer need.

Committing Changes

When you have tested your changes and are happy with the results you can commit them to the branch. Before committing, files need to be moved from Unstaged files to Staged files. This is done by clicking the file and hitting Stage Selected, or in one go with Stage All.

Hit Commit in the top menu bar. At the bottom of the screen you'll find an input field to comment in more detail what the change is about, why it is done, and how it works. The level of detail needed depends on the changes you made. A text change is pretty straight forward, adding a feature will need more detail.

Switching Branches

With the file we changed still open in the code editor, you can see the difference between the two branches (master, and your new branch). At this moment, the file will show the 'Write a Post' phrase. Right-click the master branch in Sourcetree and select checkout master. After it finishes, check the file in your code editor again. It will now show 'Compose'.

Switching branches, results in loading different versions of the code.

Next time more on keeping your local version in sync with the original repo.

image source