My new mac setup for web development in 2021
Tags: webdev, javascript, node
Published: 2021-01-24 15:00:49

---
title: My new mac setup for web development in 2021
published: true
date: 2021-01-19 00:00:00 UTC
tags: webdev, javascript, nodejs
canonical_url: https://khaledgarbaya.net/articles/my-new-mac-for-web-development-in-2021
---

![A messy Desk](https://images.ctfassets.net/3bc97k4uk5q7/nOTp7eXjVz1h9urs8a7Ry/02d78aa2ad41dcef3706e669333488ac/messy-desk.png?q=60)

I recently got a new mac and decided to set it up from scratch. In this blog post, you get a detailed list of all the tools I installed to help me with my day to day web development tasks.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#dont-you-have-a-dotfile)Don't you have a dotfile?

I do have two dotfiles repo, but they kind of fall behind and are outdated. Also, I was not 100% satisfied with my setup, so I decide to start with a clean slate.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#setting-up-the-foundation)Setting up the foundation

First thing, you will need a password manager. With a new computer, you will need to log in to many services, like Github, email, etc., so it is better to set up your password manager first. I use [1Password](https://1password.com/downloads/mac/ "1Password") as my primary password manager.

Second, to make your life easier, get a package manager for your mac; I am talking about [brew](https://brew.sh/ "install brew"). It will allow you to install 90% of your tools through the terminal.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#the-terminal-setup)The Terminal setup

Now iTerm2, a terminal emulator, this a personal choice, and feel free to install anything else you want or use the default mac terminal, which I did btw for over two years.

```
brew install --cask iterm2
```

Continuing with iterm2, I love the night owl theme for both my [terminal](https://github.com/nickcernis/iterm2-night-owl "night owl theme for iterm") and my code editor.

![iterm-nightownl](https://images.ctfassets.net/3bc97k4uk5q7/4i7Kxl6b5P8IUmDFSJeMsF/7c4e04b41fbb85ef7a5d13200972fdb0/Screen_Shot_2020-12-29_at_21.55.14.png)

Another setting you might want to change is to set the appearance to minimal.

![iterm-settings-minimal](https://images.ctfassets.net/3bc97k4uk5q7/42RVchJ2nm27ZfyufC5uax/965fa03b8a2bdda07ff5120dc1970175/Screen_Shot_2020-12-29_at_21.58.38.png)

Even more terminal goodness, let's install [zsh](https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH) [oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh) this will help you take your terminal to the next level with things like history and autocomplete. So no more "what was that command again".

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#setting-up-the-node-environment)Setting up the Node environment

For Node js, I use a node version manager, `nvm.` This allows me to install different versions of nodejs and switch between them from the terminal. to install nvm, you can use `brew`

```
sh brew install nvm mkdir ~/.nvm nvm install stable
```

For the node package manager, npm already comes bundled with nodejs, but sometimes I might need yarn so let's install it using brew.

```
brew install yarn
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#setup-git-and-source-control)Setup git and source control

I use Github to host all my repositories if you follow this [tutorial](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) to set up an ssh key.

Another important thing is to tell git who you are instead of getting random author details on your commit like khaled@MBP.

```
git config —global user.name "FIRST_NAME LAST_NAME."
git config —global user.email "you@domain.com."
```

You might want to install [Github hub](https://github.com/github/hub). Github hub will add some excellent features on top of git, like creating a repository from your terminal and starting a pull request directly from the terminal.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#code-editors-and-workflow)Code editors and workflow

For coding, I use mostly nvim and tmux because I love seeing everything in one window, something like this: ![terminal](https://images.ctfassets.net/3bc97k4uk5q7/6WHnvv5AaXaiQrNNGE0IXJ/74b00c40b683e778385170820ef8600b/Screenshot_2021-01-18_at_21.41.20.png)

And I know I know vscode has an integrated terminal. With tmux, you can do more like zooming in on panel quickly do a task and zoom back and switch between multiple projects quickly using sessions inside the same terminal window.

You can find all my nvim, tmux and coc configs [here](https://gist.github.com/Khaledgarbaya/420d680115988e3fb12313fff7afbb85) there should be enough comments to explain things.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#extras)Extras

If you have an external monitor that is not supported officially by Apple, you can't control your monitor's brightness, contrast, or volume. Luckily there is a utility that you can install to fix that.

```
brew install --cask monitorcontrol
```

I also use [Alfred](https://www.alfredapp.com/), a productivity App for mac. You can keepo your Alfred settings in sync between multiple computer using Dropbox, [here's how to do it](https://www.alfredapp.com/blog/productivity/keep-in-sync-using-dropbox-with-alfred/)