tePersonal macOS Workspace Setup
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.
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[@]}"; do
brew 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[@]}"; do
brew 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[@]}"; do
mas 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 extensions
source /usr/local/share/zsh-autosuggestions/zsh-autosuggestions.zsh
source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh# Activate plugins
plugins=(git zsh-completions)# Custom vars
SPARK=$HOME/.spark-installer
COMPOSER=$HOME/.composer/vendor/bin
LOCAL_NODE_BIN=node_modules/.bin# Custom paths
PATH=/usr/local/sbin:$PATH
PATH=$SPARK:$PATH
PATH=$COMPOSER:$PATH
PATH=$LOCAL_NODE_BIN:$PATH# Set default editor
export EDITOR='subl -w'# Load my aliases
if [ -f ~/.aliases ]; then
. ~/.aliases
fi# Load my functions
if [ -f ~/.functions ]; then
. ~/.functions
filocal 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:
# Helpful
alias 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 editing
alias 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'# System
alias 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"# IP
alias ip='dig +short myip.opendns.com @resolver1.opendns.com'# NPM
alias nom='rm -rf node_modules/ && npm cache verify && npm install'# Github
alias wip="git add .;git commit -m 'wip'"
alias nah='git reset --hard;git clean -df'# Composer
alias dump='composer dump-autoload -o'# Chrome
alias kill_chrome="ps ux | grep '[C]hrome Helper --type=renderer' | grep -v extension-process | tr -s ' ' | cut -d ' ' -f2 | xargs kill"# Dummy
alias 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 it
function mkd () {
mkdir -p "$@" && cd "$_";
}
# Copy website and its contents
function copy_website () {
wget -e robots=off -p -k "$1"
}
# Extract most know archives with one command
extract () {
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 directory
function 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/null
sudo 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} /usr/local/etc/httpd/extra/httpd-vhosts.conf
Replace the file contents with the following:
Define USER dvlden
Define PATH "/Users/${USER}/Sites"
<VirtualHost *:80>
ServerName localhost
DocumentRoot ${PATH}
</VirtualHost>
<VirtualHost *:80>
ServerAlias *.test
UseCanonicalName Off
VirtualDocumentRoot "${PATH}/%1"
</VirtualHost>
<VirtualHost *:80>
ServerAlias *.public
UseCanonicalName Off
VirtualDocumentRoot "${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" <<EOF
address=/.test/127.0.0.1
address=/.public/127.0.0.1
EOF
Start a daemon
sudo brew services start dnsmasq
Add resolvers
sudo mkdir -p /etc/resolver
sudo 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 Composer
Since 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 key
ssh-keygen -t rsa -C "*.******@gmail.com"
# Copy key
cat ~/.ssh/id_rsa.pub | pbcopy
# Add to Github
[Github SSH keys](https://github.com/settings/ssh)
# Test connection
ssh -T git@github.com
# > 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.
Until next time
If you enjoyed this and learned something new, please share some love.
To do so, tap the clap icon 👏 or hold it for more claps! 👏👏👏
Much appreciated. You’re the best!
If you are considering to follow me:
Instagram, Twitter, Medium, GitHub