Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jun 6, 2016

Front-End Development Setup on a Mac

This document assumes you're running a fresh and updated copy of macOS "formerly known as OS X".

The following workflow assumes a clean installation of macOS. While it's okay to have third-party software installed, the installation process will be more streamlined and less convoluted with a new macOS.

Command Line Interface

Throughout this document, you will encounter examples like this that contain one or more of the arguments listed:

sudo command -flag --flag directory file.extention # Comments are behind pound signs

Anytime you see this, it is referring to your CLI of choice, whether it's the built-in Terminal.app or a third-party application like iTerm2.

Front-end development has increasingly moved towards an open-source driven, command-line interface (CLI) dependent workflow. Whether we access modules, packages or simply useful commands, setting up a command-line shell to your liking is a good idea.

System update and Disk Encryption

Step One - Update the system! Apple Icon > System Preferences > Software Updates

Step Two - Turn on FileValut Apple Icon > System Preferences > Security & Privacy > FileVault

Click on the lock (bottom-left of window) to allow you to turn on and enable FileVault. On a brand new machine or macOS installation, it should take around an hour or less to get this done depending on the size of your drive.

Alternatively, you can use a third-party encryption software like Veracrypt, which is open-source and well regarded in the security community.

Enable FileVault Encryption

Why do you want full-disk encryption? Theft.

You're most likely using a portable laptop of some kind. If you lose it, the laptop gets stolen or someone tries to hack into it, your personal data is at risk. Using full-disk encryption is an extra layer of security to keep your 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, and a cloud backup provider like Backblaze, Carbonite, or iDrive.

Enable Firewall

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

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

System Tweaks

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. Note: keep in mind you probably have to re-open Finder or Terminal to see these changes

Unhide the Library folder

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.

Set fast keyboard key repeat rate

defaults write NSGlobalDomain KeyRepeat -int 0

Show filename extensions by default

defaults write NSGlobalDomain AppleShowAllExtensions -bool true

Show Path Bar and Status Bar in Finder

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

Show Full Path in Finder Title Bar

defaults write com.apple.finder _FXShowPosixPathInTitle -bool true

Show All File Extensions

defaults write -g AppleShowAllExtensions -bool true

Disable Creation of DS_Store Files on Network Volumes and USB Drives

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

Projects Directory

If you don't already have one, create a projects directory somewhere on your machine. I like to use ~/Sites/project-name. I prefer my Sites folder to exist with the rest of my user profile folders.

cd # Go to home directory
mkdir -p ~/Sites

Depending on the type of projects you work on, this might not be necessary or preferable.

Xcode Command Line Tools

An optional but nice-to-have add-on is Command Line Tools for Xcode. These include compilers that will allow you to build things from source.

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 Xcode Command Line Tools:

xcode-select --install

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

Older OSes

Go to http://developer.apple.com/downloads, and sign in with your Apple ID (the same one you use for iTunes and app purchases).

Once you reach the downloads page, search for "command line tools", and download Command Line Tools for Xcode. Open the .dmg file once it's done downloading, and double-click on the .mpkg installer to launch the installation. When it's done, you can unmount the disk in Finder.

Homebrew

Package managers make it so much easier to install and update applications (for Operating Systems) or libraries (for programming languages). The most popular one for OS X is Homebrew.

Install

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

Run the following command to make sure everything works:

brew doctor

Usage

To install a package (or Formula in Homebrew vocabulary) simply type:

brew install <formula>

Replace <forumla> with the name of the formula you want to install.

Helpful commands:

brew outdated # check for outdated packages
brew upgrade <formula> # upgrade package to latest version
brew list --versions # check installed packages and versions

Installing multiple applications

Here's a list of my favorite apps that I need for development on a regular basis.

brew install firefox brave-browser tor-browser slack vscodium atom imageoptim imagealpha google-nik-collection vlc vnc-viewer signal transmission skype virtualbox authy appcleaner vagrant tunnelblick mullvadvpn freetube iterm2 kap libreoffice wireguard-tools zoom scroll-reverser python homebrew/cask/docker

