js-dev-mac-setup.md

JavaScript Developer Setup

A hopefully helpful guide to getting a basic setup on your mac for JS and React Native development.

Note: This is a work in progress, I'll keep adding/updating

General Setup

• Homebrew - We'll need this to install other things below
  • /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • https://brew.sh/
• Git

  • brew install git (git-gui if you want Gitk)

  • git config —global user.email “your@email”

  • git config —global user.name “Your Name”

  • curl https://raw.githubusercontent.com/git/git/v2.24.3/contrib/completion/git-completion.bash -o ~/.git-completion.bash Change the version to whatever version of git you just installed (git --version)

  • Add the following to your ~/.bash_profile:

    if [ -f ~/.git-completion.bash ];
      . ~/.git-completion.bash
    fi
    

  • https://git-scm.com/download/mac

• GitHub

  • ssh-keygen -t ed25519 -C "your_email@example.com"

  • Accept the defaults. Passphrase is optional but recommended

  • eval "$(ssh-agent -s)" starts the ssh-agent

  • vi ~/.ssh/config to edit the config file (will create if doesn't already exist)

  • Add the following:

    Host *
      AddKeysToAgent yes
      UseKeychain yes
      IdentityFile ~/.ssh/id_ed25519
    

  • ssh-add -K ~/.ssh/id_ed25519 adds the new private key to ssh-agent (Note -K is only needed on a mac if you want to store the passphrase in your keychain

  • pbcopy < ~/.ssh/id_ed25519.pub to copy your public key to your clipboard

  • Then in (Github -> Settings -> SSH and GPG keys)

    • Click "New SSH key"
    • add a Title and paste your key in the Key field
    • Click "Add SSH key"
    • Enter your GitHub password if prompted

  • https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh

• NVM - Node Version Manager

  • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash Change version to latest

  • Check your ~/.bash_profile and if not already added by the above script, add the following:

    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
    

  • nvm install-latest-npm to install latest npm too

  • nvm install --lts to install latest LTS node version (or whichever version you want)

  • https://github.com/nvm-sh/nvm

• Yarn
  • npm install —global yarn
• Rbenv - Ruby version management (preferred to rvm)
  • brew install rbenv rbenv-build or brew upgrade rbenv ruby-build if already installed
  • curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash to check your installation
  • rbenv init
  • rbenv install -l to show latest stable releases
  • rbenv install x.y.z to install your required versions
  • rbenv global x.y.z to set default
  • rbenv local a.b.c to change to a different version in a project (if no .ruby-version file present)
  • https://github.com/rbenv/rbenv
• VSCode
  • Obviously a very subjective, personal choice. However I can recommend VS Code. It's free!, very powerful, and has a plethora of extensions
  • https://code.visualstudio.com/
  • If you already have VS Code on another machine set up as you like, you can sync your settings, including all your installed extensions etc, to another machine
  • https://code.visualstudio.com/docs/editor/settings-sync

React Native Setup

• Java
  • brew install --cask adoptopenjdk/openjdk/adoptopenjdk8
• Watchman
  • brew install watchman
• Bundler
  • gem install bundler
  • bundle init if you need to add a Gemfile and Gemfile.lock to your project
  • https://bundler.io/
• Dependencies
  • Cocoapods
    • Add gem “cocoapods”, “~> 1.10.1” to your Gemfile
  • Fastlane - optional
    • Add gem “fastlane” to your Gemfile
  • Then bundle install or bundle update to add those dependencies
• Fastlane setup - optional
  • In the iOS directory of your project fastlane init
  • Setup Fastlane Match
    • fastlane match init
    • fastlane match development or (appstore | adhoc | enterprise)
    • https://docs.fastlane.tools/actions/match/
• Xcode
  • ...
• Android Studio
  • ...