Table of contents
Open Table of contents
Introduction
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.
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 “Allow any Apple ID to reset this password” on Create Computer Account Screen)
[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.
Install these useful chrome extensions while your at it
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, brave or many other browser options out there, I just keep it minimal with just Safari and Chrome.
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
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.
/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
brew install wget
3. Install iTerm2
iTerm2 is a very popular terminal app for MacOS, you can go ahead an install iTerm2 from https://iterm2.com/
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
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
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):
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
Use ohmyzsh 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
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
touch ~/.ssh/config
now open that with an editor and add a config like following
# 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:
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
Install these useful extensions while your at it
- Auto Close Tag
- Auto Rename Tag
- GitLens — Git supercharged
- Material Icon Theme
- Prettier - Code formatter
- Simple React Snippets
The theme that I’ve been recently using is Shades of Purple along with Cascadia Code Font
Here is how my vscode settings looks like
{
"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 to install nvm
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 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,
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 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
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 Follow this to install and setup flutter
*You can install official flutter extensions on both Android Studio and VS Code 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
Also I recommend you using Postico or Table Plus 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
Also mongo db compass is now available for MacOS you can install that as well
10.More Apps that I Use
- Apple has finally introduced the Weather App and Clock App on MacOS Ventura 🥳, so no more 3rd party apps for alarms, stopwatches, timers and weather reports.
- I’m between to do apps now, Although Microsoft To Do wins the prize for my longest used To Do app.
- If you do heavy API Testings I’d recommend using Postman, alternatively use Insomnia or a great tool I recently found, Hoppscotch ( Fun fact: this used to be Postwoman )
- Bandwidth+ - For monitoring your Internet Speed right from menubar
- Shottr a great screenshot app or alternatively use monosnap yet another great Screenshot and Screen Recording Software
- OpenInTerminal - Finder Extension to open your directory inside Terminal or the code editor of your choice
- Rectangle - A free window arragement tool
- If you run your development apps in different environments I’d recommend you checkout Docker
Any other app that I should checkout? feel free to comment down below 👇
Tip of the Day 😉: 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