Don't use brew install Node.js, we'll do that below using nvm.

Privacy

I think now is the time to briefly let you know that macOS communicates with remove Apple services by default. Apple collects data on how you use the operating system through a process called Differential Privacy. With this process, Apple know how many people or devices use what and how often. Apple also knows about their user’s habits as a collective, not individuals. There's not a lot of transparency about what's going on but there are many free and open source applications that help us shut down and block as many as we know about.

First, I recommend you look through PrivacyTools.io. There's a ton of valuable software and links to consume.

One of the more popular network monitors and script blockers is called Little Snitch, which I don't personally use. It will keep applications from reporting back stats that can compromise privacy and security.

Sublime Text, Atom, and VSCode

The text editor is a developer's most important tool. Everyone has their preferences, but unless you're a hardcore Vim user, I recommend one of three editors: Sublime Text, VSCode or Atom.

Sublime Text

I split my time starting here, for older projects. It's a solid code editor with lots of extensibility.

brew install sublime-text-dev

I prefer using the alpha version of Sublime Text 4 which is just as stable as version 2 and 3. I had to join the discord channel to find a link to download version 4.

Sublime Text is not free, but it has an unlimited "evaluation period". The seemingly expensive $70 price tag is worth every penny. If you can afford it, I suggest you support this awesome editor. :)

After installing Sublime Text, add Package Control. This is the most important addition you'll make to Sublime Text and it'll give you the power to install plugins, add-ons, themes, color schemes and more.

Colors

I recommend to change two color settings:

  • Theme (which is how the tabs, the file explorer on the left, etc. look)
  • Color Scheme (the colors of the code).

I prefer darker themes: Material Design Darker and Seti_UI Theme.

Go to Tools > Command Palette (Shift-Command-P), Highlight Package Control: Install Package and then search for your preferred theme, make sure it's highlighted then press Enter to install it.

Then go to Sublime Text > Preferences > Settings - User and add the following two lines (using Seti UI) and restart Sublime:

"theme": "Seti.sublime-theme",
"color_scheme": "Packages/Seti_UI/Scheme/Seti.tmTheme",

Settings

Let's configure our editor a little. Go to Sublime Text > Preferences > Settings - User and paste this code from my Preferences.sublime-settings file.

Feel free to tweak these to your preference. When done, save the file and close it.

I can also open a file with $ subl myfile.ext or start a new project in the current directory with $ subl .. Pretty cool!

Atom

If you like Sublime Text but can't afford or don't want to pay for it, Atom is an open-source editor in the spirit of Sublime Text that has a healthy community and regular updates.

The main problem for Atom as of autumn 2018 is that large files and projects noticeably slow down Atom's performance.

VSCode

Here's where I split the rest of my time.

Visual Studio Code found popularity at the end of the 2010s and has become a staple open-source code editor for many front-end developers. I use it both personally and professionally because of various built-in features like git support, terminal integration, live sharing your code with another developer, and a similar-to-Sublime-Text repository of great plugins. I recommend using VSCodium, as it strips away the telemetry and tracking that Github integrates into VSCode.

brew install vscodium

There's a ton of great tutorials and articles, such as VS Code Docs and VS Code Can Do That?.

Vim

It is a good idea to learn Vim. It is a popular open-source editor accessed using command-line shells and is often pre-installed on Unix and Linux systems.

For example, when you run a git commit, it will open Vim to allow you to type the commit message.

I suggest you read a tutorial on Vim. Grasping the concept of the two "modes" of the editor, Insert (by pressing i) and Normal (by pressing Esc to exit Insert mode), will be the part that feels most unnatural. After that it's just remembering a few important keys.

Vim's default settings aren't great, and you could spend a lot of time tweaking your configuration (the .vimrc file). But if you're like me and just use Vim occasionally, you'll be happy to know that Tim Pope has put together some sensible defaults to quickly get started.

