12,477 reads

Personal macOS Workspace Setup

by Nenad NovakovićJune 20th, 2018

Too Long; Didn't Read

This is my personal macOS workspace setup for web development. If you’d like to install latest technologies and stay up to date, follow my guide and you will enjoy using your macOS computer more than ever.

People Mentioned

Companies Mentioned

featured image - Personal macOS Workspace Setup

This post will remain updated, as this guide is based on personal preference.

Tested and working on macOS High Sierra, version 10.13.5.

Introduction

I will assume that you have a clean macOS installation. Together, we will go through every step and installation process. There won’t be mistakes! If you’re not interested in learning, feel free to copy and paste the commands, as you go through this article.

Installations

The order is very important, so follow along every step, unless you know what you’re doing.

Xcode

Xcode is an integrated development environment for macOS containing a suite of software development tools developed by Apple for developing software for macOS, iOS, watchOS, and tvOS. Source: Wikipedia

We must begin with Xcode, but we do not need complete application.Instead, we will install command line tools only.

Installation

xcode-select --install

Ta-da

We’re done with it. There’s nothing further for this one. Move on to the next…

Homebrew

Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s macOS operating system.Source: Wikipedia

Installation

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Repositories

declare -a taps=('buo/cask-upgrade''caskroom/cask''caskroom/versions''homebrew/bundle''homebrew/core')

for tap in "${taps[@]}"; dobrew tap "$tap"done

Upgrade and update

brew upgrade && brew update

Ta-da

We’re done with it, but I will add a curated list of commands below. They are highly useful and you might need to memorize some of them for daily use.

HINT — to learn more about each command and its use, enter brew help [COMMAND] command, and it will display all details about specific command and each flag it has… If you’d like to learn more, see complete list of commands.

Homebrew Cask

Extends Homebrew and brings its elegance, simplicity, and speed to the installation and management of GUI macOS applications.Source: GitHub Repository

Installation

brew install cask

**List of applications and installation**I strongly suggest you to make your own personal list. Here’s mine…

declare -a cask_apps=(‘1password’‘adobe-creative-cloud’‘alfred’‘authy’‘bartender’‘droplr’‘expressvpn’‘flume’‘gitkraken’‘google-backup-and-sync’‘google-chrome’‘iterm2-nightly’‘keepingyouawake’‘postman’‘screenflow’‘sip’‘skype’‘slack’‘sublime-text’‘sequel-pro’‘transmit’)

for app in "${cask_apps[@]}"; dobrew cask install "$app"done

Ta-da

We’re done with it, but I will add a curated list of commands below. They are highly useful and you might need to memorize some of them for daily use.

Mas CLI

A simple command line interface for the Mac App Store. Designed for scripting and automation. Source: GitHub Repository

Installation

brew install mas

**List of applications and installation**I strongly suggest you to make your own personal list. Here’s mine…

