How to Set Up a Mac for Web Development
Tags: mac, node, git, homebrew
Published: 2018-10-23 00:45:59

---
title: How to Set Up a Mac for Web Development
description: What to install on your Mac before starting a JavaScript project.
canonical_url: https://michaeluloth.com/macos-set-up-for-web-development/
tags: mac, node, git, homebrew
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gs4bs0mhs1avx8q8qqi5.jpg
published: true
---

While you can build basic websites with nothing more than a text editor and browser, you may want to up your game by adding a JavaScript framework like [React](https://reactjs.org) or [Vue](https://vuejs.org) and useful tools like [Git](https://git-scm.com) to your workflow. 

But wait! Your Mac isn’t ready. Before diving in, you’ll need to install a few items to that will save you from confusing errors later. 😩

This article will guide you through the minimum setup you'll need to get up and running with JavaScript-based web development on your Mac.

Let’s go!

## Update Your Mac

Before installing any new software, follow [these instructions](https://support.apple.com/en-ca/HT201541) from Apple to upgrade macOS and your current software to the latest version.

## Choose a Terminal App

Since you'll be interacting with your Mac using the command line in this article, you'll need a terminal app.

Any of the following are good options:

- [Hyper](https://hyper.is)
- [iTerm2](https://www.iterm2.com)
- [Visual Studio Code](https://code.visualstudio.com/docs/editor/integrated-terminal)'s integrated terminal
- [Terminal](https://support.apple.com/en-ca/guide/terminal/welcome/mac) (the default app that comes with your Mac)

If you aren’t sure which one to pick, choose Hyper. 

## Command Line Developer Tools

The first thing you'll need to install from the command line are your Mac's **command line developer tools**. Installing these now will prevent [weird errors](https://stackoverflow.com/questions/32893412/command-line-tools-not-working-os-x-el-capitan-macos-sierra-macos-high-sierra) later. 

To check if the tools are already installed, type the following command in your terminal app and hit return:

```sh
xcode-select --version
```

If the result is not a version number, install the tools with this command:

```sh
xcode-select --install
```

A dialog will appear asking if you'd like to install the tools. Click **Install** and the package will download and install itself.

When the installation finishes, confirm the tools are now installed by rerunning the first command:

```sh
xcode-select --version
```

The result should now be a version number.

## Homebrew

Instead of installing the next few tools by going to each tool's website, finding the download page, clicking the download link, unzipping the files, and manually running the installer, we’re going to use [Homebrew](https://brew.sh).

**Homebrew** is a tool that lets you install, update and uninstall software on your Mac from the command line. This is faster and [safer](https://blog.teamtreehouse.com/install-node-js-npm-mac) than the manual approach and generally makes your development life easier.

First, check if Homebrew is already installed:

```sh
brew --version
```

If you don't see a version number, install Homebrew with this command:

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

I promise that's the weirdest command you'll see in this article! 😅 Thanks to Homebrew, the rest are simple.

Before moving on, confirm Homebrew is now installed:

```sh
brew --version
```

## Node and npm

[Node.js](https://nodejs.org) is a tool that allows your Mac to run JavaScript code outside of a web browser. If you want to run a JavaScript framework like React or Vue on your Mac, you’ll need to have Node installed.

Node also includes [npm](https://www.npmjs.com) (the Node Package Manager), which gives you access to a giant library of free code you can download and use in your projects.

First, check if Node is already installed:

```sh
node --version
```

If not, install it with Homebrew:

```sh
brew install node
```

Finally, confirm Node and npm are now installed:

```sh
node --version
```

```sh
npm --version
```

## Git

[Git](https://git-scm.com) is a tool that helps you track changes to your code and work with other developers on shared projects. 

Using Git on all every project is a great habit to develop and will prepare you for future projects where Git may be required. Some tools (like [GatsbyJS](https://www.gatsbyjs.org)) also depend on Git being installed on your Mac, so you’ll need it even if you don’t plan to add it to your workflow. 

Once again, start by checking if Git is already installed:

```sh
git --version
```

If not, install it:

```sh
brew install git
```

And confirm the installation worked:

```sh
git --version
```

## Update Everything

Once in a while, run the following command and everything you’ve installed with Homebrew will update automatically:

```sh
brew update && brew upgrade && brew cleanup && brew doctor
```

That one command is all you need to keep your system up to date. 🙌 I usually run it when I start a new project, but feel free to do so whenever you like.

(When you run this command, if Homebrew suggests additional commands for you to run, go ahead and run them. If a command begins with `sudo` and you are prompted for a password, use your Mac’s admin password.)

That’s it for the command line!

## Code Editor

While you can write code in any text editor, using one that highlights and validates your code will make your life much easier. 

Any of the following are good options:

- [Visual Studio Code](https://code.visualstudio.com)
- [Atom](https://atom.io)
- [Sublime Text](https://www.sublimetext.com)

If you’re just getting started, choose Visual Studio Code. 

## Browser

As you code, it helps to view the app or website you’re building in a browser to confirm it works. While you can use any browser for this, some include extra developer tools that show you details about your code and how to improve it. 

Either of the following are good options:

- [Chrome](https://www.google.com/chrome/)
- [Firefox](https://www.mozilla.org/firefox/) 

If you’re just getting started, choose Chrome. 

## Finder

A quick tip here: you’ll want to show the files your Mac hides by default. (For example, git files are automatically hidden, but sometimes you’ll want to edit them.) 

The easiest way to show your Mac’s hidden files is with the keyboard shortcut `sh⌘⇧.` (Command + Shift + Period). This will alternate between showing and hiding these files so you can access them when you need them.

## Conclusion

You're all set! 🎉

That’s all you need to get up and running with JavaScript-based front-end development on your Mac. 

To prevent confusion, I left out any items that aren’t strictly required. If you'd like to dive deeper into optional ways you can further customize your Mac for web development, check out the links below.

## Further Reading

- [Setting up a Brand New Mac for Development](https://www.taniarascia.com/setting-up-a-brand-new-mac-for-development/) (Tania Rascia)
- [Setting up a MacBook for Front-End Development](https://www.bhnywl.com/blog/setting-up-a-macbook-for-front-end-development/) (Ben Honeywill)
- [Leaving Homestead: Finding the Best All-Around Local Development Environment](https://webdevstudios.com/2018/09/27/finding-the-best-all-around-local-development-environment/) (WebDevStudios, in case you need a PHP setup as well)