DEV Community

Cover image for Setup macOS for Development
Camilo Martinez
Camilo Martinez

Posted on • Updated on

Setup macOS for Development

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 is cask all the application with Graphical Interface.



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


Enter fullscreen mode Exit fullscreen mode

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



#Brew
eval "$(/opt/homebrew/bin/brew shellenv)"


Enter fullscreen mode Exit fullscreen mode

Run this commands on terminal:



eval "$(/opt/homebrew/bin/brew shellenv)"
source ~/.zshrc
source ~/.bash_profile


Enter fullscreen mode Exit fullscreen mode

Restart your terminal, then update and upgrade brew sources:



brew tap homebrew/cask-fonts
brew update --force --quiet
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 install --cask 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
brew unlink git && brew link 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 install --cask sourcetree


Enter fullscreen mode Exit fullscreen mode
https://www.sourcetreeapp.com

Web Development

Node.js

I prefer to install Node through Volta.



brew install volta


Enter fullscreen mode Exit fullscreen mode

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



export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"


Enter fullscreen mode Exit fullscreen mode

To install a version use:

Version Description
@atest Latest version
@lts Long Term Support
@# Suitable version
@#.#.# Specific version

I'll prefer works with LTS version



volta install node@lts


Enter fullscreen mode Exit fullscreen mode
https://nodejs.org

To list all installed versions use:



volta list all


Enter fullscreen mode Exit fullscreen mode

ℹ️ to switch between versions use the same command to install.

Yarn (npm alternative)



volta install yarn


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 install --cask angular-console


Enter fullscreen mode Exit fullscreen mode

Browsers



brew install --cask google-chrome
brew install --cask firefox
brew install --cask homebrew/cask-versions/firefox-developer-edition
brew install --cask opera
brew install --cask opera-developer
brew install --cask microsoft-edge
brew install --cask 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 install --cask 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 install --cask android-studio
brew install --cask 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 install --cask docker


Enter fullscreen mode Exit fullscreen mode
http://www.docker.com

FileZilla (FTP Client)



brew install --cask 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 install --cask cryptomator


Enter fullscreen mode Exit fullscreen mode
http://cryptomator.org

Database

MySQL + Workbench



brew install mysql
brew install --cask 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 install --cask 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 install --cask 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 install --cask 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 install --cask slack
brew install --cask discord
brew install --cask microsoft-teams
brew install --cask webex-teams


Enter fullscreen mode Exit fullscreen mode

Notion



brew install --cask notion


Enter fullscreen mode Exit fullscreen mode
https://notion.so

Keka (File Compression)



brew install --cask 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 remove --cask <software_name>.



brew install --cask appcleaner


Enter fullscreen mode Exit fullscreen mode
https://freemacsoft.net/appcleaner

Karabiner (Keyboard Customizer)



brew install --cask karabiner-elements


Enter fullscreen mode Exit fullscreen mode
https://pqrs.org/osx/karabiner/

Muzzle

Silence embarrassing notifications while screencasting.



brew install --cask muzzle


Enter fullscreen mode Exit fullscreen mode
https://muzzleapp.com/

Dozer

Hide menu bar icons on your Mac.



brew install --cask dozer


Enter fullscreen mode Exit fullscreen mode
https://github.com/Mortennn/Dozer

The Clock



brew install --cask the-clock


Enter fullscreen mode Exit fullscreen mode
https://seense.com/the_clock/

EUL

Status monitoring with Big Sur widgets



brew install --cask 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 install --cask 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 install --cask spotify


Enter fullscreen mode Exit fullscreen mode
https://www.spotify.com/

Rectangle (Windows Management)



brew install --cask 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 install --cask 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 install --cask 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 install --cask 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 🖖

beer

Top comments (20)

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
Enter fullscreen mode Exit fullscreen mode

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 • Edited

Now I moved to NVM :D

Collapse
 
equiman profile image
Camilo Martinez

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

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

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

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
 
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 • Edited

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

Thanks! I'll take a look next week.

github.com/rxhanson/Rectangle

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

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
 
5422m4n profile image
Sven Kanoldt

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
 
dbelyaeff 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
Camilo Martinez

Thanks! Fixed.

Collapse
 
equiman profile image
Camilo Martinez • Edited

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

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

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

Thanks!