loading...
Cover image for Setup macOS for Development

Setup macOS for Development

equiman profile image Camilo Martinez Updated on ・9 min read

I’m relatively new on macOS and one of the biggest problems switching from Windows was set up all those SDK and libraries required for web/mobile development.

I made several mistakes, but I think that finally found a good way to set up a macOS as a development machine.

It's not a definite solution because there are uncountable combinations and I can cover all of them. Just use what you need, don't install SDK or software that you will not gonna use.

Before start highly recommend change your terminal follow this configuration:

Software Repository

Homebrew

Brew has his own classification. The inside brew can found the CLI app and utilities. Inside cask is all the application with Graphical Interface.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew tap homebrew/cask-fonts

brew update
brew upgrade
brew cleanup
Enter fullscreen mode Exit fullscreen mode
https://brew.sh — usage: https://docs.brew.sh/FAQ

Run this command, and follow doctor recommendations:

brew doctor
Enter fullscreen mode Exit fullscreen mode

SDK Man

curl -s "https://get.sdkman.io" | bash
source "$HOME/.sdkman/bin/sdkman-init.sh"
Enter fullscreen mode Exit fullscreen mode
http://sdkman.io — usage: https://sdkman.io/usage

Permissions

Add permissions to user (or group) under this folders and enclosed items:

sudo chown -R $(whoami) /usr/local/opt
sudo chown -R $(whoami) /usr/local/share
Enter fullscreen mode Exit fullscreen mode

WARNING: Add the next permission just in case your machine is used by only one user.

sudo chown -R $(whoami) /usr/local/lib
Enter fullscreen mode Exit fullscreen mode

General Purpose

Visual Studio Code

brew cask install visual-studio-code
Enter fullscreen mode Exit fullscreen mode
https://code.visualstudio.com

On first run press + + P and run the command: Shell Command: install 'code' command PATH. And now you can use code command from the command line. Example: code . open an editor on the current folder.

Git

brew install git
rm '/usr/local/bin/git-cvsserver'
brew link --overwrite git
brew install git-lfs
git lfs install
Enter fullscreen mode Exit fullscreen mode
https://git-scm.com

Git Config

In order to use setup git config to use Visual Studio Code instead of Vim run this command:

git config --global core.editor 'code --wait'
Enter fullscreen mode Exit fullscreen mode

Use this command to edit global configuration:

git config --edit --global
Enter fullscreen mode Exit fullscreen mode

Merge and Diff Config

If also want to use VScode as your difftool and your mergetool. Add the below configuration to your global configuration.

[merge]
    tool = vscode
[mergetool "vscode"]
    cmd = code --wait $MERGED
[diff]
    tool = vscode
[difftool "vscode"]
    cmd = code --wait --diff $LOCAL $REMOTE
Enter fullscreen mode Exit fullscreen mode

Use main branch

And if you want to change your default branch with main as GitHub does.

git config --global init.defaultBranch main
Enter fullscreen mode Exit fullscreen mode

Source Tree

brew cask install sourcetree
Enter fullscreen mode Exit fullscreen mode
https://www.sourcetreeapp.com

Web Development

Node.js

I prefer to install Node through NVM (Node Version Manager).

brew install nvm
mkdir ~/.nvm
chmod +x /usr/local/opt/nvm/nvm.sh
Enter fullscreen mode Exit fullscreen mode

Add this environment variables to ~/.bash_profile and/or ~/.zshrc file:

