As Front-end developers 🤓 we can build basic websites with nothing more than a text editor and a browser, but we want to up our game by adding a JavaScript framework like React or Vue and useful tools like Git to our workflow.

But wait! Our Mac isn’t ready. Before diving in, we’ll need to install a few items that will save we from confusing errors later. 😩

This is the minimum (IMO) setup we'll need to get up and run on our Mac and a checklist to set up our ✨ OS X for front-end development.

🚀 Let’s go!

• 🛡️ Security
  • Update Your Mac
  • Enable Firewall
  • Enable FileVault Encryption
• 💻 System Tweaks
  • Unhide the Library folder
  • Show Path Bar and Status Bar in Finder
  • Show Full Path in Finder Title Bar
  • Prevent Time Machine from Prompting to Use New Hard Drives as Backup Volume
  • Show All File Extensions
  • Disable Creation of DS_Store Files on Network Volumes and USB Drives
• 🛠️ Command Line Developer Tools
• 🍺 Homebrew
• ⬛ Choose a Terminal App
• 👨🏻‍💻 Dev apps
  • Curl
  • Docker
  • Elasticsearch
  • Findutils
  • Firefox
  • Fonts
    • Font Jetbrains Mono
    • Font Fira Code
  • Git
  • Git flow
  • Google Chrome
  • GnuPG
  • GNU sed
  • GNU tar
  • Grep
  • Imagemagick
  • iTerm2
  • Java Runtime
  • MongoDB
  • MySQL
  • Ngrok
  • Nodejs
  • NVM
  • oh-my-zsh
  • Perl
  • Postgresql
  • Python
  • Rainbarf
  • Redis
  • Ruby
  • RVM
  • SASS
  • Tmux
  • Tmuxinator
  • TOR
  • PHP
  • Postman
  • SourceTree
  • Vagrant
    • Keep VirtualBox Guest Additions updated
  • VirtualBox
  • Visual Studio Code
  • X11
  • Yarn
  • ZSH
• 👨🏻‍🎨 Designer apps
  • Figma
  • Sketch
  • InVision
• 🧰 Really useful apps
  • Dropbox
  • Google Drive
  • Harvest
  • Notion
  • PoEdit
  • RectangleApp
  • Signal
  • Slack
  • Spotify
  • Telegram
  • The-unarchiver
  • Transmission
  • VLC
  • Zoom
• 🗃️ Other stuff
  • Update Everything easily
  • Zsh prompt for Astronauts. 🤩
    • Requirements
    • Installing with oh-my-zsh
  • Our privacy matters
• Conclusion
  • Credits

✋🏻 First things first!

Keeping your system up to date is crucial. Keep an eye out for updates on the regular.

Before installing any new software, follow these instructions from Apple to upgrade macOS and your current software to the latest version.

This is for online protection when we're not in our home network or not behind a router.

sudo /usr/libexec/ApplicationFirewall/socketfilterfw --setglobalstate on

We're most likely using a portable laptop of some kind. If we lose it, the laptop gets stolen or someone tries to hack into it, our personal data is at risk. Using full-disk encryption is an extra layer of security to keep our mind at ease in case of potential intrusion.

🚧 Two main caveats:

• Do not misplace or forget your FileVault recovery key or login password. Losing this password means you cannot log in and without the recovery key everything on your computer is inaccessible if you can't decrypt the files during a recovery. iCloud is an option to store the Filevault password. Using iCloud, Apple Support will be able to assist you with recovering data. iCloud isn't fully encrypted so whilt it's convenient, it's less secure.
• If macOS gets corrupted and you need to download files from the drive after accessing the drive from an external case, it's not possible without the password and recovery key. Make sure you're both backing up using Time Machine on an external drive or a NAS.

Follow these instructions from Apple to enable FileVault Encryption.

Apple's default system settings are limiting and don't show a lot of information. Let's change the settings for better usability around the system.

chflags nohidden ~/Library

