loading...
Cover image for Setup your Mac for development, 2020 edition.

Setup your Mac for development, 2020 edition.

v3frankie profile image Frankie Valentine Updated on ・15 min read

Updated 2/4/2020 I had a couple link errors and typos in this article. They have now been fixed. Also, I'm going to be posting a minified version of this without all of the fluff. Keep an eye out for that.

Updated 2/11/2020 A minified version of this post and all of the steps included have been created. View the minified version here.

Updated 3/9/2020 Added 'brew pin node' step after installing, zsh plugins, and removed VSCode note about it not being notarized with MacOS.

Updated 3/27/2020 Removed create-react-app from global install list because it is now recommended to run using npx.

My first post on Dev.to will be an extension of my first Medium post from January of 2018. This post has been removed because I no longer continue to support Medium and will be posting on Dev.to from here on out.

Introduction and goals

It’s been a while and I’m ready to come back and tackle another post for getting setup with your Mac in 2020. I still have a relatively similar setup and things haven’t changed much aside from getting more in touch and a lot more comfortable using new tools.

This will give you a more advanced setup and these tools will require proper research to become more in touch with each of them. The introduction to this post is purely getting started, but I wanted to include it, just as I had it in my first one. Feel free to skip down to further sections if you are already set up with the intro stuff.

The initial setup of your Mac includes Filevault as a setup step. I recommend using it. Also, location services are handy because you can use Find My to locate your device. I recommend this enabled too.

I would be quick to mention that if you haven’t already opened up your System Preferences and make sure you don’t have any new software updates.

Alt Text

Keeping your system up to date is crucial. Keep an eye out for updates on the regular.

If you are short on space I would also suggest loading up the Photo's app and disabling iCloud sync in the preferences. Messages also needs to be configured if you are an iMessage user so go ahead and load that up as well. I would recommend keeping this app pretty clean as messages can take up a lot of storage.

Finally, head to the App Store after you have completed this step and install each of the applications you use with your devices that are also Mac Apps. Upon completing this we can get into the nuts and bolts.

Terminal and System Preferences

Open your Terminal via the search bar in the top right corner. This is also called Spotlight which is a quick way to pull up applications on your system. When the Terminal is up make sure you use the command pwd to show where you are located in the system (i.e. /Users/you).

If at any point the following commands give you a permission error. This means you are not granted Administer privileges to utilize the Command Line. You will have to use the sudo command before and type in your password in Terminal.

Alt Text

The following commands will greatly increase the accessibility of your Mac during development.

Show Library folder:

chflags nohidden ~/Library

Show hidden files:

defaults write com.apple.finder AppleShowAllFiles YES

Show path bar:

defaults write com.apple.finder ShowPathbar -bool true

Show status bar:

defaults write com.apple.finder ShowStatusBar -bool true

Go to System Preferences for the following:

  • Keyboard > Text > Disable “Correct spelling automatically”
  • Security and Privacy > Firewall > On
  • Security and Privacy > General > Allow App Store and identified developers
  • File Sharing > Off

Alfred

Alfred is a replacement to Spotlight. I cannot give enough light to how much my inspiration has increased to speed up my workflow using my Mac with Alfred. Alfred can be a productive companion to your web development workflow and I recommend purchasing the Powerpack (25 euros aka $28 US). Powerpack adds great features such as clipboard history, a snippet manager, and workflows which are excellent. I highly recommend using the snippet and clipboard tools for your code.

Install Alfred: here
I changed the shortcut to access Alfred to the shortcut that Spotlight uses CMD + Spacebar. You can do this in the Spotlight settings in System Preferences. Locate the Keyboard Shortcuts tab in the bottom left to disable the shortcut or change it.

More info is located at the Alfred site and Powerpack page.

Also, I use this awesome minimal theme from Felix Queisler:
Alfred Theme Minimal 2019 · GitHub

Download the zip and click the theme file to activate it.

Command Line Tools, Homebrew & Casks

Every developer utilizes Command Line Tools. A simple terminal command will allow you to download these. It will ask you to confirm after you have entered the command.

xcode-select --install

