Pages

⇇ Back to Homepage / macOS / Setting up macOS for Web Development

Setting up macOS for Web Development

Here’s a concise guide on how I would set up the software stack on a MacBook.

Yikes! This post is over a year old!
If you think it deserves a rewrite please get in touch or leave a comment.
— Thanks, Ash.

At Mixd it’s pretty typical to be given a new MacBook when you first start with the company. Whilst the initial setup will be taken care of for you, the dev stack may not be.

I wrote this guide as a means for me to keep track of the countless tools, tweaks and software that I typically install onto a new Mac. It’ll be pretty concise, I’m not going to explain why I install certain things. Remember, this is just a way for me to write this down in a place where I won’t forget it.

You might disagree with some of the software stack, that’s fine. I’m open to change and if you think I can streamline things, you can reach me on Twitter @DrizzlyOwl.

This guide assumes you already have access to a new laptop, your user account is set up and you can log in to the machine. It is also assumed that you have no existing developer environment set up on your machine.

Applications

  1. Download and install MAMP Pro.
  2. Download and install Sequel Pro.
  3. Download and install Tunnelblick.
  4. Download and install Visual Studio Code.
  5. Download and install Keybase.
  6. Download and install the evergreen browsers:
    1. Mozilla Firefox
    2. Microsoft Edge
    3. Google Chrome
  7. Download and install Adobe Creative Cloud
    1. Install Photoshop and Illustrator as a minimum
  8. Download and install Sketch

Command Line Tools

  1. Open a Terminal and run xcode-select --install to install X Code Developer Command Line Tools. Follow the instructions that appear.
    1. Confirm it is installed by running xcode-select -print-pathOutput
      The output should read: /Library/Developer/CommandLineTools
    2. If it’s installed successfully, Reboot your machine.
  2. Download and install version 10.x of NodeJS for maximum compatibility with our sites.
  3. Install wp-cli
  4. Install composer
  5. Install brew
  6. Quit and re-open Terminal
  7. brew install ruby@2.7 for maximum compatibility with our sites, (requirement for WP Deploy)
  8. mkdir ~/.MAMP_BIN/
  9. ln -s "/Applications/MAMP/Library/bin/mysql" ~/.MAMP_BIN/mysql ln -s "/Applications/MAMP/Library/bin/mysqldump" ~/.MAMP_BIN/mysqldump
  10. nano ~/.profile and add the following lines
    1. # PATH edits
      export PATH="/Applications/MAMP/bin/php/php7.3.24/bin:$PATH"
      export PATH="$HOME/.MAMP_BIN:$PATH"
      export PATH="$HOME/.composer/vendor/bin:$PATH"
      export PATH="/usr/local/opt/ruby/bin:$PATH"
      # Preferred editor export EDITOR=nano
  11. nano ~/.zshrc and add to the bottom
    1. source ~/.profile
  12. Quit and re-open Terminal
  13. Install phpcs with composer global require "squizlabs/php_codesniffer=*"
  14. Install bundler with gem install bundler:2.1.4 (requirement for WP Deploy)
  15. nano ~/.gitconfig and add the below, substituting XXX and YYY with your name and Github email address
    1. [core]
      excludesfile = $HOME/.gitignore_global
      [user]
      name = XXX
      email = YYY
  16. npm install -g grunt-cli browser-sync bower lighthouse

Configuring MAMP Pro

Make sure your MAMP Pro is set up for ‘Expert Mode’ by clicking the right icon in the menu bar where it says ‘View Mode’.

Right-click on MailHog and click ‘Add to GroupStart’.

On Ports & User click the ‘Set ports to 80, 81, 443, 7443, 3306 & 11211’ button

On the PHP screen, select the “Default version:” as 7.3.24, set the “Mode” to Module, set “Cache” to off enabling the Xdebug extension, and switch on all logging and error options.

Configuring Visual Studio Code

  1. Open a new Terminal and run nano "$HOME/Library/Application\ Support/Code/User/settings.json"
  2. Paste in the content from settings.json
    1. On line 13 you should replace "<path to>/.composer/vendor/bin/phpcs" with the appropriate path.
      Find it using which phpcs in a Terminal
    2. On line 20 you should replace "<path to>/bin/php" with the appropriate path.
      Find it using which php in a Terminal
  3. Install the appropriate Visual Studio Code Extensions as listed here: Mixd/mixd-vsc-settings

Create an SSH Key

  1. In a Terminal run ssh-keygen -t rsa -b 4096 -C "your_email@example.com" replacing your_email with your email address
    1. Accept the default file location
    2. DO NOT set a passphrase
  2. nano ~/.ssh/config and add
    1. Host *
      AddKeysToAgent yes
      UseKeychain yes
      IdentityFile ~/.ssh/id_rsa  
  3. Add your SSH Key to your Keychain with ssh-add -K ~/.ssh/id_rsa
  4. Follow Github’s recommended guide on how to Add a new SSH Key to your GitHub Account *NOTE: this article references id_ed25519.pub substitute that with id_rsa.pub instead.

Breadcrumbs

⇇ Back to Homepage / macOS / Setting up macOS for Web Development

← Previous post

Next post →