Since Chrome is the most widely used browser in use, we will use primarily Chrome for our web development. 

• Download and install Chrome

Browser Extensions

Required

• LastPass

Recommended

• React Dev Tools for debugging react apps
• Fonts Ninja for identifying fonts in use
• HTML5 Outliner for verifying well structured HTML
• JSON Formatter to make JSON more readable
• Loom for quick video demos

Terminal

Your terminal is essential for running commands. You should be comfortable in this environment. MacOS’s default terminal isn’t the most comfortable, so here are a few enhancements we can make. 

• Install iTerm

iTerm is a better terminal app than the default. 

• Install oh my zsh

Your shell is an important part of your terminal experience. Oh My ZSH configures zsh, instead of the default bash as your shell and gives you a prettier and easier command writing interface. You will need to install this via your iTerm command line:

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

Dev Environment

We’ll need a few standard apps to our development stack. 

App Store

A basic packaged mac development environment is included in XCode. We don’t use it directly much, but it’s worth having around.

• XCode
• Run xcode-select --install on your command line afterwards to accept the user agreement

Code Editor

You will obviously need a code editor to write code. We recommend VS Code.

• VS Code

Recommended Extensions

Databases

MacOS comes pre-installed with MySQL, but we will want to install mysql specific versions via Brew in later steps, therefore let’s uninstall it first.

Managing your database from the command line can be a headache, so let’s also install a GUI. We recommend either:

• Sequel Pro or Table Plus

MySQL tmp/sock

On a fresh install of MacOS Mojave & Catalina, brew install of mysql had some errors when running its post-install. The solution was to comment out the following line in /usr/local/etc/my.cnf:  You may have to remove the data directory before retrying brew postinstall mysql: rm -rf /usr/local/var/mysql

Brew Package Manager

Now that we have a nicer terminal up and running, we can continue installing packages via the command line. Brew is a great package manager for MacOS that we can use to quickly install and manage versions of software we’re using. 

• Install Brew

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

With brew now installed, we can quickly install some dependencies we’ll need for your dev environment. But first, let’s install sass

• sudo gem install sass
• Now with brew, install the following packages by prefixing them with brew install
  • sassc
  • node
  • [email protected]
  • git
  • wp-cli
  • composer

After composer is installed, you should also add it to your paths by adding the following to your ~/.zshrc file.

export PATH=$HOME/bin:/usr/local/bin:$HOME/.composer/vendor/bin:$PATH

LEMP Environment

To develop WordPress, Laravel, and other LEMP environment sites, we will need a local server. There are many ways to do this, including Docker containers, but the easiest way to get started is by using Laravel Valet. 

• Install Laravel Valet

This will walk you through installing PHP and Valet. 

At this point, we should probably establish a good organizational structure before we start coding our projects. Making environment based folders can be a good start. 

• Create a code folder for all your development work in your home directory:
  • mkdir ~/code

• Within a code, add a folder per tech stack environment. For example, add a wordpress folder and then use valet to valet park the folder. Now any subfolders have an automatic WordPress environment. 

Server Access

At one point after you start writing your code in your local environment you will need to deploy it to a remote server or repository. In these cases you need to be authenticated. We usually authenticate via an SSH key that identifies your computer. 

• Generate an SSH Key
  • ssh-keygen -t rsa

This is simply a file that lives in ~/.ssh/id_rsa.pub so anytime a remote server needs an SSH key to authenticate you, this is the file you want to give it (not the private version at ~/.ssh/id_rsa)

• Add this key to your company Gitlab profile under > Edit Profile (User Settings) > SSH Keys
• Add to Github as well under your profile’s SSH keys.