Alternatively, open Finder, press ⇧ ⌘ H , ⌘ 2 , ⌘ J and check Show Library Folder. Unhiding this folder could be useful for manual backup, but it's not necessary.

defaults write com.apple.finder ShowPathbar -bool true
defaults write com.apple.finder ShowStatusBar -bool true

defaults write com.apple.finder _FXShowPosixPathInTitle -bool true

I don’t use Time Machine. It is better than nothing but not necessary. But keep this on if you have an external drive you use for backups.

sudo defaults write /Library/Preferences/com.apple.TimeMachine DoNotOfferNewDisksForBackup -bool true

defaults write -g AppleShowAllExtensions -bool true

defaults write com.apple.desktopservices DSDontWriteNetworkStores -bool true
defaults write com.apple.desktopservices DSDontWriteUSBStores -bool true

The first thing we'll need to install from the command line are our Mac's command line developer tools. Installing these now will prevent weird errors later.

Xcode weighs something ~2GB and is useful for the iOS simulator but is not necessary unless you're developing iOS or Mac apps. Good news is Apple provides a way to install only the Command Line Tools, without Xcode.

Using Terminal, install the tools with this command:

xcode-select --install

To check if the tools are already installed, type the following command in your terminal app and hit return:

xcode-select --version

There's not a straightforward way to update Xcode Command Line Tools, so we have to remove the existing tools to reinstall from scratch.

sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install

Instead of installing the next few tools by going to each tool's website, finding the download page, clicking the download link, unzipping the files, and manually running the installer, we’re going to use Homebrew 😍.

Homebrew is a tool that lets us install, update and uninstall software on our Mac from the command line. This is faster and safer than the manual approach and generally makes your development life easier.

Install Homebrew with:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Since you'll be interacting with your Mac using the command line in this article, you'll need a terminal app.

Any of the following are good options:

