Front End Web Development Setup for macOS

This document describes how I set up front end web development environment on my MacBook Air with macOS High Sierra 10.13.3.

• System Preferences
• Terminal
• Bash
• Homebrew
• Git
• Node.js
• Node Package Manager
• Web Browsers
• Visual Studio Code

System Preferences

After clean install of operating system, there are a couple tweaks I like to make to the System Preferences. Some of them are not strictly related to web development enviroment - I use them because of my personal habits.

• General > User dark menu bar and Dock
• General > Ask to keep changes when closing documents
• General > Close windows when quitting an app
• Dock > Automatically hide and show the Dock
• Keyboard > Key Repeat > Fast (all the way to the right)
• Keyboard > Delay Until Repeat > Short (all the way to the right)

Set Dock size

defaults write com.apple.dock tilesize -int 35; killall Dock

Disable "Press and hold"

defaults write NSGlobalDomain ApplePressAndHoldEnabled -bool false

Reset icons in Launchpad

I usually use this command after installing every application that I need - it keeps Apple applications on the first page and moves the rest to the next pages.

defaults write com.apple.dock ResetLaunchPad -bool true; killall Dock

Show hidden files

This can also be done by pressing Command ⌘ + Shift ⇧ + ..

defaults write com.apple.finder AppleShowAllFiles YES

Show path bar in Finder

defaults write com.apple.finder ShowPathbar -bool true

Show status bar in Finder

defaults write com.apple.finder ShowStatusBar -bool true

Terminal

I use my custom Terminal profile called Flat. You can download it by typing:

curl -O https://raw.githubusercontent.com/appalaszynski/mac-setup/master/Flat.terminal

To use it as default profile open downloaded Flat.terminal file and click Shell > Use settings as default option.

Bash

alias brewup='brew update; brew upgrade; brew prune; brew cleanup; brew doctor; brew cask cleanup'
alias rmhis='rm .bash_history; history -c; logout'

export CLICOLOR=1
export LSCOLORS=GxFxCxDxBxegedabagaced

RED='\[\033[1;31m\]'
GREEN='\[\033[1;32m\]'
YELLOW='\[\033[1;33m\]'
PURPLE='\[\033[1;35m\]'
GRAY='\[\033[1;30m\]'
DEFAULT='\[\033[0m\]'

