CodeNewbie Community 🌱

Cover image for How I setup my Development Environment on macOS 2022 Edition
Andrew Baisden
Andrew Baisden

Posted on

How I setup my Development Environment on macOS 2022 Edition

Current Software Developer Technical Stack 2022

Front-End: HTML, CSS, JavaScript, TypeScript, React, React Native, Redux

Back-End: Python, NodeJS, C#, SQL, NoSQL, Docker

Transfer Files

I always prefer to do a clean install when setting up a new computer. Either use a cloud backup solution to restore your data or use an external storage device to transfer your files to your new computer.

Install Web Browsers

Install Web Browser Extensions (chromium)

Install Software

I would install all of the apps that I use this includes personal and developer related. I will just include the developer apps as they are more relevant in this guide.

Install Package Managers

  • Hombrew
  • npm
  • Pip

Hombrew

https://brew.sh/

M1 Macs
Before installing Homebrew you will need to install the Rosetta2 emulator for the new ARM silicon (M1 chip). Install Rosetta2 using the terminal:

/usr/sbin/softwareupdate --install-rosetta --agree-to-license
Enter fullscreen mode Exit fullscreen mode

After installing Rosetta2 using the code above you can then use the Homebrew cmd and install Homebrew for ARM M1 chip.

arch -x86_64 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Enter fullscreen mode Exit fullscreen mode

Once Homebrew for M1 ARM is installed use this Homebrew command to install packages:

arch -x86_64 brew install <package>
Enter fullscreen mode Exit fullscreen mode

Install Packages

  • Hombrew automatically installs Pip pointing to the Homebrew’d Python 3 for you.

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 python
brew install kotlin
brew install postgresql
brew install yarn --without-node
brew tap heroku/brew && brew install heroku
brew install deno
brew install watchman
Enter fullscreen mode Exit fullscreen mode

Install oh-my-zsh

ZSH is already preinstalled in the latest versions of macOS. I also install https://ohmyz.sh/ as it allows for more configuration and is required in some cases.

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode

Use the command line to show all hidden files as the files you are searching for are going to be hidden by default.

defaults write com.apple.Finder AppleShowAllFiles true
killall Finder
Enter fullscreen mode Exit fullscreen mode

Install the Oh My Zsh plugins below

brew install zsh-autosuggestions
brew install zsh-syntax-highlighting
Enter fullscreen mode Exit fullscreen mode

To activate the plugins, add the following at the end of your .zshrc:

source /usr/local/share/zsh-autosuggestions/zsh-autosuggestions.zsh
source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
Enter fullscreen mode Exit fullscreen mode

You will also need to force reload of your .zshrc:

source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

If you receive "highlighters directory not found" error message, you may need to add the following to your .zshenv:

export ZSH_HIGHLIGHT_HIGHLIGHTERS_DIR=/usr/local/share/zsh-syntax-highlighting/highlighters
Enter fullscreen mode Exit fullscreen mode

MongoDB Install and Setup

https://stackoverflow.com/questions/57856809/installing-mongodb-with-homebrew

1) Install the Xcode command-line tools and the Homebrew one from https://brew.sh/#install

xcode-select --install
Enter fullscreen mode Exit fullscreen mode

2) Tap the MongoDB Homebrew Tap:

brew tap mongodb/brew
Enter fullscreen mode Exit fullscreen mode

3) Verify installation prerequisites in the macOS Terminal:

brew tap | grep mongodb
Enter fullscreen mode Exit fullscreen mode

4) install MongoDB

brew install mongodb-community@4.4
Enter fullscreen mode Exit fullscreen mode

5) Finally to run MongoDB (i.e. the mongod process) as a macOS service, issue the following

brew services start mongodb-community@4.4
Enter fullscreen mode Exit fullscreen mode

6) Download and install MongoDB Compass https://www.mongodb.com/try/download/compass

Use the command brew list to see all installed packages.

npm

Install node via nvm because nvm lets you quickly install and use different versions of node via the command line.

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

Install Packages Globally

