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[@]}"; 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'
# Chromealias kill_chrome="ps ux | grep '[C]hrome Helper --type=renderer' | grep -v extension-process | tr -s ' ' | cut -d ' ' -f2 | xargs kill"
# 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 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