How I setup my Development Environment on macOS

This guide is for macOS however it should be easy enough to get it working on Windows and Linux assuming the same software and tools are available as well otherwise use alternatives. Just use the commands appropriate for that operating system when doing the installation.

This is a clean install so you might need to restart the Terminal/Mac a few times before everything works properly.

Install Software

Web Browsers (Normal, Developer, and Nightly Builds)




Code Editor and Terminal Apps

Visual Studio Code (Install shell commands too)

Hyper and iTerm 2 plus Oh My Zsh

Design Tools

Adobe CC

Figma/Adobe XD/Sketch

API Test Tools


Documentation Browser (Chrome installation)

File Transfer Tools


Install Developer and Web Browser Tools

Adblock Plus

Apollo Client Developer Tools (Chrome)



JSON Viewer (Chrome)




Notion Web Clipper (Only when and if you have Notion Installed)

React Developer Tools

Redux DevTools

Video DownlodHelper

Vue.js Devtools


Web Developer (Chrome)

Install Programming Font for Code Editors and Terminal Applications

GitHub — tonsky/FiraCode: Monospaced font with programming ligatures

  • Visual Studio Code
  • Hyper
  • iTerm 2

Install Python, pip, and the AWS CLI on macOS

Install and setup AWS Accounts

Configuring the AWS CLI — AWS Command Line Interface

Install the AWS Command Line Interface on macOS — AWS Command Line Interface

macos — AWS CLI $PATH Settings — Stack Overflow

  1. Download and install Python
  2. Download pip
  3. cd into the folder with the downloaded pip file and in your terminal use the command below
  1. Use pip to install the AWS CLI.
pip3 install awscli --upgrade --user
  1. Verify that the AWS CLI is installed correctly.
aws --version

If the executable cant be found then add it to your command line path depending on where python installed it.

Find your shell’s profile script in your user folder. If you are not sure which shell you have, run echo $SHELL

Bash – .bash_profile, .profile, or .bash_login.
Zsh – .zshrc (zsh is the one in use right now)
Tcsh – .tcshrc, .cshrc or .login.

Add the export command to the profile script

export PATH=/Users/yourName/Library/Python/3.6/bin/:$PATH

Install Hombrew

Brew Install

FAQ — Homebrew Documentation

Install Hombrew

/bin/bash -c "$(curl -fsSL"

How do I update my local packages?

First update the formulae and Homebrew itself:

brew update

You can now find out what is outdated with:

brew outdated

Upgrade everything with:

brew upgrade

Or upgrade a specific formula with:

brew upgrade <formula>

You can install Yarn through the Homebrew package manager. This will also install Node.js if it is not already installed. If you use nvm or similar you should exclude installing Node.js so that nvm’s version of Node.js is used.

Use brew to install the below packages

brew install tree (It allows you to view all files in a tree view)
brew install ruby
brew install git
brew install mongodb
brew install yarn or brew install yarn --without-node
brew install heroku
brew install graphql-playground
brew install deno

Full brew list installed packages

deno            heroku-node     openssl         python@2        sqlite
gdbm icu4c openssl@1.1 python@3.8 tree
gettext libyaml pcre2 readline xz
git mongodb pkg-config ruby yarn
heroku node python sphinx-doc

Install MongoDB Compass

Install MongoDB Community Edition on macOS — MongoDB Manual 3.6

Install Compass — MongoDB Compass stable

Connection String URI Format — MongoDB Manual 3.6

Install Node Version Manager

Use it to install Nodejs and NPM

Node Version Manager

node.js — How to update node with nvm — Stack Overflow

Use NPM to install packages

npm i --global @gridsome/cli @vue/cli babel-cli eslint firebase-tools gatsby-cli jest lighthouse netlify-cli newman node-sass nodemon now npm parcel-bundler pm2 prettier serve spaceship-prompt surge update

Globally Installed Packages

├── @gridsome/cli@0.0.9
├── @vue/cli@3.12.1
├── babel-cli@6.26.0
├── eslint@5.16.0
├── firebase-tools@6.12.0
├── gatsby-cli@2.12.65
├── jest@25.5.4
├── lighthouse@4.3.1
├── netlify-cli@2.58.0
├── newman@4.6.1
├── node-sass@4.14.1
├── nodemon@1.19.4
├── now@17.1.1
├── npm@6.14.7
├── parcel-bundler@1.12.4
├── pm2@4.4.0
├── prettier@1.19.1
├── serve@11.3.2
├── spaceship-prompt@3.11.2
├── surge@0.20.5
└── update@0.7.4

Locally Installed Packages

webpack and webpack Dev Server (Locally). Note that a global webpack installation is not a recommended practice. This locks you down to a specific version of webpack and might fail in projects that use a different version.

NPM Versioning Files Example


The first number is the major version number also known as a significant new release with major changes like a new design or big feature set. Or when there is a break so the functionality requires a new build.

The second number is the minor version number also known as new feature updates.

The third number is the patch version number also known as bug fixes and performance increases to the build.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store