Dev Environment Setup

Getting started with free fundamental dev tools on new or factory reset Macs. A quick setup guide for software developers.

This guide provides:

• Steps to set up a solid dev environment on new Macs.
• Suggestions for free dev tools.
• Direct links and inline Terminal commands, intended to speed up the initial setup so you can get started coding asap.

Both new and experienced engineers welcome!

Equipment specs:

• New or factory reset Mac computer.
• When writing this, I was on MacOS Monterrey 12.6. This isn’t required, but could change some behaviors if you’re on a different version.
• I have a good ol’ Intel chip. For those of you who are proud new owners of beautiful M1 computers… good luck, and wishing you the best on your journey.

Author’s Note: I include extra narrative primarily for beginners or people who are unusually patient. For those of you who are less patient, I’ve marked all the extra fluff as “Author’s Note”s — you can skip those. On the other side of the spectrum, I’ve also specified “TLDR” sections so you don’t have to click into the links or read my ramblings. 🏎🏎🏎

The Long Version (author’s notes):

Are you a software developer with a brand spanking new computer? Or perhaps you’ve trashed your old computer and had to wipe it with a factory reset (this is me 🙋). Either way, this guide is for you.

As developers, we all dread setting up our development environment. It takes way longer than it should, there are always more little details that aren’t quite right and slow us down (keyboard shortcuts, anyone?). We don’t even have our basic tools that we use to get our tools, like npm, git, or brew. 🙄🙄

Luckily, if we are nice to our computers, this setup only needs to happen once every few years. Yay! But on the other hand… we inevitably forget what we need to download to be productive again, and which hidden, required dependencies are missing. The playing field has probably also changed since the last time we set up: some version of an obscure dependency doesn’t play nice with the updated version of some other obscure dependency, or perhaps your new computer isn’t compatible with your old tools (M1 Mac users, I’m looking at you).

This guide is my attempt to remember these steps for next time, and to help make the journey a little smoother so we can get back to coding already!

Dev Tools to Download

A browser with good dev tools

The first step on any new computer — get a good browser asap! Safari is a waste of your time…

Chrome or Firefox browsers are my favorites.

New developers: To view the browser dev tools, open any browser and type command+shift+c. You’ll need these tools for debugging frontend development!

IDE (Integrated Development Environment)

In human words, a code editor. You need this.

I chose these:

1. JetBrains IntelliJ Community Edition (download here), which is primarily for Java-based development (like Java, Kotlin and Android), but can be used for coding in other languages as well. Note, it is not great for JavaScript development, since most of the linting and syntax highlighting only comes with the paid version.
2. Visual Studio Code is another very popular free editor, again with a paid subscription option if you want to upgrade later. I use this one for all my front-end editing like JavaScript and React projects, since it has syntax highlighting for those out of the box and free.
3. Sublime I use as a secondary code editor / sandbox. This is great for quick and dirty code editing, because you can immediately create and edit standalone files without creating a whole project that builds or even including a file extension. It’s a great clipboard for code.

Author’s Note: In a world with a billion different competing IDE’s, I’d recommend not wasting too much time deciding and just go with whichever one you are most comfortable with — I chose these because they are free versions of an editors I’ve used before and find intuitive.

Postman

This is a super useful application for testing API endpoints. I’ve never found or heard of a tool that can compete. Installation is here.

Database Software

Author’s Note: If you’re going to be working with any databases at all (that’s everyone with a backend) you’ll need to download something that allows you to host, run, view, and query your dbs locally.

Unfortunately, my favorite tool from JetBrains, DataGrip, requires a paid subscription. So, plan B was to download MySQL instead, which is a pretty popular and has a free option.

🏎 TLDR — use the steps below to install MySQL:

• Go here and download the option that looks something like this: “macOS 12 (x86, 64-bit), DMG Archive”. To de-crypt what that means in case your computer is different from mine:

macOS 12 == your OS version. This can be found by clicking the apple menu at the top left of your screen -> About this Mac -> Version. Mine is 12.6 (Monterrey).

x86, 64-bit == your chip type. I have an Intel chip, which is x86. M1 users should pick ARM instead.

DMG Archive == the filetype that your computer can read to install MySQL.

• Since this installer is downloaded from the internet, you might get a Mac permission error when you try to open it. To get around this, find the installer in Finder (probably in the Downloads folder), right click or ctrl+click to open the menu options -> open. This will give you a new “open” button to override the security exception. 🔑
• Note: MySQL is odd in that once downloaded it shows up in your System Preferences instead of Applications.

Terminal Set-Up

If you haven’t already, find Terminal in your Applications or by using Spotlight search (cmd+space) and pin it to your Dock.

Download Homebrew

Download Homebrew by typing the following command into your Terminal. This takes a while (~10 min), especially if you don’t have XCode tools installed yet.

Author’s note: I recommend plugging in your laptop and killing any other memory-intensive processes, as this installation script makes your computer work pretty hard.

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

Once the installation is complete, confirm brew is properly downloaded with:

brew --version

It should print something like this:

Homebrew 3.6.8
Homebrew/homebrew-core (git revision 8897fc383ef; last commit 2022-11-02)
Homebrew/homebrew-cask (git revision f74cbcc77f; last commit 2022-11-02)

