Setup from scratch your new MacBook for Development
Tags: macos, setup, development, webdev
Published: 2022-05-29 06:55:06

---
title: Setup from scratch your new MacBook for Development
published: true
description: How to set up your new MacBook from scratch for development. It includes some of my suggestions for tools, fonts, and applications.
tags: macOS, setup, development, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4z3xqo9lhhqcku5e3rwx.png
---
Today, I received my new MacBook, and I started to install applications and software for local development.
My typical development stack is based on PHP and JavaScript, but I'm learning also Go Lang and Rust.

I'm a macOS user for a decade, and I have my software list, but starting from scratch, allows me to ask myself if I should review my software list. For example, at the very beginning, I used _Terminal.app_ as a console application, then I switched to iTerm2 (and it is great), but I would like to investigate if it is still the best option, today in 2022.

I would like to share the first applications or the first steps that I made with my new MacBook.

## Table Of Contents

* [Operating System: Upgrade the Operating system](#upgradeos)
* [Browser: Brave](#brave)
* [Package/Application management: Homebrew](#homebrew)
* [Git/Source code management: Git](#git)
* [Console/Terminal application: Warp](#warp)
* [Shell extension: Oh My Zsh](#ohmyzsh)
* [Editor: Visual Studio Code](#vscode)
* [Font: JetBrains Mono](#font)
* [Node Version Manager: NVM and Node 18](#nvm)
* [PHP 8.1](#php)
* [PHP Package manager: Composer](#composer)
* [Serving your local Web projects: Valet](#valet)
* [Managing Git repositories: GitHub Desktop](#github)


## Upgrade the Operating System <a name="upgradeos"></a>

In "_System Preferences_" there is the section "_Software Update_".
Be sure that your Operating System is updated.


![Update macOS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpbxn2s8vios9lhgnlyj.png)

## Install Brave Browser <a name="brave"></a>

This is a personal choice. Someone prefers Safari, someone else prefers Mozilla Firefox. Personally, I used Chrome just because I'm more familiar with the "Developer Tools".
In the latest weeks, I'm trying Brave because it is designed to respect the privacy of the end user. Under the hood it uses Chromium, so the same engine as Google Chrome.

**Website**: https://brave.com/

## Install HomeBrew <a name="homebrew"></a>

My suggestion is to install it as soon as possible Homebrew, because it helps with some dependencies (for example it installs automatically Xcode Command Line tools).
Xcode Command Line tools are the most-needed utilities for software development.
And it is very useful later for installing PHP and some other tools like web server etc.

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
The execution of the command will prompt for the administrator password. You need to insert your password.

Once you installed Homebrew you need to configure correctly environment variables:

```
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
```

**Website**: https://brew.sh/

If you need some "inspiration" about which packages/applications you would like to add to your new Macbook, James suggested me take a look at his Brewfile. So I'm going to share it with you all as well https://github.com/jwtodd/miscellany/blob/develop/Brewfile
Reference: https://twitter.com/jwtodd/status/1531529092998176768



## Install Git <a name="git"></a>

The first package I installed with HomeBrew is Git. Why? Git is already included in Xcode Command Line Tools but I prefer to have installed the Git shipped with HomeBrew, it is most updated. This is a personal choice, but if you want to have Git command continuously updated, probably you could consider installing the HomeBrew version

```sh
brew install git
```




## Install a new Terminal: Warp  <a name="warp"></a>

For the console app, in my previous MacBook, I used iTerm2. It is a great application, but some Twitter friend of mine suggested Warp.

So I decided to try and install Warp.

![Warp Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89qe5k0vkugkz6voy2gd.png)

{% embed https://www.youtube.com/watch?v=T7R8lvvBgOI %}

**Website**: https://www.warp.dev/

## Shell extension: Install Oh My Zsh  <a name="ohmyzsh"></a>

Probably if you are using a fresh new installation of macOS Monterey (12), you have _zsh_ as default shell application. There is a great project named _Oh My Zsh_ that extends the functionalities of _zsh_ providing some functions, helpers, and configurations.

To install _Oh My Zsh_:

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

Website: https://ohmyz.sh/

## The editor: Visual Studio Code <a name="vscode"></a>

One of the most popular editors is Visual Studio Code.

**Website**: https://code.visualstudio.com/

## The Font: JetBrains Mono <a name="font"></a>

I suggest you download and install a Font Fixed Width like https://www.jetbrains.com/lp/mono/

Jumping back to the Visual Studio Code configuration, my typical setup for fonts is:

```json
{
    "workbench.colorTheme": "Default Light+",
    "editor.fontFamily": "JetBrains Mono, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontSize": 18,
    "editor.lineHeight": 1.6
}
```

**Website**: https://www.jetbrains.com/lp/mono/

## Install Node via NVM <a name="nvm"></a>

Typically, I use a Node Version Manager to install multiple versions of Node. Because in some projects you need Node 16, in some others Node 14, and so on.
To install NVM (the version manager):

```shell
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
```

Now, once you have the version manager, you have to reload the shell, and then you can install the latest version of Node:

```shell
nvm install node
```

Now, you can use your latest version of Node.

![Node Version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmukg6gdzzuuir83c5or.png)

**Website**: https://github.com/nvm-sh/nvm


## Install PHP 8.1 via Homebrew  <a name="php"></a>

My suggestion is to install PHP via Homebrew, because Homebrew is great for managing dependencies needed by PHP, and useful for example if you want to install a PHP module. Installing PHP via _brew_ command:

```
brew install php
```

It will install the latest version of PHP (8.1) with some dependencies like: apr, ca-certificates, openssl, apr-util, argon2, aspell, m4, autoconf, brotli, gettext, libunistring, libidn2, libnghttp2, libssh2, openldap, rtmpdump, zstd, curl, libtool, unixodbc, freetds, libpng, freetype, fontconfig, jpeg, giflib, imath, openexr, libtiff, webp, jpeg-xl, libvmaf, aom, libavif, gd, gmp, icu4c, krb5, libpq, libsodium, libzip, oniguruma, pcre2, readline, sqlite and tidy-html5.

The PHP module (for Apache) is located in: /opt/homebrew/opt/php/lib/httpd/modules/libphp.so

The ini files for PHP are located in:
/opt/homebrew/etc/php/8.1/


![PHP 8.1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4fopvesnax4wyubrl8x.png)

**Website**: https://www.php.net/

## PHP Package manager: Composer <a name="composer"></a>

I suggest you to install the "standard de facto" package manager for PHP named _Composer_. My suggestion is to install it globally, in a global directory.

- how to download Composer: https://getcomposer.org/download/
- how to install globally Composer: https://getcomposer.org/doc/00-intro.md#globally

If you copy composer binary into /usr/local/bin remember to:
- check if bin directory in /usr/local exists (if not created it with
```shell
sudo mkdir -p /usr/local/bin
```
- move the binary
```shell
sudo mv composer.phar /usr/local/bin/composer
```
- add /usr/local/bin in your PATH environment. For example appending in your ~/.zshrc 
```shell
export PATH=$PATH:/usr/local/bin/
```

## Serving your Web projects with Valet <a name="valet"></a>

If you are a Web Developer, probably you have multiple projects on your local machine, and you want to expose them via HTTP, for example:
- Project 1, stored in a directory Sites/project1, served locally as http://project1.test
- Project 2, stored in a directory Sites/project2, served locally as http://project2.test
- Project 3, stored in a directory Sites/project3, served locally as http://project3.test
- ...

To achieve that, you need to configure correctly a web server (Nginx) and a tool for resolving your local hostnames (dnsmasq).
Valet is a tool that can do all this stuff for us.

Valet configure and install tools for you, like:
- Webserver: Nginx for serving files
- PHP / PHP-FPM: you already have installed PHP from previous steps but Valet will configure PHP to be used with Nginx via FPM
- Dnsmasq: for resolving locally your local domains name *.test (project1.test, project2.test etc)


```
composer global require laravel/valet
export PATH=$PATH:~/.composer/vendor/bin
valet install
```


Now you can instruct Valet for serving all directories included in a specific directory. In my case I have _Sites_ directory where I have all my projects

```
mkdir Sites
cd Sites/
valet park
```

![Valet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64f5u7v6lzx337akjb00.png)

So, if you will have a directory Sites/mysite , thanks to Valet (that will use dnsmasq and nginx under the hood) a hostname http://mysite.test will be exposed locally.

Valet is more powerful than this, you can expose HTTPS, you can be more flexible in the configuration of your directory (not limited to the Sites directory) etc. 

**Website**: https://laravel.com/docs/9.x/valet

## Managing Git repositories: GitHub Desktop <a name="github"></a>

I'm mainly using GitHub for my side open source projects.
I'm using _git_ on the command line. But sometimes I would like to have a GUI for some operations. In the past (so far away) I used GitX, in the last 2 years I'm using GitHub Desktop (but you can use it with git repository in general, like Gitlab or Bitbucket).

**Website**: https://desktop.github.com/


## Feedback
I know, this is just a first, initial list of a wider set of tools that a developer needs. But if you think that I missed some very important tools, please let me know in the comment!
I will be super happy to try it and add them to this list.

Thank you!