• iTerm2
• Hyper
• Terminal (the default app that comes with our Mac's)

brew install curl

brew install boot2docker
brew install docker-compose

# tap the Elastic Homebrew repository
brew tap elastic/tap
# install the default distribution of Elasticsearch
brew install elastic/tap/elasticsearch-full

To have it launched start elasticsearch and restart at login:

brew services start elasticsearch

brew install findutils

brew install --cask firefox

brew tap homebrew/cask-fonts

✨ The best font for developers 😍

brew install --cask font-jetbrains-mono

brew install --cask font-fira-code

brew install git
# GitHub wrapper
brew install gh

brew install git-flow

brew install --cask google-chrome

brew install gnupg

brew install gnu-sed

brew install gnu-tar

brew install grep

brew install imagemagick --disable-openmp --build-from-source

brew install --cask iterm2

Follow https://support.apple.com/HT204036

brew tap mongodb/brew
brew install [email protected]

To have it launched start mongodb/brew/mongodb-community and restart at login:

brew services start mongodb/brew/mongodb-community

brew install mysql

To have it launched start mysql and restart at login:

brew services start mysql

brew install --cask ngrok

I recommend you use NVM instead of

brew install node

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

Running either of the above commands downloads a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Install latest node

nvm install node

Set default

nvm use node

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

brew install perl

brew install postgresql

To have it launched start postgresql and restart at login:

brew services start postgresql

brew install python

brew install rainbarf

brew install redis

To have it launched start redis and restart at login:

brew services start redis

I recommend you use RVM instead of

brew install ruby

Install GPG keys:

gpg2 --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

Install RVM with default Ruby:

\curl -sSL https://get.rvm.io | bash -s stable

brew install sass/sass/sass

brew install reattach-to-user-namespace
brew install tmux

brew install tmuxinator

brew install tor

brew install php

brew install --cask postman

Personally I prefer to use the terminal but some developers prefer to use this type of tools

brew install --cask sourcetree

brew install --cask vagrant

vagrant plugin install vagrant-vbguest

brew install --cask virtualbox

brew install --cask visual-studio-code

brew install --cask xquartz

brew install yarn

brew install zsh

brew install --cask sigma

brew install --cask sketch

You should also consider using:

• Sketch Mirror (iOS app)
• User Flows (plugin)
• Craft (plugin)

Cost: $99

brew install --cask invisionsync

Dropbox is a modern workspace designed to reduce busywork-so you can focus on the things that matter. Sign in and put your creative energy to work.

brew install --cask dropbpox

Google's powerful search capabilities are embedded in Drive and offer unmatched speed, performance, and reliability. And features like Priority use AI to predict ...

brew install --cask google-drive

See where your time is going, improve your projects, increase efficiency. Schedule Future Projects. Easy, Intuitive Interface.

brew install --cask harvest

Too many tools? Too much chaos? With Notion, all your work is in one place. All your projects tracked. All the features you need. Hassle-free wiki software. Better shared docs. Types: Personal Free, Personal Pro, Team, Enterprise.

brew install --cask notion

brew install --cask poedit

Move and resize windows in macOS using keyboard shortcuts or snap areas

brew install --cask rectangle

Instant messaging application focusing on security and privacy.

brew install --cask signal

A better way to communicate. Unlike email, conversations in Slack are easy to follow. And they're more than conversations — you can make calls, share files, and even connect with other apps.

brew install --cask slack

Spotify is a digital music service that gives you access to millions of songs.

brew install --cask spotify

Telegram lets you access your chats from multiple devices. Fast. Telegram delivers messages faster than any other application.

brew install --cask telegram

Unpacks archive files

brew install --cask the-unarchiver

Open-source BitTorrent client

brew install --cask transmission

Multimedia player

brew install --cask vlc

I recommend you look for an alternative to zoom 🤷🏻‍♂️

Zoom is the leader in modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, chat, and webinars across mobile, desktop, and room systems.

brew install --cask zoomus

Once in a while, run the following command and everything you’ve installed with Homebrew will update automatically:

brew update && brew upgrade && brew cleanup && brew doctor

That one command is all you need to keep your system up to date. 🙌 I usually run it when I start a new project, but feel free to do so whenever you like.

(When you run this command, if Homebrew suggests additional commands for you to run, go ahead and run them. If a command begins with sudo and you are prompted for a password, use your Mac’s admin password.)

That’s it for the command line!

Spaceship ZSH is a minimalistic, powerful and extremely customizable Zsh prompt. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship and I really love it.

To work correctly, you will first need:

• zsh (v5.2 or recent) must be installed.
• Powerline Font must be installed and used in your terminal (for example, switch font to Fira Code).

Clone this repo:

git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1

Symlink spaceship.zsh-theme to your oh-my-zsh custom themes directory:

ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

Set ZSH_THEME="spaceship" in your .zshrc.

If you are looking for an alternative Starship is one of them.

That is why I recommend using Firefox. Especially Firefox in the version 85 cracks down on supercookies.

My list of extensions:

• uBlock Origin. An efficient blocker add-on for various browsers. Fast, potent, and lean. With uBlock I am subscribed to an adblock list to block "browser-based crypto mining"
• DuckDuckGo Privacy Essentials. DuckDuckGo Privacy Essentials comes packed with best-in-class privacy essentials and makes browsing in Firefox even faster.
• Facebook Container. Facebook Container works by isolating your Facebook identity into a separate container that makes it harder for Facebook to track your visits to other websites with third-party cookies.

Another tool that I like it is AdGuard. AdGuard is ta standalone ad blocker for Mac, Iphone, etc... No need for extra applications or browser extensions. Just download ad blocker for Mac by AdGuard and kill a small flock of birds with one stone. 🤷🏻‍♂️

You're all set! 🎉

That’s all our need to get up and running with JavaScript-based front-end development on our Mac.

• Set up your shiny OS X for software development
• How to Set Up a Mac for Web Development
• Front-End Development Setup on a Mac
• Setup your Mac for development, 2020 edition
• My list of essential tools and apps for design & front-end development
• How to Set Up Your MacBook for Web Development in 2020