If you don’t get a version, stop 🛑. Look for and resolve any errors that show up in the installation output before moving on.

Set Up GitHub

Author’s note: Before starting on this step, you might want to create a local home for your coding repos. A lot of developers follow some sort of naming convention depending on their software team’s file patterns. Regardless of your workplace, it is almost always a new folder in your user root directory, alongside folders like “Downloads” and “Desktop”, and named “Code” or “source” or “workspace”, etc. Jump to my section on “Making Finder Actually Useful” to make this a little easier.

If you don’t have an account yet, visit github.com to set one up (it’s free).

Here are the Docs. I opt to use the command line, so the instructions I followed are here. 🏎 TLDR — Terminal commands are below:

brew install gh

Once the installation is complete, confirm git is properly downloaded with:

git --version

It should print something like this:

git version 2.37.1 (Apple Git-137.1)

If you don’t get a version, stop 🛑. Look for and resolve any errors that show up in the installation output before moving on.

Get Anna Bush’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Set your human-readable name:

git config --global user.name "Your Name"

Confirm it worked with:

git config --global user.name

It should print your name.

Set your GitHub account email so your future commits will be associated with your account. This will need to match the email you specified in your GitHub account settings.

git config --global user.email "myGithubAccountEmail@email.com"

Confirm it worked with:

git config --global user.email

It should print your email.

Next, save your credentials so you don’t need to re-authenticate every time you want to interact with github from the command line. I chose HTTPS authentication, because that is what Github recommended (it’s also a little faster to set up). SSH is the alternative.

🏎 TLDR — command to start HTTPS setup:

gh auth login

You’re officially set up! Confirm by creating and pushing a test repo:

• In the browser, navigate to github.com, click the ➕ button at the top right next to your profile picture -> New Repository.
• Fill out the form. I chose to check the “Add Readme” box to create a new repository. You can also push an existing repository if you have one. The following instructions will be for a brand new repo, though.
• Clone the new repo, by navigating to it in the browser (it should automatically do this after you create it). Click the green “Code” button -> HTTPS tab -> Copy the provided URL. Clone it down to your local machine with the following command in Terminal (replace my URL with the one you copied).

git clone https://github.com/annabushsoftware/SetupScripts.git

• Make any change to the local repo. I just added a txt file to the directory.
• Review your changes with:

git status

• Add and commit your changes with:

git commit -am "Added a txt file"

• Push your changes up to GitHub with:

git push

• Refresh the repo page in the browser to see your changes appear. The commit should include your profile picture and github account name, since you updated your local git user.email earlier.

Optional Customizations

Hammerspoon ShiftIt

Allows you to easily organize windows on your desktop by snapping them to left/right/top/bottom/corners/new screen/anything you want.

These docs are quite good, so I won’t repeat them here.

💁Author’s Tip: when you first install hammerspoon, you’ll need to manually open it using spotlight search (cmd+space) and searching for “hammerspoon”, or finding it in your Applications folder. When you open it for the first time it will show you some preferences. For ShiftIt setup, you’ll want to show the hammerspoon icon in the menu bar, and you need to enable Accessibility.

Make Finder Actually Useful

Show hidden files — We all need to modify files like .gitignore at some point, so it’s helpful to be able to get to them through Finder if we want a quick link.

• Open Finder, and type cmd + shift + .(period)
• Confirm it worked by navigating to any git repo — there should be a translucent .git folder showing in the base directory.

Add your user base directory to the “Favorites” section — It is baffling to me that this isn’t default behavior and we need to do this manually...

• Open Spotlight search (cmd+space) -> search for your mac username -> open the search result that is a folder type
• This opens the folder in finder. Click and drag the folder name at the top of the window to the “Favorites” in the left navbar. Now you’ll always be able to get to your home directory without searching for it. 🙄

Update: I found new functionality (which imho should be default… but it’s not). You can show the breadcrumbs / full path of whichever folder you are viewing by doing the following:

• Open Finder
• Click into the View menu at the top of the screen -> Show Path Bar
• The path of whatever folder you are viewing with now show at the bottom of the Finder window. Thank goodness.

Oh My Zsh

Make your Terminal look and feel better. One of the most useful features is showing the git branch in the command line, but it also comes with a ton of fun extra plugins if you’re into more customizations. Download here.

🏎 TLDR — terminal command to download OhMyZsh:

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

Other peripheral tools I like to use:

Like everyone, I like to save money when I can, so I opted for the best free options I could find. All of these tools can be upgraded to get additional features which could certainly be useful down the road, especially for bigger software teams.

Jira for task management and planning.

Clockify for time tracking.

Miro for whiteboarding, wireframes, and any kind of diagramming.

🏎🏎🏎 Really impatient?

Here is the master list of the Terminal commands used in this tutorial. Speed at your own risk.

Good luck!

You should be ready to get started coding now! There will definitely be further setup required for whatever coding language and framework you choose to work with- just stick to their docs and you’ll be fine.

I’ll be posting more tutorials diving into some of these tools and further steps for getting started with a few coding languages and frameworks, so upvote 👏, subscribe 👀, and stay tuned for more! Until then, happy coding.

Further Reading

Check out my other tutorials for downloading npm and getting started with React, coming soon (as of 11/19/2022)!