parse_git_branch() {
     git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

export PS1="${RED}\u ${GRAY}• ${GREEN}\h ${GRAY}• ${YELLOW}\w${GRAY}\$([[ -n \$(git branch 2> /dev/null) ]] && echo \" on\")${PURPLE}\$(parse_git_branch)\n${GRAY}\$ ${DEFAULT}"

In my .bash_profile file I create a brewup alias to keep Homebrew (which we are going to install in a second) up to date and rmhis to remove bash history. I also set color scheme for ls command output and for custom prompt which contains username, computer name, working directory and current Git branch.

To download .bash_profile and execute its content, use:

cd ~
curl -O https://raw.githubusercontent.com/appalaszynski/mac-setup/master/.bash_profile
source ~/.bash_profile

Homebrew

Homebrew package manager allows to install almost any app right from the command line.

Installation

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

Brewfile

Installing each package separately may take some time. That's why I use Homebrew Bundle, which allows to automatically install all packages and applications listed in the Brewfile file.

Here are all the programs I install with a brief description.

• Cask - an extension to Homebrew which allows to install almost any program that exists for a Mac
• Git - for version control
• mas-cli - Mac App Store command line interface
• AppCleaner - uninstall apps
• Filezilla - FTP client
• Firefox - web browser
• Flux - better Night Shift
• Google Chrome - web browser
• KeepingYouAwake - prevent Mac from entering sleep mode
• Keka - file archiver
• MAMP - Apache, MySQL and PHP package
• Opera - web browser
• Sequel Pro - GUI for MySQL databases
• Skype - voice and video chat
• Spectacle - easily move and resize windows
• Transmission - BitTorrent client
• Visual Studio Code - code editor
• VLC - media player
• iMovie - video editor
• Pages - text editor
• Numbers - spreadsheet

Below are the entire contents of my Brewfile, which will install all the above programs with a single command.

tap 'caskroom/cask'

brew 'git'
brew 'mas'

cask 'appcleaner'
cask 'filezilla'
cask 'firefox'
cask 'flux'
cask 'google-chrome'
cask 'keepingyouawake'
cask 'keka'
cask 'mamp'
cask 'opera'
cask 'sequel-pro'
cask 'skype'
cask 'spectacle'
cask 'transmission'
cask 'visual-studio-code'
cask 'vlc'

mas "iMovie", id: 408981434
mas "Numbers", id: 409203825
mas "Pages", id: 409201541

To check App Store application's IDs use:

mas search <app name>

To download my Brewfile file type:

curl -O https://raw.githubusercontent.com/appalaszynski/mac-setup/master/Brewfile

To install listed applications use:

brew bundle

in directory that contains Brewfile file.

Git

You can set Git global configuration two ways. The first is to run bunch of commands which will update the Git configuration file, e.g.

git config --global user.name "First Last"
git config --global user.email "[email protected]"

The other and faster way is creating the Git configuration file and input it all ourselves.

cd ~
curl -O https://raw.githubusercontent.com/appalaszynski/mac-setup/master/.gitconfig
open .gitconfig

[user]
  name = First Last
  email = [email protected]
[github]
  user = username
[core]
  editor = editor
[credential]
  helper = osxkeychain

Here I set my name, email, GitHub username, core editor and connect Git to the macOS Keychain so I don’t have to type my username and password every time I want to push to GitHub.

Node.js

For installation of Node.js I like to use Node Version Manager (nvm). To download it type:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

You can check all available Node.js versions by:

nvm list-remote

To install specific version type:

nvm install <version>

Node Package Manager

The only thing I use globally at the moment is Gulp.

Gulp

To install Gulp globally use:

npm install --global gulp-cli

Web Browsers

Currently I have installed all major web browsers:

• Chrome
• Safari
• Opera
• Firefox

For main development I use Google Chrome.

Chrome extensions

• uBlock Origin - block ads
• JSONView - validate and view JSON documents
• React developer tools - inspect component hierarchies and states
• Redux DevTools - debug state changes

Visual Studio Code

All settings changes in Visual Studio Code are stored in settings.json file.

{
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "Monokai",
  "workbench.activityBar.visible": false,
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontSize": 12,
  "editor.tabSize": 2,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.minimap.enabled": false,
  "editor.hideCursorInOverviewRuler": true,
  "editor.formatOnPaste": true,
  "explorer.openEditors.visible": 0,
  "files.insertFinalNewline": true,
  "html.autoClosingTags": false,
  "files.exclude": {
    "**/node_modules/": true,
    "**/.vscode/": true,
  },
  "material-icon-theme.folders.theme": "none",
  "todohighlight.isEnable": true,
  "todohighlight.keywords": [
    {
      "text": "TODO:",
      "color": "black",
      "backgroundColor": "yellow",
      "overviewRulerColor": "yellow"
    },
    {
      "text": "FIXME:",
      "color": "white",
      "backgroundColor": "red",
      "overviewRulerColor": "red"
    }
  ],
  "todohighlight.exclude": [
    "**/public/"
  ]
}

You can copy and paste them or just download whole file by:

cd /Users/Your Username/Library/Application Support/Code/User
curl -O https://raw.githubusercontent.com/appalaszynski/mac-setup/master/settings.json

Extensions

• Auto Rename Tag - automatically rename paired HTML tag
• Debugger for Chrome - debug JavaScript code in the Google Chrome browser
• Material Icon Theme - icons based on Material Design
• open in browser - open any file in specific browser right from VS Code explorer
• Path Intellisense - autocomplete filenames
• Project Manager - manage projects right inside Visual Studio Code
• SCSS IntelliSense - autocomplete variables, mixins, functions and many other
• TODO Highlight - highlight and list TODO, FIXME or any annotations within code