declare -a mas_apps=('824183456' # Affinity Photo'824171161' # Affinity Designer'918858936' # Airmail 3'1091189122' # Bear'736584830' # Folx GO'775737590' # iA Writer'441258766' # Magnet'1063631769' # Medis'967805235' # Paste'583827028' # WinZip)

for app in "${mas_apps[@]}"; domas install "$app"done

Ta-da

We’re done with it, but I will add a curated list of commands below. They are highly useful and you might need to memorize some of them for daily use.

Z Shell

A Unix shell that can be used as an interactive login shell and as a powerful command interpreter for shell scripting. Source: Wikipedia

**Installation**We will install a couple of extensions along with a shell.

brew install zsh zsh-completions zsh-autosuggestions zsh-syntax-highlighting

Since we’re still at installing stage, it might be a good idea to install Oh My Zsh as well!

It comes bundled with a ton of helpful functions, helpers, plugins, themes, and a few things that make you shout…

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

**Configuration**Instead of editing the .zshrc file, we will make our own and then point it as a source to the main configuration file.

Create a file and open it in the Editor:

touch ~/.my-zshrc && bash -c 'exec env ${EDITOR:=nano} ~/.my-zshrc'

Copy/Paste the following content:

# Load extensionssource /usr/local/share/zsh-autosuggestions/zsh-autosuggestions.zshsource /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

# Activate pluginsplugins=(git zsh-completions)

# Custom varsSPARK=$HOME/.spark-installerCOMPOSER=$HOME/.composer/vendor/binLOCAL_NODE_BIN=node_modules/.bin

# Custom pathsPATH=/usr/local/sbin:$PATHPATH=$SPARK:$PATHPATH=$COMPOSER:$PATHPATH=$LOCAL_NODE_BIN:$PATH

# Set default editorexport EDITOR='subl -w'

# Load my aliasesif [ -f ~/.aliases ]; then. ~/.aliasesfi

# Load my functionsif [ -f ~/.functions ]; then. ~/.functionsfi

local ret_status="%(?:%{$fg_bold[green]%}△ :%{$fg_bold[red]%}▽ )"PROMPT='${ret_status} %{$fg[cyan]%}%c%{$reset_color%} $(git_prompt_info)'

Append the source of our custom configuration file into the main Z Shell configuration file:

echo ". ~/.my-zshrc" >> "$HOME/.zshrc"

**Aliases**This is completely optional. I use a bunch of aliases personally and I find them highly useful.

Create a file and open it in the Editor:

touch ~/.aliases && bash -c 'exec env ${EDITOR:=nano} ~/.aliases'

Copy/Paste the following content:

# Helpfulalias s='cd ~/Sites'alias art='php artisan'alias path='echo -e ${PATH//:/\\n}'alias copy_ssh="pbcopy < $HOME/.ssh/id_rsa.pub"alias reload="exec ${SHELL} -l"alias afk="/System/Library/CoreServices/Menu\ Extras/User.menu/Contents/Resources/CGSession -suspend"alias flush_dns="sudo killall -HUP mDNSResponder"alias chdirs="find . -type d -exec chmod 755 {} \;"alias chfiles="find . -type f -exec chmod 644 {} \;"

# Common files for editingalias edit_hosts='subl /etc/hosts'alias edit_httpd='subl /usr/local/etc/httpd/httpd.conf'alias edit_vhosts='subl /usr/local/etc/httpd/extra/httpd-vhosts.conf'alias edit_php='subl /usr/local/etc/php/7.2/php.ini'

# Systemalias update='mas upgrade; brew cleanup; brew upgrade; brew update; brew cask cleanup; brew cu -a -y; composer global update; npm update -g; npm install npm@latest -g'alias show_files='defaults write com.apple.finder AppleShowAllFiles -bool true && killall Finder'alias hide_files='defaults write com.apple.finder AppleShowAllFiles -bool false && killall Finder'alias show_desktop="defaults write com.apple.finder CreateDesktop -bool true && killall Finder"alias hide_desktop="defaults write com.apple.finder CreateDesktop -bool false && killall Finder"alias enable_gate="sudo spctl --master-enable"alias disable_gate="sudo spctl --master-disable"

# IPalias ip='dig +short myip.opendns.com @resolver1.opendns.com'

# NPMalias nom='rm -rf node_modules/ && npm cache verify && npm install'

# Githubalias wip="git add .;git commit -m 'wip'"alias nah='git reset --hard;git clean -df'

# Composeralias dump='composer dump-autoload -o'

# Dummyalias shrug="printf '¯\_(ツ)_/¯' | pbcopy"alias flipt="printf '(╯°□°)╯︵ ┻━┻' | pbcopy"alias fight="printf '(ง'̀-'́)ง' | pbcopy"

**Functions**I do not use these as often, but they come handy from time to time.

Create a file and open it in the Editor:

touch ~/.functions && bash -c 'exec env ${EDITOR:=nano} ~/.functions'

Copy/Paste the following content:

# Make directory and enter itfunction mkd () {  mkdir -p "$@" && cd "$_";}# Copy website and its contentsfunction copy_website () {  wget -e robots=off -p -k "$1"}# Extract most know archives with one commandextract () {  if [ -f $1 ] ; then    case $1 in      *.tar.bz2)   tar xjf $1     ;;      *.tar.gz)    tar xzf $1     ;;      *.bz2)       bunzip2 $1     ;;      *.rar)       unrar e $1     ;;      *.gz)        gunzip $1      ;;      *.tar)       tar xf $1      ;;      *.tbz2)      tar xjf $1     ;;      *.tgz)       tar xzf $1     ;;      *.zip)       unzip $1       ;;      *.Z)         uncompress $1  ;;      *.7z)        7z x $1        ;;      *)     echo "'$1' cannot be extracted via extract()" ;;    esac  else    echo "'$1' is not a valid file"  fi}# Determine size of a file or total size of a directoryfunction fs () {  if du -b /dev/null > /dev/null 2>&1; then    local arg=-sbh  else    local arg=-sh  fi  if [[ -n "$@" ]]; then    du $arg -- "$@"  else    du $arg .[^.]* *  fi}

Ta-da

We’re done with it. There’s nothing further for this one. Move on to the next…

Sublime Text

A proprietary cross-platform source code editor with a Python application programming interface. Source: Wikipedia

**Package Control**Here’s the Installation Code, but I think it is no longer required. Instead, open Sublime Text, press cmd + shift + p and type “Install”. It should show “Install Package Control”.

**Packages**I have my curated list of packages, but of course I do not want to install them manually each time I reinstall my macOS.

To automatically install a list of packages, follow this path:

Preferences > Package Settings > Package Control > Settings — User

User Settings will open up… Replace the existing content with the following:

{"bootstrapped": true,"in_process_packages": [],"installed_packages":["A File Icon","AdvancedNewFile","ApacheConf","AutoFileName","Babel","BracketHighlighter","ColorPicker","DA UI","DocBlockr","EditorConfig","Emmet","GitGutter","HyperClick","JavaScript Completions","Laravel Blade Highlighter","MarkdownPreview","Package Control","Sass","SFTP","SnippetMaker","SublimeLinter","SublimeLinter-stylelint","Terminal","Vue Syntax Highlight"]}

Restart the application and give it some time to install specified packages.

**Configuration**To setup preferences, first install a desired font. My personal preference is one of the following: Operator Mono or Fira Code.

After that, open Preferences **>** Settings or with a shortcut cmd + , and replace the contents in the right pane with the following. Make sure to replace font_face with the one that you installed on the system.

{"bold_folder_labels": true,"color_scheme": "Packages/Color Scheme - Default/Mariana.sublime-color-scheme","copy_with_empty_selection": false,"create_window_at_startup": false,"detect_indentation": false,"drag_text": false,"enable_tab_scrolling": false,"ensure_newline_at_eof_on_save": true,"find_selected_text": true,"folder_exclude_patterns":[".svn",".git",".hg","CVS","vendor","node_modules"],"font_face": "Operator Mono","font_size": 16,"highlight_line": true,"highlight_modified_tabs": true,"ignored_packages":["Vintage"],"indent_to_bracket": true,"line_padding_bottom": 6,"line_padding_top": 6,"margin": 8,"match_brackets_content": false,"match_selection": false,"match_tags": false,"open_files_in_new_window": false,"preview_on_click": false,"shift_tab_unindent": true,"show_full_path": false,"theme": "DA.sublime-theme","translate_tabs_to_spaces": true,"trim_trailing_white_space_on_save": true}

Ta-da

We’re done with it. There’s nothing further for this one. Move on to the next…

Apache

A free and open-source cross-platform web server, released under the terms of Apache License 2.0. Source: Wikipedia

Apache is already bundled in macOS. However, it is not the latest version and it’s always the best to keep all our workspace dependencies within Homebrew.

Across the configuration, you will need to replace all dvlden occurrences with your system username. Type whoami in the terminal to see your username, if you don’t know it already.

Stop and unload system-bundled version

sudo apachectl stop >/dev/nullsudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null

Installation

brew install httpd

Configuration

Open configuration file in the Editor:

bash -c 'exec env ${EDITOR:=nano} /usr/local/etc/httpd/httpd.conf'

Here’s the table of contents. I hope I made it clear enough…

Configuration of dynamic virtual hosts

Open configuration file in the Editor:

bash -c 'exec env ${EDITOR:=nano}

Replace the file contents with the following:

Define USER dvldenDefine PATH "/Users/${USER}/Sites"

<VirtualHost *:80>ServerName localhostDocumentRoot ${PATH}</VirtualHost>

<VirtualHost *:80>ServerAlias *.testUseCanonicalName OffVirtualDocumentRoot "${PATH}/%1"</VirtualHost>

<VirtualHost *:80>ServerAlias *.publicUseCanonicalName OffVirtualDocumentRoot "${PATH}/%1/public"</VirtualHost>

When we setup our DNSMasq below, we will be able to have automatic dynamic virtual hosts.

Every folder that we make in our ~/Sites directory, should be lowercase with hyphens, for readability. Think of the folder names as domain names, without TLD. Each folder will be automatically accessible. Use .test for static websites and use .public for dynamic sites. If you’re using an PHP Framework like Laravel, this will be very handy. It’s like Laravel Valet!

Restart

sudo apachectl -e info -k restart

Start a daemon

sudo brew services start httpd

Ta-da

We’re done with it, but I will add a curated list of commands below. They are highly useful and you might need to memorize some of them for daily use.

DNS Masq

It provides Domain Name System forwarder, Dynamic Host Configuration Protocol server, router advertisement and network boot features for small computer networks, created as free software. Source: Wikipedia

We’re going to use this along with our dynamic virtual hosts configuration. This package will then redirect our specified TLD’s to a localhost.

Installation

brew install dnsmasq

Configuration

cat > "$(brew --prefix)/etc/dnsmasq.conf" <<EOFaddress=/.test/127.0.0.1address=/.public/127.0.0.1EOF

Start a daemon

sudo brew services start dnsmasq

Add resolvers

sudo mkdir -p /etc/resolversudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/test'sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/public'

Restart a daemon

sudo brew services restart dnsmasq

Test it

dig demo.test @127.0.0.1

You should be able to find the following section in your output.

;; ANSWER SECTION:demo.test. 0 IN A 127.0.0.1

PHP

A server-side scripting language designed for Web development, but also used as a general-purpose programming language. Source: Wikipedia

PHP is already bundled in macOS. However, it is not the latest version and it’s always the best to keep all our workspace dependencies within Homebrew.

Installation

brew install php

Installation of ComposerSince we’re using PHP, we are definitely going to need Composer.

brew install composer

Configuration

Open configuration file in the Editor:

bash -c 'exec env ${EDITOR:=nano} /usr/local/etc/php/7.2/php.ini'

Here’s the table of contents. I hope I made it clear enough…

Feel free to tweak the post and upload size for your needs…You can find the timezones here: List of Supported Timezones

Ta-da

We’re done with it. There’s nothing further for this one. Move on to the next…

MySQL

An open-source relational database management system. Its name is a combination of “My”, the name of co-founder Michael Widenius’s daughter, and “SQL”, the abbreviation for Structured Query Language.Source: Wikipedia

Installation

brew install mysql

Start a daemon

brew services start mysql

Configuration (optional)

By default MySQL is installed with a user root and no password. If you want to configure that, go ahead.

mysql_secure_installation

Node JS

An open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side. Source: Wikipedia

Installation

brew install node

NPM

A package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. Source: Wikipedia

Node JS is bundled with NPM, so it will install it along with it… There’s nothing for us to do here, except to optionally install some global packages.

**Global Packages Installation**If you are using Vue JS and perhaps want to use one epic package to keep your project dependencies up to date, check NPM Check Updates.

npm install -g npm-check @vue/cli

Ta-da

We’re done with it, but I will add a curated list of commands below. They are highly useful and you might need to memorize some of them for daily use.

To learn more about each command and its use, enter npm help [COMMAND] command, and it will display all details about specific command and each flag it has... If you'd like to learn more, see complete list of commands.

Git

A version control system for tracking changes in computer files and coordinating work on those files among multiple people. Source: Wikipedia

Installation

brew install git

Configuration

Make sure to replace name and email with your personal details.

git config --global user.name "Nenad Novaković"git config --global user.email "*.******@gmail.com"git config --global core.editor "subl -n -w"git config --global color.ui true

I’m using https as authentication, so I’ll add the following extra line to a configuration.

git config --global credential.helper osxkeychain

If you are using ssh authentication, you can set it up this way:

# Generate keyssh-keygen -t rsa -C "*.******@gmail.com"

# Copy keycat ~/.ssh/id_rsa.pub | pbcopy

# Add to Github[Github SSH keys](https://github.com/settings/ssh)

# Test connectionssh -T [email protected]

# > Hi dvlden! You've successfully authenticated, but GitHub does not provide shell access.

Ta-da

We’re done with it, but I will add a curated list of commands below. They are highly useful and you might need to memorize some of them for daily use.

To learn more about each command and its use, enter _git help [COMMAND]_ command, and it will display all details about specific command and each flag it has... If you'd like to learn more, see complete list of commands.

Final Notes

This might be a good place for me to throw in my “.dot files”. If you’re interested in writing your own Shell to automate all of this process that I written and more, feel free to check this GitHub Repository.

Try it out if you want (on clean macOS installation), but I strongly suggest you to take a look at all of the files first and then maybe write your own.