How to Setup your MacBook Air M2 for Software Development
Tags: macbook, sotwaredevelopment, webdev, setup
Published: 2022-11-07 10:10:12


![Macbook setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbmveyaipxipxv887wfk.png)

Here is how I setup my 2022 MacBook Air M2 for software development. I'll be mostly using my laptop for building web applications using React, and Node and mobile applications using flutter.
<br/>

Follow these steps once you are done with your standard Macbook Account Setups.
(Make sure to add a stronger password for your iCloud account if your creating a new Apple ID, also don't forget to check the box "<u>Allow any Apple ID to reset this password</u>" on **Create Computer Account Screen**) 
<br/>

[FYI: Whenever in this article I mention about downloading a software from somewhere if there's an option to download specific version for Apple Silicon / Mac with apple chip / ARM based go for that version other than the Universal once for better work with your new **M1/M1 Pro/M1 Max/M2** machine]

Now let's get into business.

## 1. Installing a Browser

My favourite browser for web development is chrome, head on to https://www.google.com/chrome/ from safari and install Chrome.

<u>Install these useful chrome extensions while your at it</u>

1. [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
2. [JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh)
3. [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
4. [Video Speed Controller](https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk)

The last one can be very helpful if your someone who watches a lot of tutorials on Youtube or some other platform, you can increase your playback speed more 2x

You can also try [firefox](https://www.mozilla.org/en-US/firefox/mac/), [brave](https://brave.com/download/) or many other browser options out there, I just keep it minimal with just Safari and Chrome.

<br/>
## 2. Homebrew

Homebrew is a must have tool if your a developer on a Mac, inorder to install Homebrew first open your terminal and run the command 

```bash
git
```
This will open a prompt asking you to download and install the Command Line Developer Tools, if you haven't already installed it. Go ahead and install this. once it is ready run the following command.

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

Once this command is executed there will be 2 commands at the end of log that you should run in order to use the brew command.

now go ahead and try using brew by installing `wget` a very useful package for MacOS

```bash
brew install wget
```

<br/>
## 3. Install iTerm2

iTerm2 is a very popular terminal app for MacOS, you can go ahead an install iTerm2 from https://iterm2.com/


<br/>
## 4.Customize iTerm2 with ohmyzsh and powerlevel10k

### a) Install ohmyzsh

Once your done with the iTerm2 installation you can use `wget` that we previously installed to install ohmyzsh using the following command

```bash
sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"
```

before you begin to setup powerlevel10k you can install a very helpful ohmyzsh plugin - `zsh-autosuggestions`, I've been using this for years now it's a very good to have plugin and can save you a lot of time on searching for commands that you have previously used.

Run the following command to install `zsh-autosuggestions`

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

Add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc):

```zshrc
plugins=( 
    # other plugins...
    zsh-autosuggestions
)
```

and start a new terminal session

( *I had trouble seeing the suggestions as my terminal background color and zsh-autosuggestions forground color was similar, you can update the style of zsh-autosuggestions by adding the following line to your .zshrc file `ZSH_AUTOSUGGEST_HIGHLIGHT_STYLE="fg=10"` )

### b) Install powerlevel10k

Follow the four steps to successfully install powerlevel10k from the [official documentation](https://github.com/romkatv/powerlevel10k#getting-started)

Use [ohmyzsh](https://github.com/romkatv/powerlevel10k#oh-my-zsh) to install powerlevel10k in step 2

Before moving on to next steps head on to iTerm2 > Preferences > Profiles > Colors and play around with the colors or choose a color preset that best fits for you. (I personally use Solarized Dark with a little transparency and background blur head on to Profiles > Window to change transparancey and blur)


## 5.Setup Git Accounts
You can setup your devices ssh key to your github/gitlab accounts to easily access your git repositories

inorder to do this generate an ssh key using `ssh-keygen` command, since I have multiple github/gitlab accounts I use separate ssh keys for each account and setup an ssh config file to specify them.

generate an ssh key using the following command
```bash
ssh-keygen -f <git_username>_id_rsa
```
this will generate two files `<git_username>_id_rsa` and `<git_username>_id_rsa.pub` inside `~/.ssh` directory

copy the contents of `<git_username>_id_rsa.pub` file and add it over at your github / gitlab settings > sshkeys

if you have multiple ssh keys for different git accounts you can create a file `config` inside `~/.ssh` using
```bash
touch ~/.ssh/config
```

now open that with an editor and add a config like following
```config
# github.com/<primary_account_username>
Host github.com
        HostName github.com
        IdentityFile ~/.ssh/<primary_account_username>_github_id_rsa

# gitlab.com/<primary_account_username>
Host gitlab.com
        HostName gitlab.com
        IdentityFile ~/.ssh/<primary_account_username>_gitlab_id_rsa

# github.com/<secondary_account_username>
Host github.com-sc
        HostName github.com
        IdentityFile ~/.ssh/<secondary_account_username>_github_id_rsa

# gitlab.com/<secondary_account_username>
Host gitlab.com-sc
        HostName gitlab.com
        IdentityFile ~/.ssh/<secondary_account_username>_gitlab_id_rsa
```
You can add multiple github/gitlab accounts like this

Remember: when your cloning a repository from your secondary account you'll have to add `-sc` to your ssh url 

example: 
```bash
git clone git@github.com-sc:<repository/path>.git
``` 

Or you can simply use a single ssh key for all accounts


## 6.Install your editors

Since I'll be working on web applications and occasional mobile applications using flutter my main choice of editors is and always been **VisualStudio Code**

You can head over to https://code.visualstudio.com/download to download the latest version of VS Code

<u>Install these useful extensions while your at it</u>

1. [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
2. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
3. [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
4. [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
5. [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
6. [Simple React Snippets](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)

The theme that I've been recently using is [Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) along with [Cascadia Code](https://github.com/microsoft/cascadia-code/releases/download/v2111.01/CascadiaCode-2111.01.zip) Font

Here is how my vscode settings looks like
```json
{
    "workbench.colorTheme": "Shades of Purple",
    "workbench.iconTheme": "material-icon-theme",
    "editor.fontFamily": "Cascadia Code",
    "editor.fontLigatures": true,
    "editor.wordWrap": "on",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "terminal.integrated.fontSize": 12,
    "workbench.startupEditor": "none",
    "terminal.integrated.fontFamily": "MesloLGS NF",
    "files.exclude": {
        "**/.vscode": true
    },
    "editor.formatOnSave": true,
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.linkedEditing": true,
    "workbench.colorCustomizations": {
        "editorUnnecessaryCode.border": "#dd7aab"
    }
}
```

Lastly add the `code` commandline tool to your system by pressing **command+shift+p** and typing `install code` this will show you an option to add code command to your PATH

## 7. Install Node Ecosystem

Since different node projects might be written in different node versions, it's always safe to use something like `nvm` or `n` to manager your node versions. In this article I'll be using `nvm` to setup node

Run the following [command](https://github.com/nvm-sh/nvm#install--update-script) to install nvm
```bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
``` 

Once this is done restart your terminal to get nvm.

Once nvm is installed you can use nvm to install pretty much any node version and switch between them. Checkout the [official documentation](https://github.com/nvm-sh/nvm#usage) to see the usage of nvm

In my case I'm using node 16 at the time of writing this article for most of my projects so,
```bash
nvm install 16
```
This will also install npm for you.


## 8.Softwares for Mobile App Development

Depending on your framework of choice your process of setup might look entirely different, for those who build Native Android Apps with Kotlin/Java, Native iOS Apps with Swift/Objective C, or Cross Platform applications with Flutter can follow this section to setup your Mobile Application Development Environment.

### a) Installing X-Code

Installing Xcode is pretty easy, just head over to [App Store](https://apps.apple.com/in/app/xcode/id497799835?mt=12) and install XCode from there

### b) Installing Android Studio

Installing Android Studio used to be a pain in the ass, especially for Apple Silicon Chip users, but it's much easier now as Android Studio has recently released new Software for Apple Silicon Chip Laptop.

You can find the Android Studio [here](https://developer.android.com/studio) 

Once you've installed Android Studio, you'll have a setup wizard on the initial open, You can choose the Standard Setup on the section where it ask you to choose between standard and custom setup.

On the licence agreement page make sure to accept all the listed licence agreements before pressing Finish, this will install all the SDKs, Emulators and necessary tools for Native Android App development. Once the download and Installation of SDKs and Tools are done, your all ready to build your first Native Android Application.

### c) Flutter

The process for the installation flutter on macos is neatly documented at official [flutter website](https://docs.flutter.dev/get-started/install/macos)
Follow this to install and setup flutter

*You can install official flutter extensions on both [Android Studio](https://plugins.jetbrains.com/plugin/9212-flutter) and [VS Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter) depending on the IDE your chosing for flutter development to further simplify Flutter Development.

## 9.Database Management

Recently I've been exclusively using **PostgreSQL** for most of my projects, you can find Postgress app for MacOS [here](https://postgresapp.com/downloads.html)

Also I recommend you using [Postico](https://eggerapps.at/postico2/) or [Table Plus](https://tableplus.com/) with your Relational Databases, believe me it's a lot more easier to surf through your DB if you have tool like this.

And if your a MongoDB user I recommend you using MongoDB Atlas instead of directly installing MongoDB on your Mac, if you want to go with installing on your Mac you can follow this [documentation](https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/)

Also mongo db [compass](https://www.mongodb.com/products/compass) is now available for MacOS you can install that as well


## 10.More Apps that I Use

1. Apple has finally introduced the <u>**Weather**</u> App and <u>**Clock**</u> App on MacOS Ventura 🥳, so no more 3rd party apps for alarms, stopwatches, timers and weather reports.
2. I'm between to do apps now, Although <u>**Microsoft To Do**</u> wins the prize for my longest used To Do app.
3. If you do heavy API Testings I'd recommend using <u>**Postman**</u>, alternatively use [Insomnia](https://insomnia.rest/) or a great tool I recently found, [Hoppscotch](https://hoppscotch.io/) ( Fun fact: this used to be [Postwoman](https://postwoman.io/) )
4. [Bandwidth+](https://apps.apple.com/us/app/bandwidth/id490461369?mt=12) - For monitoring your Internet Speed right from menubar
5. [Shottr](https://shottr.cc/) a great screenshot app or alternatively use [monosnap](https://monosnap.com/download/mac) yet another great Screenshot and Screen Recording Software
6. [OpenInTerminal](https://github.com/Ji4n1ng/OpenInTerminal) - Finder Extension to open your directory inside Terminal or the code editor of your choice
7. [Rectangle](https://rectangleapp.com/) - A **free** window arragement tool
8. If you run your development apps in different environments I'd recommend you checkout [Docker](https://docs.docker.com/desktop/install/mac-install/)

Any other app that I should checkout? feel free to comment down below 👇

<br/>
<br/>
<br/>
<u>Tip of the Day 😉:</u> if you create a Directory inside your Home directory `~/.` Called "Developer" you'll get a folder with a Nice Hammer Icon, I personally use this directory for all my codes and stuff, and I Added this to finder sidebar for easy access