Setup macOS for Development
Tags: productivity, tutorial, beginners, devtips
Published: 2018-09-26 19:32:34

---
title: Setup macOS for Development
published: true
description: Setup your macOS machine for Web/Mobile development.
tags: productivity, tutorial, beginners, devtips
cover_image: https://thepracticaldev.s3.amazonaws.com/i/eo0767jpqq5z2xgl21yl.png
series: macos-helpful-tips
---

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:

{% link https://dev.to/equiman/iterm2--oh-my-zsh--powerlevel9k-best-terminal-combination-for-geeks-58l5 %}

#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.

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

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

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

Run this commands on terminal:

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

Restart your terminal, then update and upgrade brew sources:

```bash
brew tap homebrew/cask-fonts
brew update --force --quiet
brew upgrade
brew cleanup
```
<figcaption>https://brew.sh — usage: https://docs.brew.sh/FAQ</figcaption>


Run this command, and follow doctor recommendations:

```bash
brew doctor
```

## SDK Man

```bash
curl -s "https://get.sdkman.io" | bash
source "$HOME/.sdkman/bin/sdkman-init.sh"
```
<figcaption>http://sdkman.io — usage: https://sdkman.io/usage</figcaption>

## Permissions

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

```bash
sudo chown -R $(whoami) /usr/local/opt
sudo chown -R $(whoami) /usr/local/share
```

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

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

---

# General Purpose

## Visual Studio Code

```bash
brew install --cask visual-studio-code
```
<figcaption>https://code.visualstudio.com</figcaption>

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.

{% link https://dev.to/equiman/my-essential-visual-studio-code-extensions-and-configurations-5197 %}

## Git

```bash
brew install git
brew unlink git && brew link git
brew install git-lfs
git lfs install
```
<figcaption>https://git-scm.com</figcaption>

### Git Config

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

```bash
git config --global core.editor 'code --wait'
```

Use this command to edit global configuration:

```bash
git config --edit --global
```

### 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
```

### Use main branch

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

```bash
git config --global init.defaultBranch main
```

## Source Tree

```bash
brew install --cask sourcetree
```
<figcaption>https://www.sourcetreeapp.com</figcaption>

---

# Web Development

## Node.js

I prefer to install Node through [Volta](https://volta.sh/).

```bash
brew install volta
```

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

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

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

```bash
volta install node@lts
```
<figcaption>https://nodejs.org</figcaption>

To list all installed versions use:

```bash
volta list all
```

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

## Yarn (npm alternative)

```bash
volta install yarn
```
<figcaption>https://yarnpkg.com</figcaption>

## Packages

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

| Name | [Yarn](https://yarnpkg.com/) | [npm](https://www.npmjs.com/) |
| ---- | --- | --- |
| [Angular](https://angular.io/) | `yarn global add @angular/cli` | `npm i -g @angular/cli` |
| [Cordova](https://cordova.apache.org/) | `yarn global add cordova` | `npm i -g cordova` |
| [Gulp](https://gulpjs.com/) | `yarn global add gulp` | `npm i -g gulp` |
| [ESLint](https://eslint.org/) | `yarn global add eslint` | `npm i -g eslint` |
| [Typescript](https://www.typescriptlang.org/) | `yarn global add typescript` | `npm i -g typescript` |

## CLI Tools

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

| Name | [Yarn](https://yarnpkg.com/) | [npm](https://www.npmjs.com/) |
| --- | --- | --- |
| [fkill-cli](https://github.com/sindresorhus/fkill-cli) | `yarn global add fkill-cli` | `npm i -g fkill-cli` |
| [npkill](https://npkill.js.org/) | `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:

```bash
"eslint.packageManager": "yarn",
```
<figcaption>Open Visual Studio Code settings with ⌘ + ,</figcaption>

## 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.

```bash
brew install --cask angular-console
```

## Browsers

```bash
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
```

Take this FREE course: [DevTools Pro: The Basics of Chrome Developer Tools](https://www.udemy.com/devtools-2017-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.

```bash
sdk install gradle 3.3
sdk install gradle 4.4.1
sdk use gradle 4.4.1
sdk default gradle 4.4.1
```
<figcaption>https://gradle.org</figcaption>

## Java

```bash
sdk list java
```

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

```bash
sdk install java 8.0.272.hs-adpt
sdk use java 8.0.272.hs-adpt
sdk default java 8.0.272.hs-adpt
```
<figcaption>https://java.com</figcaption>

## Android SDK

```bash
brew install --cask android-sdk
```
<figcaption>https://developer.android.com/studio/#downloads</figcaption>

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` |

<figcaption>https://developer.android.com/studio/command-line/sdkmanager</figcaption>

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

```bash
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"
```
<figcaption>https://developer.android.com/studio/command-line/variables</figcaption>

## Android Bundle Tool

```bash
brew install bundletool
```

## Android Studio

```bash
brew install --cask android-studio
brew install --cask intel-haxm
```
<figcaption>https://developer.android.com/studio/</figcaption>

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

```bash
brew install jadx
```
<figcaption>https://github.com/skylot/jadx</figcaption>

## Scrcpy (Mobile Screen Sharing)

```bash
brew install scrcpy
```
<figcaption>https://github.com/Genymobile/scrcpy</figcaption>

{%link https://dev.to/equiman/share-your-android-screen-and-audio-on-macos-1p64 %}

## Xcode

Just install it from Apple Store: [Xcode](https://itunes.apple.com/co/app/xcode/id497799835?mt=12) and Xcode Command Line Tools

```bash
xcode-select --install
```

{% link https://dev.to/equiman/enable-dark-mode-in-some-macos-apps-4c1f %}

---

# Cloud and Remote

## Docker

```bash
brew install --cask docker
```
<figcaption>http://www.docker.com</figcaption>

## FileZilla (FTP Client)

```bash
brew install --cask filezilla
```
<figcaption>https://filezilla-project.org</figcaption>

## Cryptomator

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

```bash
brew install --cask cryptomator
```
<figcaption>http://cryptomator.org</figcaption>

---

# Database 

## MySQL + Workbench

```bash
brew install mysql
brew install --cask mysqlworkbench
```
<figcaption>https://www.mysql.com</figcaption>

To launch MySQL now and restart at login:

```bash
brew services start mysql
```

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

```bash
mysql.server start
mysql.server stop
```

## PostgreSQL and pgAdmin

```bash
brew install postgresql
brew install --cask pgadmin4
```

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

```bash
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"
```

Initialize and start server

```bash
initdb /usr/local/var/postgres -E utf8
createuser -s postgres
brew services start postgresql
```

---

# Microsoft

## .Net Core SDK

```bash
brew install --cask dotnet-sdk
```
<figcaption>https://www.microsoft.com/net/download</figcaption>

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

```bash
export DOTNET_HOME="/usr/local/share/dotnet/dotnet"
export PATH="$DOTNET_HOME/bin:$PATH"
```

---

# Graphic Design

## Gimp (Image Editor)

```bash
brew install --cask gimp
```
<figcaption>http://www.gimp.org</figcaption>

## Slurp (Color Picker)

Just install [Slurp](https://apps.apple.com/us/app/colorslurp/id1287239339?mt=12) from Apple Store and remove all his shortcuts because interferes with VSCode ones.

![slurp](https://dev-to-uploads.s3.amazonaws.com/i/pnlumicio6y8sqmxirlo.png)

---

# Utilities

## Mail

Don't use the default mail app, it's primitive and not usable at all. Just install [Spark Mail](https://itunes.apple.com/app/spark-love-your-email-again/id1176895641) from Apple Store.

## Communicators

```bash
brew install --cask slack
brew install --cask discord
brew install --cask microsoft-teams
brew install --cask webex-teams
```

## Notion

```bash
brew install --cask notion
```
<figcaption>https://notion.so</figcaption>

## Keka (File Compression)

```bash
brew install --cask keka
```
<figcaption>http://www.kekaosx.com</figcaption>

Follow these instructions: [set as default compress application](https://github.com/aonez/Keka/wiki/Default-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>`.

```bash
brew install --cask appcleaner
```
<figcaption>https://freemacsoft.net/appcleaner</figcaption>

## Karabiner (Keyboard Customizer)

```bash
brew install --cask karabiner-elements
```
<figcaption>https://pqrs.org/osx/karabiner/</figcaption>

{% link https://dev.to/equiman/whats-the-better-way-to-use-pc-keyboard-on-macos-3k3 %}

## Muzzle

Silence embarrassing notifications while screencasting.

```bash
brew install --cask muzzle
```
<figcaption>https://muzzleapp.com/</figcaption>

## Dozer

Hide menu bar icons on your Mac.

```bash
brew install --cask dozer
```
<figcaption>https://github.com/Mortennn/Dozer</figcaption>

## The Clock

```bash
brew install --cask the-clock
```
<figcaption>https://seense.com/the_clock/</figcaption>

## EUL

Status monitoring with Big Sur widgets

```bash
brew install --cask eul
```
<figcaption>https://github.com/gao-sun/eul</figcaption>

---

# 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 🤘.

```bash
brew install --cask ytmdesktop-youtube-music
```
<figcaption>https://ytmdesktop.app/</figcaption>

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

![YTM Shortcuts](https://dev-to-uploads.s3.amazonaws.com/i/m42s2vjcna8g2szdylo9.png)

## Spotify

```bash
brew install --cask spotify
```
<figcaption>https://www.spotify.com/</figcaption>

## Rectangle (Windows Management)

```bash
brew install --cask rectangle
```
<figcaption>https://rectangleapp.com/</figcaption>

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

```bash
defaults write com.knollsoft.Rectangle alternateDefaultShortcuts -bool true
```

![Rectangle Alternative Shortcut](https://user-images.githubusercontent.com/13651296/71896594-7cdb9280-3154-11ea-83a7-70b71c6df9d4.png)

## 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.

```bash
brew install --cask keepingyouawake
```
<figcaption>https://github.com/newmarcel/KeepingYouAwake/</figcaption>

## Aware (Track Time)

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

```bash
brew install --cask aware
```
<figcaption>http://awaremac.com</figcaption>

## 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.

```bash
brew install --cask cheatsheet
```
<figcaption>http://www.mediaatelier.com/CheatSheet/</figcaption>

---

# 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:

```bash
defaults write com.apple.screencapture disable-shadow -bool TRUE
killall SystemUIServer
```
<figcaption>http://apple.stackexchange.com/a/50862/230672</figcaption>

And change the default location
```bash
defaults write com.apple.screencapture location ~/Pictures/Screenshots
```

## Drag & Drop

Learn these useful tips:

{% youtube 0dTZcKPyJzY %}

___

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)