macOS Dev Environment Setup

macOS Setup

Setup Home Dev Environment on macOS

This walks through setup on macOS.

Total Time Needed :

2

Hours

30

Minutes

Required Tools:

– A Computer.

Steps to Set up 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 VSCode-darwin.zip file.

– Open the file it will uncompress into a Visual Studio Code.app file
– Drag the file into your Applications folder. Admin password will be required to allow this.

You should be done.

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 this and hit enter (everything from curl to bash):
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

NOTE: If it you see this “Profile not found” message in the text that shows when the code runs then you will need to create a profile.

a. Create a profile
For older macOS you would use bash profile. For newer OS you can use zsh profile. It’s actually fine to have both. Run each of these lines separately:
touch ~/.zshrc
touch ~/.bash_profile

b. Run the curl command again
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

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

Close the Terminal

Open Terminal again.

– Test your install by typing: command -v nvm
you should just see: nvm

If not, the install didn’t work. Stop here and look back over the instructions, see the detailed link at the top of this step or ask Prof Stein 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 Node is simple

– open Terminal (if it isn’t already open)
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 v15.7.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.
If you need it here are official Install instructions: https://brew.sh/ 

The install is copy and pasting one line:
– Open Terminal
– Visit the site: https://brew.sh/ 
– Copy the install line
– paste it in the Terminal
– press enter.

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!

Homebrew Cheatsheet: https://devhints.io/homebrew 

This article covers installing both the Apple Command Line Tools (useful) and Homebrew.

Note: to check whether or not you have the developer tools installed:
1. Open Terminal
2. Type in: xcode-select –version

If you get back something like: xcode-select version 2384
then you have it installed. If not, then you will need to install them.

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
– Type: brew install git

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 the Terminal app
– type: brew install zsh

Step 7: Install Oh My Zsh

This is optional but seems to be useful according to a number of people.
– open Terminal (should still be from last step)
– Copy/Paste this and hit return
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

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
one should appear at the bottom of the screen
– in that terminal that appeared click where it says 1:bash
– then click Select Default Shell
– Select zsh from the options

– restart Visual Studio Code
– You should now see 1:zsh instead of 1:bash