npm i -g @aws-amplify/cli
npm i -g @sanity/cli
npm i -g babel-cli
npm i -g eslint
npm i -g expo-cli
npm i -g firebase-tools
npm i -g gatsby-cli
npm i -g jest
npm i -g lighthouse
npm i -g netlify-cli
npm i -g newman
npm i -g node-sass
npm i -g parcel-bundler
npm i -g pm2
npm i -g prettier
npm i -g serve
npm i -g spaceship-prompt
npm i -g surge
npm i -g typescript
npm i -g update
npm i -g vercel
npm i -g yarn
Enter fullscreen mode Exit fullscreen mode

Use the command npm list -g --depth 0 to see all installed packages.

Pip

Install Packages

Use the command pip or pip3 to install depending on your system.

pip3 install astroid
pip3 install autopep8
pip3 install certifi
pip3 install chardet2
pip3 install click
pip3 install Flask
pip3 install Flask-Cors
pip3 install harperdb
pip3 install idna
pip3 install isort
pip3 install itsdangerous
pip3 install Jinja
pip3 install lazy-object-proxy
pip3 install MarkupSafe
pip3 install mccabe
pip3 install psycopg2
pip3 install psycopg2-binary
pip3 install pycodestyle
pip3 install pylint
pip3 install python-dotenv
pip3 install requests
pip3 install setuptools
pip3 install six
pip3 install toml
pip3 install urllib3
pip3 install Werkzeug
pip3 install wrapt
Enter fullscreen mode Exit fullscreen mode

Use the command pip3 list or pip list to see all installed packages

Updating Python Packages

Pip can be used to upgrade all packages:

1) Output a list of installed packages into a requirements file (requirements.txt):

pip freeze > requirements.txt
Enter fullscreen mode Exit fullscreen mode

2) Edit requirements.txt, and replace all == with >= Use the β€˜Replace All’ command in the editor.
3) Upgrade all outdated packages:

pip install -r requirements.txt --upgrade
Enter fullscreen mode Exit fullscreen mode

React Native Setup

https://expo.io/

Setup BASH Application, Code Editors and IDE

I am currently using the dracula theme in Visual Studio Code, Visual Studio, Android Studio, PyCharm and both Hyper and iTerm 2.

Typeface

For typefaces I am using Jebrains Mono.

https://www.jetbrains.com/lp/mono/

Hyper Terminal

Install Plugins and customize

hyper i hypercwd
hyper i hyper-snazzy
hyper i hyper-dracula
Enter fullscreen mode Exit fullscreen mode
// default font size in pixels for all tabs
    fontSize: 16,

// font family with optional fallbacks
    fontFamily: 'JetBrains Mono, Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
Enter fullscreen mode Exit fullscreen mode

Visual Studio

Download and install the latest version of NET, including ASP.NET Core.

Visual Studio Code

If it is your first time using Visual Studio Code then do a clean install and configure it however you want. Otherwise use the built in Settings Sync feature to sync the settings from your previous setup.

Visual Studio Code Extensions I use

I currently have 41 extensions installed.

Beautify css/sass/scss/less
Better Comments
C#
colorize
Data Workspace
Docker
DotENV
Dracula Official
EJS language support
ES7+ React/Redux/React-Native snippets
ESLint
Excel Viewer
GitHub Pull Requests and Issues
GitLens β€” Git supercharged
HTMLHint
Import Cost
Jest
Jupyter
Jupyter Keymap
Jupyter Notebook Renderers
Live Server
markdownlint
Material Icon Theme
MDX
MongoDB for VS Code
npm
npm Intellisense
open in browser
Prettier - Code formatter
Project Manager
Pylance
Python
Rainbow CSV
Remote - Containers
Shades of Purple
SQL Database Projects
SQL Server (mssql)
SVG
Thunder Client
TSLint
vscode-styled-components

Top comments (3)

Collapse
 
khloeabrown profile image
Khloe Brown

Great article!
It's useful to have this for newbies who can learn whats out there to try and have.
It's also nice for those who forget that one important program to install πŸ˜…

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks yes I agree it's nice to have a guide that you can follow.

Collapse
 
soosoo7 profile image
SooSoo7

This is something too complicated for me. I'm a very simple Mac user who often requires the most stupid guides and all that to understand how and what works. This may be strange for some, but I even googled how to make screenshot setapp.com/how-to/screenshot-on-mac. After many years of using Windows, it’s still difficult for me to get used to using MacOS, but I think it’s a matter of time.