A Beginner's Guide to Macbook setup for web development

This is a beginner’s guide to setup Macbook for web development. The motivation for writing this guide is to help people get started with programming on a Mac, and as also a personal reference for myself. If any mistakes/updates are there; do let me know…

List of tools

• iTerm2
• Git
• nvm & Nodejs
• zsh & oh-my-zsh
• VS Code
• Google Chrome & Firefox
• A Soft Murmur

iTerm2

I highly recommend to install iterm2 which is an alternative to Mac’s default terminal.

Few settings which I find very useful

a) New Session from previous let off: iTerm Preferences → Profiles → select your profile → General tab → Working Directory section → Reuse previous session’s directory option

b) Increase window size: iTerm Preferences → Profiles → select your profile → Window tab → Settings for New Windows → Increase values of Columns (140) and Rows (40)

c) Increase scrollback limit: iTerm Preferences → Profiles → select your profile → Terminal tab → Scrollback lines → Increase the value to say 2000

d) Open files in VS Code: iTerm Preferences → Profiles → select your profile → Advanced → Semantic History → Open with editor → VS Code

Git

• Follow steps from Getting Started - Installing Git
• validate with git --version

nvm & Nodejs

Use the following cURL or Wget command:

1

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

1

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

I have written a detailed blog ‘Use NVM and .nvmrc for a better Javascript development’

zsh & oh-my-zsh

• Install oh-my-zsh now
• validate using echo $SHELL should print /bin/zsh

As of MacOS 10.15, zsh is the default over bash

VS Code

• Refer Installation
• Drag into your Applications folder before launching
• Launching from the command line
• run code . from a project directory to launch

Google Chrome & Firefox

• Google Chrome is the defacto browser now for development. React Devtools is a very useful add-on
• Firefox defacto number two browser

A Soft Murmur

• A Soft Murmur Stream ambient sounds which helps relax & focus.

Conclusion

You are all set up with your development setup. Enjoy the programming journey !

✨ Thank you for reading and I hope you find it helpful. I sincerely request for your feedback in the comment’s section.