Homebrew & Casks

Homebrew, it’s the missing package manager for MacOS, and quite powerful at that.

Copy and paste the following code into your terminal to install Homebrew.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

It will ask you to enter 'Return' to confirm the install.

I ran into an issue upgrading Node with Homebrew and our Node version manager (discussed later). So we'll want to install it and pin the formula so it doesn't update to any newer versions. You can always 'unpin' it later on.

brew install node
brew pin node

Casks are an extension of Homebrew and it allows you to install applications with one command. It brings together 3888 Casks maintained by 5169 contributors. Search the casks here.

Install these essentials:

brew cask install ‘hyper’
brew cask install ‘visual-studio-code’
brew cask install ‘google-chrome’

I ran into an issue of VSCode not wanting to open with MacOS's new Security and Privacy settings. If they fail to open you will have to go to System Preferences (Security and Privacy > General tab) and it will show at the bottom that you still wish to open the application.

Also, if Chrome isn’t your browser of choice feel free to search another or use Safari. Firefox Developer Edition is getting quite good!

Hyper Terminal & oh-my-zsh

Let’s talk a bit about that first Cask we installed, Hyper™ terminal. It’s created by the individuals over at ZEIT and their tools are incredible. I’ve really enjoyed using them.

Hyper is an Electron build terminal replacement. It’s completely built on HTML, CSS, and JavaScript. Cool, right?

We will continue to utilize Hyper as our main terminal for the duration of this setup tour.

Every new Catalina Mac will be utilizing zsh shell or “z shell” instead of a Bash shell. We are going to have this setup for our machines now. If you already were on Bash in a previous installation it will still remain. Zsh is only for new accounts created with Catalina.

Lets check if its installed already:

zsh --version

If not lets install it:

brew install zsh

After the install lets set it as our default shell:

chsh -s /bin/zsh

You may have to use sudo here again or it will ask you to enter your login credentials to change the system shell. Sudo will be used less frequently after installing the n package later on, but I didn't run into any huge issues with sudo after a clean install of MacOS.

After you have switched log out and log back in or restart your machine.

Once you are logged back in fire up Hyper and enter:

echo $SHELL

Expected result: /bin/zsh

Oh My Zsh is an open-source driven framework for your zsh config. It comes with a bunch of different plugins, themes, and helpers to make your terminal look awesome inside.

Install using:

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

Please view Using Oh-My-Zsh and get yourself acquainted. I’m running everything by default, but there are a ton of themes to choose from.

I have a helpful alias setup with my zshrc file to keep Homebrew up to date and my system running smoothly that I manually enter when I begin my development work.

To view your setup file:

nano ~/.zshrc

Arrow down until you see “# Example Aliases”
Under this we can add:

alias brewup=‘brew update; brew upgrade; brew cleanup; brew doctor’

To save the file: Control + O

To exit: Control + X

Every time we enter brewup in Hyper we will be able to utilize all three commands at once. A better solution would be to have this on a crontab cycle where it utilized every week or so, but I have yet to implement that yet!

Another helpful alias we could create while in the setup file access this setup file. We can make one while were in the file!

alias zshconfig=“code ~/.zshrc”

Bonus:
Two of the best features of having zsh is utilizing two necessary and useful plugins, zsh-autosuggestions & zsh-syntax-highlighting.

To install both of these you first clone them both in your oh-my-zsh custom plugins folder.

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

After cloning open your zshconfig and load them both into the plugins area of your settings file like so.

plugins=(
    zsh-autosuggestions
    zsh-syntax-highlighting
)

Git and SSH

Git will be used as a version control system for your code. Most new Mac's come with Git pre-installed so this will be an overview of initializing it. You will constantly be committing and pushing code using Git. SSH will uniquely identify you (and your computer) when your computer is communicating with other computers. Imagine that. Just think of it as a fancy password. A lot of applications on the web require you to authenticate with SSH, like Heroku and Github.

Git first then. Let’s go back to Hyper.

git config —global user.name “First Last” (keep the quotes)
git config —global user.email “Email” (keep the quotes)

Use the same email address for Heroku, Git, Github, and SSH.

Confirm the changes have been made using:

git config —get user.name
git config —get user.email

You should see your user name and email printed.

I have added some alias commands to my git config file. Take a look at yours yourself using:

code ~/.gitconfig

Remember we added the shell command in VS Code to view a specific file. You just used it!

Mine looks like this.

[user]
name = First Last
email = student@example.com
[alias]
a = add
ca = commit -a
cam = commit -am
s = status
pom = push origin master
pog = push origin gh-pages
puom = pull origin master
puog = pull origin gh-pages
cob = checkout -b
[color]
ui = auto

The alias commands allow me to just type git pom instead of… git push origin master.

To see a list of your config settings in Terminal check it with:
git config —list

SSH

SSH the fancy password. Got it. Let’s check if you have one already.

ls ~/.ssh/id_rsa

This will return “No such file or directory” if you don’t have an SSH key yet.

Generate a key using:

ssh-keygen -t rsa -b 4096 -C “student@example.com”

student@example.com is your actual email that you used with Git.

Expected result:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/student/.ssh/id_rsa):
Created directory ‘/Users/student/.ssh’.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/student/.ssh/id_rsa.
Your public key has been saved in /Users/student/.ssh/id_rsa.pub.
The key fingerprint is:
88:54:ab:77:fe:5c:c3:7s:14:37:28:8c:1d:ef:2a:8d student@example.com

You’ll be asked to enter a passphrase next. I suggest using one.

Public vs. Private Keys
If you open:

code ~/.ssh/

You will see two files an “id_rsa” file and “id_rsa.pub” file. The .pub is the public and can be shared freely, the _rsa must be kept a secret.

Go ahead and add your generated key to the authentication agent using:

ssh-add ~/.ssh/id_rsa

You will be prompted your passphrase and the identity will be added.

Once this is completed you should head to Github and configure your newly generated key to interact properly with Github. Github has a helpful guide here.

Visual Studio Code

Alt Text

Visual Studio Code is more powerful than ever, thanks to awesome updates by the Microsoft team, and the amazing developer made extensions. I always hear those arguments about the hype with vim or utilizing your text editor through your command line, but now I can’t even imagine going that route.

Go ahead and open up VSCode from Alfred. Previously installed using Casks.

First, were going to view the Command Palette. The Command Palette is located under the View tab. Once it is clicked a drop down will appear and you will then search shell command: Install ‘code’ command in PATH’ and hit Enter.

Alt Text

This enables you to type code ‘filename’ in Hyper terminal to open up a file in VS Code. Really powerful and useful!

At the Welcome screen select both, “Install support for JavaScript” and “Install support for keyboard shortcuts of Atom.” (Also found here)

To view the keyboard shortcuts for Atom go here. They will be considerably helpful with the increasing the speed of your coding.

Locate the sidebar icon for Extensions and search for these essential installs:

  • npm Intellisense
  • Path Intellisense
  • ESLint
  • Prettier - Code formatter
  • Live Share
  • Bookmarks
  • Debugger for Chrome (if using Chrome)
  • Auto Close Tag
  • Bracket Pair Colorizer 2
  • DotENV
  • GraphQL
  • Live Server
  • indent-rainbow

More VSCode & Bonus theme changes

Some of these extensions aren’t plug and play and will require some setup. Just read through the links and check them out before installing.

Peacock allows you to change the border window of VSCode to discern different workspaces.

Color Highlight highlights your style colors in the editor.

Babel JavaScript syntax highlighting for today's JavaScript standard.

The great thing about VSCode is that it has Git support built in once a repository has been initialized, but Git History allows you to view your history from within VSCode.

Markdown Preview Enhanced allows you to preview Markdown files, typically Github README's.

Simple React Snippets are snippets to speed up your React development.

Themes to search:

  • Atom One Dark
  • Atom One Light
  • Github theme
  • Material theme pack

Icon pack:

  • Material icon

For my VSCode theme, I use the one built by ZEIT. This one requires you to install via Hyper. What can I say I am a ZEIT fanboy.

curl https://zeit-theme.now.sh | tar xvz -C ~/.vscode/extensions

Restart VSCode, select 'ZEIT' in Preferences > Color Theme

Send them feedback if you run into any issues or wish to see changes!
Shu Ding original tweet


The following are more theme preferences that I have and love. I wanted to share them with you before moving forward.

Google Chrome Dev Tools Theme
I recommend adding a theme to your Chrome Developer Tools as well. I use New Moon by Tania Rascia. There is a guide to getting this setup in the Github repository located here.

JetBrains Mono Font
Another thing I have discovered is the font JetBrains Mono. I use this with VSCode and with Hyper and it's a wonderful development typeface. Install it here and then apply it to both applications.

To enable it in Hyper:

  • Enter Preferences by hitting CMD + , or using your new command with VSCode code ~/.hyper.js

NOTE:

If you use the first command it will most likely open with Chrome. You want to set your JavaScript files to open automatically with VSCode instead. When it opens in Chrome:

  • Select File > Save Page As...
  • Locate the file in your Downloads folder
  • Right-click the file
  • Select Get Info
  • Expand the Open with: arrow
  • Select VSCode
  • Select Change All... and confirm

After loading up your Hyper Preferences file you should change the fontSize to 16 and then add "JetBrains Mono" to the beginning of the fontFamily preference. Include the double-quotes.

This is similar in VSCode. Enter the Command Palette by hitting CMD + SHIFT + P and search 'user settings'. It should be on the main screen and add 'JetBrains Mono' to the beginning of the Font Family setting. Single quotes is fine in VSCode.

n-install & Yarn

Homebrew installs the latest version of Node. Although, you may run into situations or learning where you need to utilize a certain version of Node.

I use n-install to manage my Node versions.
n - Node Version Manager

Install using:
brew install n

n is a no BS, straightforward, simple version manager. It allows you to install the latest version of Node or utilize a stable version of your choosing. Earlier, Homebrew installed the latest version of Node. n allows us to utilize the LTS version or other versions we want of Node on the fly. Before installing I would suggest setting up your user permissions (code below) and cache folder if it's not present. However, it should be applied upon install.

# make cache folder (if missing) and take ownership
sudo mkdir -p /usr/local/n
sudo chown -R $(whoami) /usr/local/n
# take ownership of node install destination folders
sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share

Another option is Node Version Manager.
nvm: Node Version Manager

Check out both repo’s and make your decision. You’ll want to follow the instructions to get this installed.

Yarn

Yarn is another package manager for code. Version 2 was just released and I'm happy to get started with it. It is an elegant, reliable tool that you will definitely utilize.

Install using:
brew install yarn

mySQL, MongoDB & a note on other Databases

As a developer, you will need to utilize databases. I have currently only utilized MySQL and MongoDB. Databases are a whole topic within their own and it’s important to spend some time learning each of these! I would turn to a simple Codecademy course for MySQL and MongoDB has a great educational portion of their site dedicated to having you learn it first hand.

Databases are rapidly changing, but these two are tried and true. I continue to use these frequently and depending on your project you will have different requirements or wish to use something newer like GraphQL (query language), EdgeDB, or FaunaDB.

For mySQL, you need to tap the Homebrew services first and then install.

brew tap homebrew/services
brew install mysql@5.7

For MongoDB it's similar, but we need to tap MongoDB specifically.

brew tap mongodb/brew
brew install mongodb-community@4.2

Additional setup may be required before using these databases. Follow along with the prompts in the terminal when using for the first time and you should be good to go!

Command Line Interfaces

A lot of tools today are offering a whole set of functionality to interact with their products. I believe utilizing CLI’s is massively important for enhancing productivity when developing. I've listed ones that are documented well so you will have to check it out to figure out how to use them optimally.

We didn’t get to go over these in the first edition, but let’s get into it.

Now is ZEIT’s CLI tool for dead simple deployment.
npm install -g now

Netlify is a no frills builder, deployment tool and manager of modern web projects.
npm install -g netlify-cli

Surge is a tool to publish web apps to a CDN.
npm install -g surge

