Configuring Your Mac System

1. Install Command Line Tools

You will need to install certain tools that will be used throughout the course.

  1. Install brew

    Brew is a package manager that we use to install various command line applications to your computer.

    Open your terminal (Applications > Utilities > Terminal), paste the following command, and hit enter:

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

  2. Install Git

    Git is used to track the state of your code over time. GitHub has built its platform on Git technology. We will be using both Git and GitHub to distribute code, submit assignments, and offer feedback. Use the following command to install Git:

    brew install git

  3. Configure Git

    Copy and paste the following two commands (separately) into your terminal. Replace the name and email address values with your own.

    git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"

    (source: GitHub)

    Next, copy and paste one of the following commands into your terminal, based on which text editor you'll be using:

    Visual Studio Code:

    git config --global core.editor "code -w"

  4. Install Node

    Refer to the package installer on Node’s website. Select the "Recommended For Most Users" version (labeled "LTS"). Then just follow the set-up instructions.

  5. Ensure NPM is updated

    Node has a handy package manager, which we will using frequently. It comes with Node, but NPM is updated more frequently; you will always need to have the most up-to-date version.

    npm install npm -g

    If you receive an error message titled EACCES, enter the following command to change directory permissions to install Node and npm without the need to use sudo: 

    sudo chown -R $(whoami) /usr/local/lib/node_modules

    Then repeat the previous command, which should finish without an error.

    After successfully completing the above steps, continue with 2. Set up GitHub Enterprise below.

  6. Install Linter packages

    We will use specialised linting program called ESLint to help format our code properly. ESLint will highlight any syntax errors in the code with a red line and will tell you what the error is when hovering over the red line.

    npm install -g eslint babel-eslint

2. Code Editor and Linter setup

We will need a text editor to open and edit code.

  1. Install a text editor

    Visual Studio Code can be found here and is available for all platforms. Copy it into your Applications folder, and add it to your dock

  2. Configure your text editor

    Visual Studio Code

    Start Visual Studio Code (Applications > Visual Studio Code).

    Press shift + command + P to open the Command Palette.

    Type shell command, then in the displayed list, click Shell Command: Install 'code' command in PATH.

  3. Add the Linting rules

    Earlier on we added the ESLint packages and now we have to apply the rules we want for how our code should look. There are many different approaches to code syntax, e.g.: leaving out semicolons at the end of lines ;. These rules are just one way of doing things. In the terminal run the following: 

    code ~/.eslintrc

    Cut and paste the following into the eslintrc file you just opened in VS Code:

    
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "$": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 7,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "brace-style": "error",
    "camelcase": ["error", { "properties": "never" }],
    "comma-dangle": ["error", "never"],
    "func-call-spacing": ["error", "never"],
    "eqeqeq": "warn",
    "indent": [ "error", 2, { "SwitchCase": 1 } ],
    "key-spacing": [ "error", { "beforeColon": false } ],
    "no-console": "off",
    "no-fallthrough": "warn",
    "quotes": [ "error", "single" ],
    "semi": [ "error", "always" ]
  }
}

    Save the file with cmd + S.

  4. Download VS Code plugins

    In your editor find the Extensions tab on the left-hand side. Search for the following plugins from the Extensions Marketplace and install them:

    1. open in browser
    2. Live Server

3. Set Up Zsh

We will go into a bit more detail about the shell later on in the course but a shell is a very basic user interface for accessing an operating system's services.

We are going to use another shell called zsh because it has some extra features to make our development easier:

  1. Install zsh

    brew install zsh

  2. Check zsh path

    Type the following:

    which zsh

    it should say /usr/local/bin/zsh

  3. Install oh-my-zsh plugin

    Oh My Zsh is an open source, community-driven framework for managing your zsh configuration. Here is the link to the Github.

    sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

    When prompted "Do you want to change your default shell to zsh?" type Y and hit return.

    Enter your password.

4. Set Up GitHub Enterprise

We will be using the GitHub Enterprise service to share- some of our code. We will learn about the underlying technology of GitHub known as git in the next lesson.

  1. Make sure you have signed up for an account at https://git.generalassemb.ly

Helpful Debugging Tips

Error installing due to permissions

Permissions issues are common when installing programs on the terminal. In order to install command line utilities, you need to be signed into a user account on your computer with administrator-level rights. If you have trouble with this, please ask a member of the instructional team for help.

Google is your friend

Even experienced programmers occasionally need to look up error messages on Google. If you experience an error, it’s likely that someone else has experienced the error, as well. To find the fix, copy and paste the error message into Google, but remove content specific to your computer to ensure the accuracy of your search. You will most likely find a reference to your specific error. StackOverflow is a trustworthy reference.

Common Issues and Fixes: