Setup development environment on new Mac

I recently resigned from Eastern Enterprise (Ansh Systems) and submitted my official Mac in the company. I'll be joining my new company in Mumbai on 17th February so I got two weeks of free time/rest, which I needed. I also got a new Mac book air for myself. I always wanted to document setup steps for my Mac development environment and this time I got both chance and time to do so. The remaining article is about how I set up my new macOS for development/coding.

Basic setup

This part belongs to the basic setup, which is needed regardless of the work (not only coding) anyone do.

• OS Upgrade.
• iCloud
• Visual Studio code.
• Homebrew

OS upgrade

Mac OS provides free updates to the operating system. Most new Mac is updated with the latest OS. However, we still should check if a new OS update is available. If available, update OS.

This takes a lot of time to download a 4-5 GB Operating system. I generally do not skip this step but if you are in a hurry to start using your new Mac, maybe you can postpone this step for a later time.

iCloud

Apple provides a free iCloud service to Apple users. Mac comes with SSD and most are limited in disk space. There are a lot of benefits of having an iCloud account, which you can see online. Thus, setting an iCloud account is one of the very first steps I do on any Mac and highly recommend that. (If you are using first mac, create one iCloud account, its free for Apple users)

Visual studio code

This is the first piece of the program I install so that I can at least work with my markdown files and my markdown notes from git. This also means the next thing to install is git.

I use Markdown and a github repo for my notes. May be next article soon will be on managing your notes and even writing ebooks. I need it so that I can take notes while setting up my new mac. (Later same notes were converted into this article)

Git

Git comes by default with Mac but we need to install XCode command-line tools. Simply open Terminal (We will later install iTerm and o-my-zsh), type git and press enter (return). I will ask to install XCode command-line tools, please install them. It will take some time, in the meantime, we can move ahead with further things.

ITerm2

• Download it from https://iterm2.com/
• Extract Zip and run iTerm by double-clicking it.
• On the first run, it will ask to move it to the Application folder. Move it, it is a good choice.

Hot Key

A hotkey is used to show/hide the ITerm window.

• Open Preference > Keys > HotKey
• Check Show/hide all windows with a system-wide hotkey
• Click on HotKey text box to record hotkey. My hotkey is Option + Space. You can make your own unique hotkey.

Non-native window

It could be a matter of preference. I wish to open terminal with hotkey as mentioned above but when it is open, it should take 100% screen of my 13" mac. Anything smaller is too small, especially on small screen of my Macbook air 13" and when it can be shown with a hotkey, taking 100% screen is good (at least for me)

• Open Preference > General > window
• Uncheck `Native full-screen window'

Now when I open ITerm first time (After starting/restarting mac), I need to press `cmd + return` to make ITerm full screen and later use my hotkey to show/hide the ITerm.

Open in previous session folder

It is mostly useful to open a new tab/terminal in the previous folder. To do that

• Open Preference > Profile.
• Select Profile (Only one default profile available by default but it is enough for me. You may create different profiles for different needs but I prefer to keep it simple.)
• Open the General tab and select Reuse previous session's directory under Working directory.

Transparency

If we need to execute some command by looking somewhere, full-screen terminal becomes a problem. My trick is, my terminal has a transparent background. It can be done as follow

• Open Preference > Profile > Profile name (In left) > Window
• Move transparency slider towards the right but do not make it completely transparent or you will find it difficult to read the text in the terminal. Do it as per your preference.
• I keep it between 1/4th to 1/3rd and check a point where text in the terminal is clearly visible but the background can also be seen.

Now with this, we have another problem. There might be cases when we do not want transparency. In such cases, ITerm2 provides shortcut cmd + u to turn on/off transparency.

Few important shortcuts (There is a long list, just mentioning few needed while setup)

• Instant replay (Just try it, you will love it): cmd + alt + b
• Split vertically: cmd + d
• Split horizontally: cmd + shift + d
• Move between splits screen: cmd + ] and cmd + [
• New tab: cmd + t
• Switching between tabs: cmd + <tab_number>
• Close tab: cmd + w

Homebrew

My terminal setup is still not complete, I need to install and configure OMyZsh. However, before that, since my XCode command-line tools are installed, I'll first install Brew. The command might change so copy the exact command from https://brew.sh/, it must be something like (Don't copy from below, copy from website brew.sh):

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

Homebrew (aka brew) describes itself as The missing Package Manager for macOS and it is quite right. Now we will be installing some other required software with the brew.

Once the brew is installed, I'll be using brew to install a few other software. Just for an example, here is how I set up the local PHP environment on Mac.

PHP

The first thing I'll install through brew is PHP. If you are not be working on PHP, you may skip this step. The reason I use brew to install PHP is, I'd like to upgrade PHP easily in the future. More on it later. To install PHP, we first search PHP versions available with the brew.

brew search php

==> Formulae
brew-php-switcher         php-code-sniffer          [email protected]                phplint                   phpmyadmin                phpunit                php                       php-cs-fixer              [email protected]                phpmd                     phpstan

Here, we can check the latest version available (at the time of writing this article) is 7.3. Just check the latest version and run command brew install <formula_name>. Thus, our command should be brew install [email protected]

Note: I prefer to use docker for any PHP (or other) projects. However, having local PHP installed is always helpful for any quick interactive shell, test/kata. I'll never install apache/nginx, PhpMyAdmin, PHP Unit, etc on local Mac machine; just plain PHP latest version (& maybe XDebug later for code coverage reports in PHP Unit, it is useful during solving Katas/small problems).

MySQL

MySQL is also mostly used with backend programming. Although I prefer MySQL in Docker, I install MySQL locally for some tests. It can be installed through Brew with command brew install mysql

Composer

Again, if you do not work on PHP, you may skip this step. Composer is a PHP dependency manager and since I extensively work on PHP, I need the composer installed locally.

As described at getcomposer.org, we need to run a few commands. I'm not giving commands below as I recommend to copy the latest commands form the above link.

OhMyZsh

Before installing OhMyZsh, we must have zsh installed. Most mac comes with zsh installed so we generally need not install zsh. To confirm:

zsh --version

If the output is 5.7 or greater, zsh is installed and have an acceptable version (I got 5.7 on my new Mac). If it is an older version or not installed, it can be installed it through brew using command brew install zsh

The next step is to confirm zsh is out default shell. Check the output of command echo $SHELL. If the output is /bin/zsh skip next step otherwise change shell with command

chsh -s /bin/zsh

Now open a new tab and run echo $SHELL again.

Now we have prerequisite zsh installed and it is default shell. Install OhMyZsh with the command given at OhMyZsh Github page. The command is something like (Don't copy from here, copy from above link)

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

This will install OhMyZsh and create a file ~/.zshrc (~ represents home directory. It is /users/<yourname>). Open .zshrc and check the line ZSH_THEME="robbyrussell". Here robbyrussell is the default theme. You can find available themes in themes wiki page. Check the theme you like most and change the above line. I personally prefer theme ys so I updated the above line as ZSH_THEME="ys".

Also, check the theme agnoster. It was my favourite theme for a long time and still a favourite theme of many developers. However, I stopped using it because due to highlight colours, focus does not go to actual command and in the longer run, it do not feel easy on my eyes. If you spent short duration on the terminal and like colours on the terminal, it is a very good choice. I still sometimes switch back to agnoster for shorter periods.

Fira Code

As developers, we spent several hours a day, in front of code. Thus, using a font that is easy on our eyes and suites us best is important. Everyone might have their own choice of fonts. My personal preference for font, while coding, is `Fira Code`. It is a monospace font, open-source and available freely. Even though the font is very important, I do not prefer to pay for purchasing any code specific font and Fira code works perfectly fine for me.

Just check its github page, you might also like it. It also has good installation instructions so I assume you can install it, in case you like it.

If you already have your favourite font, just stick with it and move ahead.

Touching up shell

Now a few things I like to do more on my Bash/shell/iTerm/Zsh/OhMyZsh.

Font size

By default, the terminal font size is too small in mac (At least for me). Let's make it more readable

• Open iTerm
• Press Cmd + , to open preference.
• Go to Profile > Default (or whatever profile you made) > Text
• Under font:

1. Change font to your preferred font (I selected Fira Code)
2. Change font size as per your preference (I use font size 18)
3. Spacing: Whatever seems best to you. I prefer some gap between two lines so set horizontal space between lines from 100 to 150.

Line numbers with vim

I frequently open code with Vim editor and want to have line numbers on any file (mostly code) I open. To do that, open your ~/.vimrc file (If not present, which is obvious at this moment, create it) by running command vim ~/.vimrc.

Now add a line `set number`. If you are not sure how to do it, here is the way:

•  Press `i` to go to insert mode
• Type `set number`.
• Press `esc` to go back to normal mode
• Type `:wq` (It will display at the bottom of the screen) and press enter to save and exit.

Now when you open vim, you will find line numbers on the left, enjoy! If you want to temporarily disable numbers (I never need to do it, even line numbers in text files is no harm), you can give the command :set nonumber to disable or :set number to enable line numbers. I set it permanently in .vimrc because I nearly always need line numbers.

Working with vim is really great but it will take some time to learn it. However, it is really worth it, especially if you can do blind typing (Which is also worth practicing for a coder; we type a lot). If you want to give it a try, just run command vimtutor and in 2-3 hours, you will learn the basics of vim. From there, you will just get better with time.

Jetbrains toolbox

I've active subscriptions of PHP Storm (PHP and JavaScript), PyCharm (Python), and GoLand (Go Lang). I also use community/free version of IntelliJ Idea (Java), and Android Studio. Managing these IDE and keeping them latest is very easy with JetBrains Toolbox. Just install from the installer available at jetbrains.com.

Once the Jetbrains toolbox is installed, it is very simple to install/uninstall/update any of the JetBrains IDE.

Node JS

Node JS is nowadays mandatory for any web developer, even if you just work on frontend frameworks like Angular, React, Vue etc. Problem with Node JS is, it has two versions; LTS (Long term support - even-numbered versions) and the latest version (Odd-numbered versions). We might need to switch between them and sometimes, for an older project, might even need an older version of Node JS. Managing them could soon be a mess.

Thus, I prefer using NVM (Node Version Manager) to install Node JS. Installation instruction for NVM are given at its github page. The command is similar as follow (But copy the latest command from above Github page)

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

Using NVM (Node Version Manager)

Try the command node -v. You will get an error, suggesting node JS is not installed. If you are not setting a new mac or node is already installed, uninstall node first.

Run the command nvm install node to install the latest version of Node JS. Now run again node -v, the latest version of Node JS is installed.

Now run the command nvm install --lts to install the latest LTS version.

Running nvm list will tell the installed version and currently running version (`->` symbol).

To change Node JS version, run nvm use <version number> for example nvm use v13.8.0

With Node JS installed, npm will also be working. However, please note, if you install something globally through npm and change node version, you will again need to install the global dependency. Thus, global dependency for different node versions is also separate, which is ideally great and my preferred setup.

Docker

Last but not least, docker is my preferred development environment. This is not a docker tutorial, we will just install Docker for Mac while Mac setup for now. I'll later come up with further articles on how to setup docker for PHP and Node JS development.

Go to https://www.docker.com/get-started and click on Download desktop and Take a tutorial. It will ask you to log in to your docker hub, if you don't have one, create it. Once logged in, download Docker for Mac. It is a large package and will take some time. Once downloaded, just click on the installer to install Docker for Mac.

Final thoughts

With this, my basic setup for development on macOS is done and it took around 3 hours including all download times (Including MacOS update, after that, I did all downloads in parallel). There are tons of other things that we need to do for the exact programming language stack/project but they will be different for different developers and happens when the need arises. Thus, I'm not covering them here.

As and when I get time, I'll come up with more detailed setup instruction, mainly for Vim, Docker for PHP and JavaScript development, etc. Please let me know in the comments if you want to see more detailed setup/usage on any particular tool.