First, install pathogen.vim by running:

mkdir -p ~/.vim/autoload ~/.vim/bundle && \
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

If you're brand new to Vim and lacking a vimrc, vim ~/.vimrc and paste in the following super-minimal example:

execute pathogen#infect()
syntax on
filetype plugin indent on

And finally, install the Vim "sensible defaults" by running:

cd ~/.vim/bundle && \
git clone git://github.com/tpope/vim-sensible.git

With that, Vim will look a lot better next time you open it!

ZSH

macOS 10.15 and newer come with zsh as the default shell, replacing Bash. Install Oh My Zsh! for extra help and nice defaults.

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

Don't forget to customize ZSH!

Themes are available. Autosuggestions and Syntax Highlighting will improve ZSH user experience too.

Sign up and follow the videos recorded by Wes Bos to learn a ton more about ZSH and why it's so powerful. Or a free 80 minute video on YouTube by Karl Hadwen.

SSH

SSH is imperative, just like git and node as you'll see.

Github has excellent instructions for setting up git and connecting it to a Github account. This will help you to install the repos to your computer from Github as well as set up keys that you'll need to connect git and github.

Now you can add a little shortcut to make SSHing into other boxes easier. Paste the following block of code into your SSH config file at ~/.ssh/config, changing the variables for any hosts that you connect to.

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_rsa

Below the above, you can add other sites as needed.

Host myssh
  HostName example.com
  User user
  IdentityFile ~/.ssh/key.pem

With the above code, you can now run the alias myssh to connect.

ssh myssh

Git

What's a developer without Git?

brew install git
git config --global user.name "Your Name Here"
git config --global user.email "your_email@youremail.com"

