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

1. iTerm2
2. Git
3. nvm & Nodejs
4. zsh & oh-my-zsh
5. VS Code
6. Google Chrome & Firefox
7. 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

1. Follow steps from Getting Started — Installing Git
2. validate with command `git — version`

nvm & Nodejs

Use the following cURL or Wget command:

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

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’ for more customisations.

zsh & oh-my-zsh

1. Install oh-my-zsh now
2. validate using command `echo $SHELL` should print `/bin/zsh`

As of MacOS 10.15, `zsh` is the default over `bash`

VS Code

1. Refer official Installation steps.
2. Drag into your Applications folder before launching
3. Launching from the command line
4. run command `code .` from a project directory to launch

Google Chrome & Firefox

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

A Soft Murmur

A Soft Murmur Stream ambient sounds which helps relax & focus. I personally find this very helpful and love it.

Conclusion

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

Note: This story was originally posted at my personal blog A Beginner’s Guide to Macbook setup for web development.

If you liked the above story, you can buy me a coffee to keep me energized for writing stories like this for you and to support me because as of writing this story, I’m not eligible for the Medium Partner Program.