Skip to content

5. Developing the Frontend or Backend Codebase

Joshua V Sherman edited this page Mar 23, 2020 · 2 revisions

Prerequisites:

Completed all the setup procedures in the previous chapter, Running the App Locally

  • The lasted version of the front-end or back-end code is currently running successfully from your localhost.
  • Your coding task from ZenHub board has you name on it and you have moved it to the In Progress Pipeline so that nobody else will be duplicating your efforts.

5.1 Be on Your Branch and Up-to-date

-Create your working branch.

Type git branch {thenameofyourbranch}

-Checkout your branch to work on it.

Type git checkout {yourbranch}

-Confirm the working branch.

Type git branch (the branch will appear in green with an asterisk)

-git pull origin dev

Merge conflicts are not allowed!

-npm start

If npm start fails, repeat the step in the section, Check for Node Version and Install Packages

5.2 Make changes to the code

Prerequisites:

You are on your git branch
You have the latest code pulled down from the dev branch
Your version of NodeJS matches the package.json
You have installed all packages and can start the server

-On the Ubuntu desktop, navigate to your project root folder.

-Right-click the appropriate folder for the repo you are editing, and open with Atom.

-Verify that in the bottom-right corner of Atom it displays your branch name.

If it does not, go back to the terminal, stop the server, and change to your branch.

-Use the Atom editor tree view to navigate to files, and then make your changes to the code within the file(s).

-Save the changes by typing ctrl+s or by clicking file > save all in the menu at the top of the Atom screen. Notice that any file that has been changed and saved becomes orange in the project tree view of Atom.

-Refresh the Chrome browser to see your changes.

-Stop making changes when you have finished one logical task or a logical part of a task that can be labeled as a particular change in GitHub.

It is important not to make hours of changes without any git commits.

-When you are finished, stop the server. In the terminal, type ctrl+c

-From the terminal, type npm test and verify that all of the tests still pass.

-Then, type npm run server:prod and open chrome. Go to localhost:8080 and verify that the page loads into the browser.

If there is an issue with the page loading, refer to our Troubleshooting section of this document.

5.3 Push code from your local branch to your branch in github.com

Pro Tip: It is a good practice to check your git diffs locally before committing to GitHub. The Atom editor has a package called git-plus, which makes this easier to do.

Log into github.com, navigate to the repository, and delete your branch (if there is one).
From your Ubuntu terminal, stop any running server (type ctrl-c), then type git add . (this stages all changed files).
Type git commit -m “enter a detailed, useful message about the changes made within quotes”
Type git push origin {your branch name without the curly braces}
At the prompt, enter your username and password for Github.

From github.com, the repository, and your branch, create a pull request to the dev branch (base branch).

-Select a reviewer (this will typically be JoshuaVSherman), and write a comment about your requested code review.

-In addition, select Connect with an Issue and choose any related task for this pull request.

Note: if you have a merge conflict, your pull request will be denied. Cancel the pull request and resolve the conflict before re-submitting the pull request.

If you have a task under review without a pull request, in the comments type "@JoshuaVSherman please review this" so the reviewer gets notified.

5.3.1 After Submitting Your Changes

Your changes will be reviewed and merged to master.
Your reviewer will close your task.
Check the board for the next task you would like to work on.

When choosing a task:

  • Make sure you assign it to yourself
  • Choose tasks that are in the current pipeline (or maybe one in the future pipeline to the left on the board)
  • Make an estimate for how long it will take you to complete the task.
  • Move the task to the In Progress pipeline when you start work.