Skip to content

3. Developer Prerequisites

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

This chapter details all the things to do before running the code on your computer.

3.1 Ubuntu

If you already use linux ubuntu as your operating system, skip this step. In addition, you could choose to develop on a Mac or Windows OS, but many of these instructions are for running on Ubuntu.

3.1.1 Remove the prompt for password

Click the Search Applications and enter Passwords and Keys From the Passwords and Keys app, right-click the "login" keyring Select "Change password” and enter your current password Leave the form blank for new password and click Ok.

3.1.2 Update Ubuntu OS (patches) and other installed software (do this often)

Note: Ubuntu comes out with minor releases of their core software, however, it is best practice to not upgrade until there is a LTS version of the OS. Click the Software Updater from the GUI, which finds and installs OS updates Run this command to pull down the other installed software updates: sudo apt-get update Run this command to install the updates: sudo apt-get upgrade Restart Ubuntu Run the Software Updater tool again to verify that everything is up to date.

3.2 GitHub Account

Create a GitHub account (if you don’t already have one). Send your GitHub username to joshua.v.sherman@gmail.com so that he can add you to the GitHub Org and team.

3.3 Install Programs onto Ubuntu

Start your Ubuntu VM and install the following programs:

3.3.1 Curl

sudo apt install curl

3.3.2 NodeJS

It is much easier to install and manage versions of NodeJS by using the Node Version Manager. For more information, go to their website at https://github.com/creationix/nvm

Node Version Manager installs by using this curl command (you should probably get it from their website as it seems to be a version specific command)

After installing Node Version Manager, close and reopen the terminal.

Use the following commands from terminal to install NodeJS:

nvm install node (This installs the latest version)

nvm alias default node (Sets this new version of node as default for all locations)

node --version (This verifies the versions again)

3.3.2.1 Updating NodeJS Version

  1. Upgrade to current LTS version, use this command:

