Skip to content

asuh/front-end-macos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 

Repository files navigation

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".

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 terminal like iTerm2. 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

On a brand new machine or macOS installation, it shouldn't take long 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.

Why Enable FileVault Encryption

Why do you want full-disk encryption? Theft.

You're most likely using a portable device 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 one option to store the Filevault password. The other option is downloading it and storing it yourself. Using iCloud, Apple Support will be able to assist you with recovering data. On Apple's servers, iCloud isn't fully encrypted. So, while iCloud is 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 laptop password and FileVault 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.

Enable Firewall

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

Apple Icon > System Preferences > Security & Privacy > Firewall

or

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

For all CLI commands, keep in mind you probably have to either log out and log back in OR re-open Finder/Terminal to see the following changes

Tap-to-click for the trackpad

  1. [System Preference -> Trackpad -> Point & Click]
  2. [Tap to click] option

Three-finger Dragging

  1. [System Preference -> Accessibility]
  2. In the [Accessibility] sidebar, choose [Pointer Control]
  3. Click the button [Trackpad Options]
  4. Enable dragging with [three-finger drag]

Expose with Trackpad

  1. [System Preference -> Trackpad]
  2. Click the [More Gestures]
  3. Enable "App Exposé" and select [Swipe up with four fingers]

Set fast keyboard key repeat rate

  1. [System Preference -> Keyboard]
  2. Move dial to the right of [Key Repeat]

OR

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

UTF-8 Terminal

defaults write com.apple.terminal StringEncodings -array 4

No more 'Are you sure you want to open this application?'

Open an application from the web without being asked if that's what you really want to do. Of course it is.

defaults write com.apple.LaunchServices LSQuarantine -bool false

Another update I prefer is to show all filename extensions in Finder.

[Finder > Preferences > Advanced > Show all filename extensions]

(Optional) Unhide the Library folder

This is likely outdated now, less useful than before, but sometimes it's still helpful.

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.

System Path

One very important part of using Terminal in my workflow is being able to quickly type commands that run services. Sometimes, you might install something and it is still not available in the Terminal.

echo $PATH

Running this command will return a long string, separated by :, of various paths to services you can reference using line commands. If you install one of the services like Node and typing npm doesn't work, for example, use the above command to check to make sure you see a reference to the path to Node.

In my recent past, I've had issues with Composer's path not being set in the system path. I needed it to run Laravel Valet, which I talk about later in the document. In order to use Valet, I added Composer to the system path using the following command:

export PATH=$PATH:/Users/[username]/.composer/vendor/bin

Of course, [username] is the name of the macOS account you're using. echo $PATH now includes the above path after : to be in the returned string.

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.

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 macOS is Homebrew.

(If you're using an native Mx [x = any integer] Mac, you'll potentially have installation issues. There are multiple articles to help you add commands to the system path and then you can run brew doctor to find more advice)

Install

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

In some cases, you'll have to run a few more commands in the terminal to allow the terminal to use brew in the path. If not, you might have to start a new terminal session.

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 (modify the list below as you need)

brew install firefox brave-browser tor-browser mullvad-browser slack visual-studio-code vscodium sequel-ace imageoptim vlc vnc-viewer signal virtualbox appcleaner mullvadvpn iterm2 kap libreoffice wireguard-tools zoom qbittorrent scroll-reverser homebrew/cask/docker

brew install --cask zed arc transmission

To explicity install software applications with a GUI, it's good to use the flag --cask. The example below is necessary because transmission can default to a CLI version instead of the GUI-based app.

brew install transmission --cask

Note

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

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.

Note: if you already installed Homebrew above, it's likely that Xcode was installed for you so you can skip this section.

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

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 PrivacyGuides.org. 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 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 two editors: Sublime Text or VSCode.

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!

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.

brew install visual-studio-code

Add command line code access:

cat << EOF >> ~/.zprofile
# Add Visual Studio Code (code)
export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
EOF

I recommend using VSCodium, as it strips away the telemetry and tracking that Github integrates into VSCode. However, VSCodium has issues with extensions like Live Share, so keep that in mind.

brew install vscodium

Add command line codium access:

Go to the command palette (View | Command Palette...)
Choose Shell command: Install 'codium' command in PATH.

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 "[email protected]"

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  = [email protected]
[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.39.2/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

Auto invoke NPM

Automating NPM to switch to the right Node is a nice little time saver. Add some code to your shell to allow this auto switch capability.

Put this into your $HOME/.zshrc (using latest MacOS):

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

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/[email protected]/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

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 environments.

The free, open-source alternative that I often use 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 if you are still supporting legacy browsers in your project.

Laravel Valet

In theory, I prefer a completely isolated environment that's self-contained like Docker. Practically, these environments can be bloated, inefficient, and using a lot of CPU processing or Memory.

Since the late 2010s, I've grown to appreciate a project from Laravel called Valet. Valet is free, very lightweight, and is relatively easy to set up. I pair it with DBngin, a free and open-source database hosting application.

These two paired together leave a small footprint and don't

Docker

I increasingly use Docker for professional projects because of its portability and shared environment for projects with multiple developers.

In order to install the desktop application, 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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published