Gatsby is a Static Site Generator and Progressive Application Generator.
npm install -g gatsby-cli

create-react-app creates a React app.
npm install -g create-react-app

Vue CLI creates a Vue app.
npm install -g vue-cli

Hub is a great tool to interface with Github from the command line. Github CLI is currently in beta.
brew install hub

Additional applications not originally mentioned

Notion is an all in one workspace. A truly incredible tool.

Spectrum is a community platform built for technology communities.

Numi calculator. I love its note style calculation.

Magnet is a workspace organizer for Mac. This is a paid App located in the App Store. The download link on the site will direct you. I recommend it over Spectacle.

Pocket is a save for later application. Insert articles, videos, notes, and pretty much anything else.

Parcel is the best delivery tracker.

Dashlane is my password manager of choice.

Spark is email, done right.

Postman is an Application Programming Interface (API) development Graphical User Interface (GUI). Yeah… a mouthful, but incredible.

Dozer allows you to clean up your menu bar.

Conclusion

I hope this is a valuable resource for all Mac users! Development has been a continually changing environment and it’s easy to not have a direction to put yourself in to have a standard setup accessible. This post will continue to be extended in the future and I look forward to providing some guidance then.

If you run into hurdles, errors, or mistakes. Please let me know so I can correct them!

Posted on Jan 1 by:

v3frankie profile

Frankie Valentine

@v3frankie

Designer and Developer building V3 Digital Studio.

Discussion

markdown guide
 

Great post! Not a fan of Hyper, but very good tips, advices and tools!

 

I’m currently using iTerm2 and was actually considering trying Hyper. What did you dislike about it?

 

Performance. I don't have a very powerful machine and sometimes and it feels too slow -- I type and had to wait to see my input. I found issues like mine in the repo, and with iTerm2 I don't face this problem.

Hmm that's a valid concern and something that I heard multiple times with Hyper. Will have to look into it a bit more myself. Thanks for the reply

 

Not everyone is a fan of Hyper, and that's ok! A lot of Electron apps suffer without having great processing power in your machine. The same can be said for VS Code's performance at times. All in all, I love that it's built by Zeit. Their design language, making the tool accessible to a ton of platforms, and the fact I can config the tool using JavaScript makes it appealing to me personally.

 
 

Great article! Haven’t tried Hyper yet but will take a look at it.

 

Thank you for this helpful guide! Currently setting up my brand new mac mini. I've done this all before, year ago, including SSH, but this time, when I tried to generate my SSH key (ssh-keygen -t rsa -b 4096 -C "myemailadress@server[dot]com") I got put into a dquote> REPL, which I have never seen before. I have no idea what to do now. A google search didn't turn up anything for me.

dev-to-uploads.s3.amazonaws.com/i/...

 

figured it out. copying and pasting the command from this page was the problem: for some reason, the double quote character is not the same as if you actually type it on the keyboard.

 

Thanks you! I just set up my first Mac ever, looks like a good start!

 

It’s brew cask install ‘app’

 

Thanks cheddarKast! I updated the command on the article.

 

Introduced me to a few useful looking tools/tips in this article. Seeing how other developers work is real helpful. Thanks for sharing 👌

 

Well, I just finished my setup by your Tutorial a minute ago. Let's see how good everything works. :D

 

Let me know how it went Dominik!

 

Hi Frankie
Is Homebrew useful? Is it true that any programs or software that are installed through Homebrew could be uninstall immediately if Homebrew is uninstalled?

 

Hey Annabel! Homebrew is incredibly useful, imo. Formulas (programs) that are installed with Homebrew will be uninstalled when you uninstall Homebrew itself. I encourage you to check out their docs (link: docs.brew.sh) it will answer more of your questions regarding Homebrew.

 

Thanks for sharing. Checked Hyper based on your article but I see it lacks several features available out-of-the-box in iTerm2. Have you tried iTerm2? Are there aspects of Hyper you like more?

 

Hey Vivek, I replied to Ibrahim's question with some of my opinions on Hyper if you want to check it out above. Hope it helps answer your questions. If not, let me know.