macOS Dev Environment Setup


This steps you through setting up a macOS computer with the software and settings needed for our class.

apple laptop with blank screen

Total Time Needed: 3 hours (estimate)

Steps to Setup Your Development Environment

Step 1: Install Visual Studio Code

VS Code is the code editor we will use in class. It’s made by Microsoft but it’s free, cross platform and integrates well with what we are doing.

  • Click here to download VS Code
  • Click on the Mac download button. It should start downloading a file.
  • Open the file it will uncompress into a Visual Studio file
  • Drag the file into your Applications folder. Admin password will be required to allow this.

You should be done with this step.

Step 2: Install NVM

This is the Node Version Manager and will be used to install Node (next step). This page has these instructions in more detail (external link).

  • Open the Terminal. You can press command + spacebar and then type Terminal to search for it
  • Copy/Paste in the line below into the Terminal and hit return (everything from curl to bash):
curl -o- | bash

It should install NVM and tell you you have to close the terminal or enter a command.

  • Close the Terminal.
  • Open the Terminal again
  • Test your install by typing: command -v nvm
  • you should just see: nvm
screenshot of terminal with command -v nvm entered

If not, the install didn’t work. Expand the part below and try the steps outlined there.

If that doesn’t work either see the detailed link at the top of this step or post in Discord for help.

Step 3: Install Node

Node is a handy tool that gives you access to a lock of command line developer tools. If you have ever seen a tutorial that started “It’s easy just npm install myThingy” and had no idea what that really meant, this will let you do that. Luckily if NVM is installed properly then installing Node is quick:

  • open Terminal (if it isn’t already open)
  • Type the following and press return.
nvm install node

Node should install and tell you what version it is.

You can test by typing: node -v
It should show something like v16.1.0

Step 4: Homebrew

Homebrew is a package manager for macOS that helps you to install other things (like Git which we will do next). We did not use it for NVM because NVM is also a package manager for Node and the two can conflict.

Here are official Install instructions: 

  • Open Terminal
  • Visit the site: 
  • Copy the install line
  • Paste it in the Terminal
  • Press return.

It may ask you for your admin password.

It may need to install XCode command line tools. This is OK and you should let it do it.

You should have it installed!

Step 5: Install Git with Homebrew

Git is the version control system we will use and the most popular one in the industry. On the mac you may have an out-dated version already installed. The following will either install or help update it and then you can continue to use Homebrew to manage it.

  • Open Terminal
  • Copy/Paste or type the following into Terminal and press return:
brew install git

You should see it start to install git and show the process in terminal.

Step 6: Update Terminal to use zsh

If you get a message to update to zsh when you open Terminal (will get it in the later versions of macOS) then you should follow these steps. If you don’t get it then you can ignore these and jump to step

Fuller instructions with more options are on this other website.

  • Open Terminal
  • Copy/Paste or type the following into Terminal and press return:
brew install zsh

You should see it start to install and show the process in terminal.

Step 7: Install Oh My Zsh

Oh My Zsh is an open source, community-driven framework for managing your zsh configuration. It comes with a bunch of features out of the box and improves your terminal experience.

Install Oh My Zsh:

  • Open Terminal
  • Copy/Paste or type the following into Terminal and press return:
sh -c "$(curl -fsSL"

When this installs it should set your default shell (terminal window) to zsh. If that didn’t happen copy/paste the following into terminal and press return.

chsh -s $(which zsh)

You many need to quite and reopen Terminal for the changes to take effect.

Step 8: Integrate zsh with Visual Studio Code

This is optional but will make the terminal in VS code consistent with the Terminal if you just open the app.

  • in the VS Code Menu click Terminal > New Terminal. A terminal should appear at the bottom of the screen in VS Code.
  • If the shell is zsh, you’re all set.

If it says bash then you can change it to zsh

  • In that terminal that appeared, click the down arrow by where it says bash
    screenshot with down arrow to select terminal highlighted
  • then click Select Default Profile
    screenshot of Selecting default profile in terminal window
  • Select zsh from the options
    select zsh as default terminal
    • you may need to restart Visual Studio Code
  • You should now see zsh instead of bash