export NVM_DIR="$HOME/.nvm" 
#Load NVM and Bash Completion
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"
[ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion"
Enter fullscreen mode Exit fullscreen mode

Install last LTS version

nvm install --lts
nvm alias default stable
nvm use default
Enter fullscreen mode Exit fullscreen mode
https://nodejs.org

And finally, update npm:

npm i -g npm
Enter fullscreen mode Exit fullscreen mode
https://www.npmjs.com

If it doesn't recognize npm command close and open the terminal and run the command again.

Update latest LTS version

nvm install lts/* --reinstall-packages-from=default --latest-npm
nvm alias stable lts/*
nvm use default
Enter fullscreen mode Exit fullscreen mode

Remove previous versions

nvm uninstall #.#.#
cd ~/.nvm/versions/node
sudo rm -rf v#.#.#/
Enter fullscreen mode Exit fullscreen mode

Yarn (npm alternative)

brew install yarn --ignore-dependencies
Enter fullscreen mode Exit fullscreen mode
https://yarnpkg.com

Packages

Do it with your favorite node package manager: yarn or npm

Name Yarn npm
Angular yarn global add @angular/cli npm i -g @angular/cli
Cordova yarn global add cordova npm i -g cordova
Gulp yarn global add gulp npm i -g gulp
ESLint yarn global add eslint npm i -g eslint
Typescript yarn global add typescript npm i -g typescript

CLI Tools

Do it with your favorite node package manager: yarn or npm

Name Yarn npm
fkill-cli yarn global add fkill-cli npm i -g fkill-cli
npkill yarn global add npkill npm i -g npkill

Yarn with VSCode

If you are using Visual Studio Code and ESLint extension, need extra configurations settings:

"eslint.packageManager": "yarn",
Enter fullscreen mode Exit fullscreen mode
Open Visual Studio Code settings with ⌘ + ,

Yarn with Angular

Using Yarn with Angular CLI, needs to run a command inside an Angular project.

v1.7.4- v6+
ng set --global packageManager=yarn ng config -g cli.packageManager yarn

Angular Console

The Power of the Angular CLI. The Convenience of an App.

brew cask install angular-console
Enter fullscreen mode Exit fullscreen mode

Browsers

brew cask install google-chrome
brew cask install firefox
brew cask install homebrew/cask-versions/firefox-developer-edition
brew cask install opera
brew cask install opera-developer
brew cask install microsoft-edge
brew cask install microsoft-edge-dev
Enter fullscreen mode Exit fullscreen mode

Take this FREE course: DevTools Pro: The Basics of Chrome Developer Tools.


Mobile

I like to install Gradle and Java with SDK Man because have projects that and need switch between different version, change it with SDK Man is easy.

Gradle

I'm working with 3.3 and 4.4.1 versions, if you want to use the last version, avoid the version number at the end.

sdk install gradle 3.3
sdk install gradle 4.4.1
sdk use gradle 4.4.1
sdk default gradle 4.4.1
Enter fullscreen mode Exit fullscreen mode
https://gradle.org

Java

sdk list java
Enter fullscreen mode Exit fullscreen mode

Search AdoptOpenJDK version, like 8.0.272.hs-adpt on this list, and use it at the end like those commands.

sdk install java 8.0.272.hs-adpt
sdk use java 8.0.272.hs-adpt
sdk default java 8.0.272.hs-adpt
Enter fullscreen mode Exit fullscreen mode
https://java.com

Android SDK

brew cask install android-sdk
Enter fullscreen mode Exit fullscreen mode
https://developer.android.com/studio/#downloads

Useful SDK Manager commands:

Action Command
List packages sdkmanager --list
Install NDK sdkmanager "ndk-bundle"
Install build-tools sdkmanager "build-tools;28.0.3"
Install platform sdkmanager "platforms;android-28"
Update installed packages sdkmanager --update
https://developer.android.com/studio/command-line/sdkmanager

Add this environment variables to ~/.bash_profile and/or ~/.zshrc file:

export ANDROID_SDK_ROOT="/usr/local/share/android-sdk"
export ANDROID_HOME="$ANDROID_SDK_ROOT"
export ANDROID_NDK_HOME="$ANDROID_SDK_ROOT/ndk-bundle"
export ANDROID_BT_VERSION="$(ls -tr $ANDROID_SDK_ROOT/build-tools | sort | tail -1)"

export PATH="$ANDROID_SDK_ROOT/bin:$PATH"
export PATH="$ANDROID_SDK_ROOT/build-tools/$ANDROID_BT_VERSION:$PATH"
export PATH="$ANDROID_SDK_ROOT/platform-tools:$PATH"
export PATH="$ANDROID_SDK_ROOT/tools:$PATH"
export PATH="$ANDROID_NDK_HOME/:$PATH"
Enter fullscreen mode Exit fullscreen mode
https://developer.android.com/studio/command-line/variables

Android Bundle Tool

brew install bundletool
Enter fullscreen mode Exit fullscreen mode

Android Studio

brew cask install android-studio
brew cask install intel-haxm
Enter fullscreen mode Exit fullscreen mode
https://developer.android.com/studio/

On the first run go to Tools -> Create Command-line Launcher. And now you can use studio command from the command line. Example: studio . open IDE on current folder.

JADX

Dex to Java decompiler

brew install jadx
Enter fullscreen mode Exit fullscreen mode
https://github.com/skylot/jadx

Scrcpy (Mobile Screen Sharing)

brew install scrcpy
Enter fullscreen mode Exit fullscreen mode
https://github.com/Genymobile/scrcpy

Xcode

Just install it from Apple Store: Xcode and Xcode Command Line Tools

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

Cloud and Remote

Docker

brew cask install docker
Enter fullscreen mode Exit fullscreen mode
http://www.docker.com

FileZilla (FTP Client)

brew cask install filezilla
Enter fullscreen mode Exit fullscreen mode
https://filezilla-project.org

Cryptomator

Free client-side encryption for your cloud files. Open-source software: No backdoors, no registration.

brew cask install cryptomator
Enter fullscreen mode Exit fullscreen mode
http://cryptomator.org

Database

MySQL + Workbench

brew install mysql
brew cask install mysqlworkbench
Enter fullscreen mode Exit fullscreen mode
https://www.mysql.com

To launch MySQL now and restart at login:

brew services start mysql
Enter fullscreen mode Exit fullscreen mode

Or, if you don’t want/need a background service you can just use the mysql.server tool:

mysql.server start
mysql.server stop
Enter fullscreen mode Exit fullscreen mode

PostgreSQL and pgAdmin

brew install postgresql
brew cask install pgadmin4
Enter fullscreen mode Exit fullscreen mode

Add this environment variables to ~/.bash_profile and/or ~/.zshrc file:

export POSTGRESQL_HOME="/usr/local/opt/postgresql"

export PATH="$POSTGRESQL_HOME/bin:$PATH"
export LDFLAGS="-L$POSTGRESQL_HOME/lib"
export CPPFLAGS="-I$POSTGRESQL_HOME/include"
Enter fullscreen mode Exit fullscreen mode

Initialize and start server

initdb /usr/local/var/postgres -E utf8
createuser -s postgres
brew services start postgresql
Enter fullscreen mode Exit fullscreen mode

Microsoft

.Net Core SDK

brew cask install dotnet-sdk
Enter fullscreen mode Exit fullscreen mode
https://www.microsoft.com/net/download

Add this environment variables to ~/.bash_profile and/or ~/.zshrc file:

export DOTNET_HOME="/usr/local/share/dotnet/dotnet"
export PATH="$DOTNET_HOME/bin:$PATH"
Enter fullscreen mode Exit fullscreen mode

Graphic Design

Gimp (Image Editor)

brew cask install gimp
Enter fullscreen mode Exit fullscreen mode
http://www.gimp.org

Slurp (Color Picker)

Just install Slurp from Apple Store and remove all his shortcuts because interferes with VSCode ones.

slurp


Utilities

Mail

Don't use the default mail app, it's primitive and not usable at all. Just install Spark Mail from Apple Store.

Communicators

brew cask install slack
brew cask install discord
brew cask install microsoft-teams
brew cask install webex-teams
Enter fullscreen mode Exit fullscreen mode

Notion

brew cask install notion
Enter fullscreen mode Exit fullscreen mode
https://notion.so

Keka (File Compression)

brew cask install keka
Enter fullscreen mode Exit fullscreen mode
http://www.kekaosx.com

Follow these instructions: set as default compress application

App Cleaner (App Uninstaller)

Use it with software installed manually. With software installed with brew use brew remove <package_name> or brew cask remove <software_name>.

brew cask install appcleaner
Enter fullscreen mode Exit fullscreen mode
https://freemacsoft.net/appcleaner

Karabiner (Keyboard Customizer)

brew cask install karabiner-elements
Enter fullscreen mode Exit fullscreen mode
https://pqrs.org/osx/karabiner/

Muzzle

Silence embarrassing notifications while screencasting.

brew cask install muzzle
Enter fullscreen mode Exit fullscreen mode
https://muzzleapp.com/

Dozer

Hide menu bar icons on your Mac.

brew cask install dozer
Enter fullscreen mode Exit fullscreen mode
https://github.com/Mortennn/Dozer

The Clock

brew cask install the-clock
Enter fullscreen mode Exit fullscreen mode
https://seense.com/the_clock/

EUL

Status monitoring with Big Sur widgets

brew cask install eul
Enter fullscreen mode Exit fullscreen mode
https://github.com/gao-sun/eul

Productivity

Yes, I'm that kind of Developer that turn Caffeine Music into Code.

YouTube Music (Desktop Player)

I've preferred YTM over Spotify because I can upload my own underground music collection that is not available in public music collections. That's a plus for Metalheads 🤘.

brew cask install ytmdesktop-youtube-music
Enter fullscreen mode Exit fullscreen mode
https://ytmdesktop.app/

Remove all his shortcuts because interferes with macOS and VSCode ones.

YTM Shortcuts

Spotify

brew cask install spotify
Enter fullscreen mode Exit fullscreen mode
https://www.spotify.com/

Rectangle (Windows Management)

brew cask install rectangle
Enter fullscreen mode Exit fullscreen mode
https://rectangleapp.com/

To avoid collisions with Visual Studio Code keyboard combination uses the alternative shortcuts. Running this command in a terminal and restart rectangle:

defaults write com.knollsoft.Rectangle alternateDefaultShortcuts -bool true
Enter fullscreen mode Exit fullscreen mode

Rectangle Alternative Shortcut

Keeping You Awake

A small menu bar utility that can prevent your Mac from entering sleep mode for a predefined duration or as long as it is activated.

brew cask install keepingyouawake
Enter fullscreen mode Exit fullscreen mode
https://github.com/newmarcel/KeepingYouAwake/

Aware (Track Time)

A simple menubar app that tracks how long you’ve been actively using your computer.

brew cask install aware
Enter fullscreen mode Exit fullscreen mode
http://awaremac.com

CheatSheet (Key Shortcuts)

Just hold the ⌘-Key a bit longer to get a list of all active short cuts of the current application. It’s as simple as that.

brew cask install cheatsheet
Enter fullscreen mode Exit fullscreen mode
http://www.mediaatelier.com/CheatSheet/

Bonus Track

Once finish install of what you need, run the command brew cleanup to release disk space.

Screenshot without Shadow

Just use Shift + + 4 + Space, and hold down when you click to select the window.

Or you can disable forever the shadow added when capturing an entire window by executing the following command from the terminal:

defaults write com.apple.screencapture disable-shadow -bool TRUE
killall SystemUIServer
Enter fullscreen mode Exit fullscreen mode
http://apple.stackexchange.com/a/50862/230672

And change the default location

defaults write com.apple.screencapture location ~/Pictures/Screenshots
Enter fullscreen mode Exit fullscreen mode

Drag & Drop

Learn these useful tips:


That’s All Folks!
Happy Coding 🖖

Buy me a cofee

Discussion

pic
Editor guide
Collapse
_mikhailbot profile image
Mikhail 🐺

I didn't read everything but a quick note about your Node and Yarn setup! I would strongly recommend using nvm for managing Node versions and not installing Node through Brew. It allows you fine grained control over what Node you want to use, don't have to just use one version on your whole system!

Once you've got that, you'll also want to install Yarn without Node so that it's independent of the version of Node which is handled by nvm.

brew install yarn --without-node

I've found it's a far more pleasant experience working this way, being able to easily change versions as needed!

Collapse
equiman profile image
Camilo Martinez Author

Now I moved to NVM :D

Collapse
equiman profile image
Camilo Martinez Author

Excellent, I have no idea about nvm. I'n my case I'm only need LTS version but it's cool to other know that. Thanks!

Collapse
jenc profile image
jen chan

Hello Camilo, what a coincidence that I read some of this article yesterday! I just got a new Macbook and looked through around 10 articles to make sure I set up my $PATH and nvm correctly. I'm confused why tutorials advise having .ssh and .bashrc under $HOME whilst stuff that's installed through brew actually goes into MacintoshHD/usr/local/....?

Collapse
equiman profile image
Camilo Martinez Author

Really, I have no idea. I never seen something about it before.

Do you have some of this links? I can take a look and try to understand.

Collapse
jeblackburn profile image
Jon Blackburn

You might consider giving this repo a look:

github.com/Pivotal/workstation-setup

With a couple of tweaks (you can fork the repo to your own GitHub and make them there) you can cover most everything a modern developer might encounter.

Disclaimer: I work at Pivotal and use this setup project to pave our workstations on a regular basis between client engagements.

Collapse
equiman profile image
Camilo Martinez Author

Looks nice. I'm thinking do it similar with a console in .Net Core

Collapse
bxe5056 profile image
Benjamin Eppinger

Fyi: apparently Spectacle isn't actively being developed anymore.
They've recommended users switch to Rectangle instead.
(Haven't tried it personally though)

brew cask install rectangle

Collapse
equiman profile image
Camilo Martinez Author

Today I moved to rectangleapp and it's awesome: have keyboard shortcuts (like spectacle) but also magnetic windows like winOS.

Post updated with Rectangle information.

Thanks for the advice @bxe5056 !

Collapse
equiman profile image
Camilo Martinez Author

Thanks! I'll take a look next week.

github.com/rxhanson/Rectangle

Collapse
5422m4n profile image
Sven Assmann

Very Nice overview. But let's not forget dart cli and eco system:

 brew tap dart-lang/dart
 brew install dart

dart.dev/get-dart

Collapse
moopet profile image
Ben Sinclair

I don't think you really need to do all this. Macs aren't far off being usable machines in the first place.
I'd do homebrew and a better terminal and (if my development stack was that way) install docker and/or vagrant. The rest of it's all very specific to a particular development stack.

On a more serious note, I would not do this:

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

simply because there's no reason to and you're messing things up for anyone else who wants to use the same system. I know, I know, Macs are usually one-person machines, but they run unix and are theoretically multi-user. Why try to break it?

Collapse
equiman profile image
Camilo Martinez Author

Yes this kind of thing are very opinionated. I work with non particular Stack: c#, .Net Core, Web and Mobile. Hope can be used as guide. You give me a good idea, organizing it as stacks.

About /usr/local/bin you are completely right I'll add a Warning about. Just use in case you machine is used by only one user.

Thanks!

Collapse
ciromattia profile image
Ciro Mattia Gonano

This leaves out all the web developers, luckily there's this walkthrough --> medium.com/the-way-of-the-dev/http...

DISCLAIMER: the walkthrough is written by me -_^

Collapse
codemotion profile image
Dmitriy Belyaev

Great! Almost everything looks familiar, but have learned something new.

Found typo: Filezilla gist repeats below Keka (File Compression).

Collapse
equiman profile image
Collapse
equiman profile image
Camilo Martinez Author

I never heard about meta key. I'll search about it.

Collapse
tusharborole profile image
Tushar Borole

Using docker for development will be good instead of installing all this stuff

Collapse
equiman profile image
Camilo Martinez Author

Yeeess, that say me a partner. Maybe you know a link that to the same with Docker? I want to learn.

equiman profile image
Camilo Martinez Author

Those quick access sound nice... great tip.
Sometimes fix something in terminal is slowly, moving only with arrow keys.

Thanks!