Personal 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[@]}"; 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. — to learn more about each command and its use, enter command, and it will display all details about specific command and each flag it has… If you’d like to learn more, see . HINT brew help [COMMAND] 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 as well! Oh My Zsh 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 file, we will make our own and then point it as a source to the main configuration file. .zshrc 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 .opendns.com' @resolver1 # 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 , but I think it is no longer required. Instead, open Sublime Text, press and type “Install”. It should show “Install Package Control”. Installation Code cmd + shift + p **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: or . Operator Mono Fira Code After that, open or with a shortcut and replace the contents in the with the following. Make sure to replace with the one that you installed on the system. Preferences **>** Settings cmd + , right pane font_face {"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 occurrences with your system username. Type in the terminal to see your username, if you don’t know it already. dvlden whoami 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" ServerName localhostDocumentRoot ${PATH} ServerAlias *.testUseCanonicalName OffVirtualDocumentRoot "${PATH}/%1" ServerAlias *.publicUseCanonicalName OffVirtualDocumentRoot "${PATH}/%1/public" When we setup our below, we will be able to have automatic dynamic virtual hosts. DNSMasq Every folder that we make in our 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 for static websites and use for dynamic sites. If you’re using an PHP Framework like , this will be very handy. It’s like ! ~/Sites .test .public Laravel 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" /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 , but also used as a general-purpose language. Source: development programming 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 Since we’re using PHP, we are definitely going to need . Installation of Composer 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 and no password. If you want to configure that, go ahead. root 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 and perhaps want to use one epic package to keep your project dependencies up to date, check . Vue JS 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 command, and it will display all details about specific command and each flag it has... If you'd like to learn more, see . npm help [COMMAND] 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 as authentication, so I’ll add the following extra line to a configuration. https git config --global credential.helper osxkeychain If you are using authentication, you can set it up this way: ssh # 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 command, and it will display all details about specific command and each flag it has... If you'd like to learn more, see . _git help [COMMAND]_ 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