Note: It is important to remember to add .DS_Store (a hidden system file that's put in folders) to your .gitignore files. You can take a look at this repository's .gitignore file for inspiration.

Git aliases

Less keystrokes is better, so let's add some sensible shortcuts to a global Git config file.

touch ~/.gitconfig

Pick and choose any of these aliases to help you.

[user]
  name   = Firstname Lastname
  email  = you@example.com
[github]
  user   = username
[alias]
  a      = add
  ca     = commit -a
  cam    = commit -am
  cm     = commit -m
  s      = status
  pom    = push origin master
  pog    = push origin gh-pages
  puom   = pull origin master
  puog   = pull origin gh-pages
  cob    = checkout -b
  co     = checkout
  fp     = fetch --prune --all
  l      = log --oneline --decorate --graph
  lall   = log --oneline --decorate --graph --all
  ls     = log --oneline --decorate --graph --stat
  lt     = log --graph --decorate --pretty=format:'%C(yellow)%h%Creset%C(auto)%d%Creset %s %Cgreen(%cr) %C(bold blue)%an%Creset'

With the above aliases, I can run git s instead of git status or git ca instead of git commit -a when I have a bunch of file updates.

Node.js

For modern Javascript programming, Node.js is required. Using Node Version Manager (nvm) to install Node allows you to easily switch between Node versions and is useful for projects on different versions of Node.

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

nvm usage

When you enter a project, you can install Node using NVM.

nvm install node

Restart terminal and run the final command.

nvm use node

Set a default version of Node.

nvm alias default xx.xx

Confirm that you are using the default version of Node and npm.

node -v && npm -v

You can switch to another version and use it by changing to the directory where you want to use Node and run the following.

nvm install xx.xx
nvm use xx.xx

Node modules are defined in a local package.json file inside your project. npm install will download external libraries and frameworks into each project's own node_modules folder by default. You'll never need to edit files in this folder, only reference them.

Update NVM

nvm install node --reinstall-packages-from=node

Python

Even if you don't use Python in your day to day, it's likely you'll encounter something that requires it. MacOS includes Python 2.x by default. Version 2 is years outdated and almost all python can and should run with a minimum of version 3. Let's update python!

If you didn't already install it with brew above, install the latest python with Homebrew.

brew install python

Now see what we installed

ls -l /usr/local/bin/python*

You'll now see a few lines like this:

lrwxr-xr-x  1 user  admin  40 Jan 01 00:00 /usr/local/bin/python3.9 -> ../Cellar/python@3.9/3.9.5/bin/python3.9

We'll use one of these lines to update the symlink so that using your terminal to run python will run the latest version by default.

ln -s -f /usr/local/bin/python3.9 /usr/local/bin/python

Check it out. (you'll have to restart terminal)

python --version

Pip

With python now running the latest version, it's a good idea to install Pip, which is a package manager for Python.

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python get-pip.py --user

Ansible

If you're working with virtual machines or remote servers, it's possible you'll need a way to automate/manage tasks on/with them. Ansible is your answer to this.

python -m pip install --user ansible

Composer

PHP is still one of the most used programming languages on the web, thanks in part to the amount of sites still using WordPress. We need a way to manage PHP scripts and packages similarly to how we manage JS dependencies using NPM.

One of the most popular PHP dependency managers is called Composer. The difference between Composer and NPM, for example, is that Composer works on a project-by-project basis, there is no global installations. So you must run and setup Composer on every new project if you want to use it.

To install Composer globally, go to the Download page and run the package installer.

Virtualbox

The traditional way of setting up a front-end development environment used to be to work through FTP or directly on the server. WordPress installations still promote this workflow to some extent.

The last decade has seen significant changes to the front-end workflow, one of the most important being a local development environment: a local database, a local web server, and back-end language among other things. Using this environment decreases time and increases efficiency for front-end development.

There are several ways to setup a local development environment, whether it's using the built in *AMP stack, installing a package like MAMP or XAMPP or using virtual machines like Parallels or VMWare Fusion which give you isolated environment to run the above packages.

The free, open-source alternative that I've been enjoying is called Virtualbox. This gives you a basic but very capable virtual machine host for any operating system that supports virtual installations.

brew install virtualbox

Once installed, you can easily install many versions of Internet Explorer from the Microsoft's VM site.

Vagrant

I have personally tried to move away from MAMP for my dev environment. The alternative I like is called Vagrant. It gives you a powerful way to create a virtual and portable dev environment! It also has built-in connection to your local OS so that you develop in macOS but the environment runs in the VM.

brew install vagrant

The brilliance of vagrant is its ability to be so portable. When you have a project you work with other developers, creating and destroying the identical dev environment is very simple, by reading a local vagrant instruction file. Once created, starting this environment is as simple as typing one command.

vagrant up

A great box to use for new projects is called Scotch Box. It is fully-featured and contains everything I need built in to get started with many projects using PHP, JS or Ruby. For a WordPress environment, Roots has Trellis which includes everything you need for a powerful VM.

Docker

Similar to Vagrant, I increasingly use Docker for professional projects. It comes with similar benefits to Vagrant, such as portability, encapsulation for the environment within the OS, and consistent environments. Docker goes a little further because it's a container manager it's lighter in resources and file size than Vagrant.

In order to install the desktop application (which I recommend), we have to use the full homebrew path to docker desktop.

brew install homebrew/cask/docker

Docker can be quite powerful but complicated to set up. For this reason, I'm a fan of another project which is a wrapper around Docker called Lando. Originally designed for Drupal, it's increased support for many other environments including WordPress, Node.js, and Laravel.

brew install lando

For privacy, I recommend disabling tracking. Inside of your .lando.yml file, add the following:

stats:
  - report: false
    url: https://metrics.lando.dev

Video walk-through

If you like to watch and see by example, some of what I've covered (and more) is in a video that swyx.io-fame Shawn made. I don't agree with or recommend everything he does, but I think much of it is good to see in real time. https://www.swyx.io/new-mac-setup-2021/

Credits

About

Front-end setup for macOS

Resources

License

Releases

No releases published

Packages

No packages published