nvm install lts/*

  1. Set this as the default version by using this command:

nvm alias default lts/*

  1. To use default version, run:

nvm use default

3.3.3 Git

Local Git is native to Ubuntu but needs to be set up initially.

From the terminal type git init

Set the global variables for your username, email address, color.ui=auto, and color.diff=auto

git config --global user.name “{firstname} {lastname}”

git config --global user.email “{email}”

git config --global color.ui auto

Refer to the Git cheat sheet that is in the Google Drive folder.

Getting Started - First-Time Git Setup

Run git config --list to display your current global configuration

Some other good resources for Git and GitHub:

Removing a file from being tracked (you accidentally commit a file that you should have gitignored)

Forking a Repo Syncing a Fork

3.3.4 Yarn

https://yarnpkg.com/getting-started

3.3.5 Atom

Note Atom is not required, you can use whatever IDE you prefer, for example, Sublime, VSCode, Webstorm, etc.

Atom is a text based code editor. Download and install it from http://www.Atom.io Or on Ubuntu, use these instructions to install.

Also install several packages for atom: Linter, linter-eslint, and linter-stylelint. They help check your syntax in the code for consistency across the team.

To install/verify Atom packages:

From the Atom menu bar, select Edit > Preferences; select Packages from the left side menu bar. Installed Packages display.

Additional Atom packages are needed. Install these packages by selecting Install from the left side menu bar. In the search packages box, type the package name and click .

git-plus
atom-beautify
Atom-ide-ui
Ide-css
Ide-html
Ide-json
Ide-yaml
Jsx-comment
Linter-eslint
linter-ui-default

Note: The Web-jam project’s .editorconfig file also contains useful settings for the Atom editor, and it is available when you install the code from GitHub.

3.3.5.1 Update the Atom Keybindings (keyboard shortcuts)

From the Atom menu bar, select Edit > Preferences. Select Keybindings from the left side menu bar.

Click the blue link (your keymap file)

Keymap.cson opens, copy and paste this into that configuration file (indents matter)

'atom-text-editor':
    'ctrl-i': 'editor:auto-indent'
    'ctrl-delete': 'editor:delete-to-next-word-boundary'
    'ctrl-backspace': 'editor:delete-to-next-word-boundary'

Save it (ctrl-s) and then Restart Atom for the settings to take effect.

3.3.6 KeePass

KeePass is a free open source password manager, which helps you to manage your passwords in a secure way. You can put all your passwords in one database, which is locked with one master key or a key file. You only have to remember one single master password or select the key file to unlock the whole database.

Install KeePass on your main Operating System - not needed to be within Ubuntu

3.3.8 Chrome

Install Chrome within your Ubuntu

Install the following Chrome extensions:

ZenHub (organizes layout of issues on GitHub)
NIM (Node inspector manager)

3.3.9 Dropbox local sync to transfer files

Install Dropbox within your Ubuntu

If Nautilus won’t restart, use this command from terminal, then restart Ubuntu

nautilus -q

Sign up for a dropbox account (if you don’t already have one).

Send an email to joshua.v.sherman@gmail.com with your account username, and he will add you to the WebJamApps dropbox

Sign into your dropbox account online and then click Sharing, folders, and click Add (the WebJamApps folder)

3.4 Local Git, GitHub, and Zenhub

Learn to use local Git, GitHub, and ZenHub. Create a practice repository in GitHub and try things out for a while. You should be familiar with the following concepts:

Branch: When you are working on a project, you are going to have a bunch of different features or ideas in progress at any given time – some of which are ready to go, and others which are not. Branching exists to help you manage this workflow.

When you create a branch in your project, you are creating an environment where you can try out new ideas. Changes you make on a branch do not affect the base branch, so you are free to experiment and commit changes, safe in the knowledge that your branch will not be merged until it is ready to be reviewed by someone you are collaborating with.

Pull Request: Pull requests let you tell others about changes you have pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository.

After initializing a pull request, you will see a review page that shows a high-level overview of the changes between your branch (the compare branch) and the repository's base branch. You can add a summary of the proposed changes, review the changes made by commits, add labels, milestones, and assignees, and @mention individual contributors or teams.

After you are happy with the proposed changes, you can merge the pull request. If you are working in a shared repository model, the proposed changes will be merged from the head branch to the base branch that was specified in the pull request.

Issues: Use issues to track ideas, enhancements, tasks, or bugs. Issues can act as more than just a place to report software bugs. As a project maintainer, you can use Issues to organize tasks you would like to accomplish, such as adding new features or auditing old ones.

Board (pipeline): Project boards help you organize and prioritize your work. You can create project boards for specific feature work, comprehensive roadmaps, or even release checklists. Project boards are made up of issues, pull requests, and notes that are categorized as cards in columns of your choosing.

Cards can be moved from column to column and reordered per your needs. Project board cards contain relevant metadata for issues and pull requests, like labels, assignees, the status, and who opened it. To see more details about the issue or pull request, you can easily navigate to it by clicking the link within the card.

Milestones: You can use milestones to track progress on groups of issues or pull requests in a repository.

Wiki: Every GitHub repository comes equipped with a section for hosting documentation, called a wiki. GitHub Wikis are a place in your repository where you can share long-form content about your project, such as how to use it, how it has been designed, manifestos on its core principles, and so on.

Whereas a README is intended to quickly orient readers as to what your project can do, wikis can be used to provide additional documentation.

git pull origin dev: A pull is a fetch and a merge. The command ‘git pull origin dev’ fetches commits from the dev branch of the origin remote (into the local origin/dev branch), and then it merges origin/dev into the branch you currently have checked out.

git branch {yourbranch}: This command is used to create a local working branch so that changes you make do not affect the base branch.

git checkout {yourbranch}: This command is used to update files in the working branch to match the version in the index.

git stash: This command is used when you want to record the current state of the working directory and the index, but want to go back to a clean working directory. The command saves your local modifications away and reverts the working directory to match the head commit.

git rebase: This command allows you to easily change a series of commits, modifying the history of your repository. You can reorder, edit, or squash commits together.

Typically, you would use “git rebase” to:

-edit previous commit messages
-combine multiple commits into one
-delete or revert commits that are no longer necessary.