Setting up your Mac for web development

dheerajmurali

Dheeraj

Posted on August 6, 2020

Setting up your Mac for web development

I’m just putting this here so that I can follow it as a checklist when setting up mine and it might help you guys too. I’m a web developer, focusing on javascript and node.


Getting Started

Once you are done booting up and going through the usual set up, make sure your mac is running the latest macOS version and you have Xcode downloaded from app store.

Tools

Homebrew

Homebrew is a package manager for mac, which helps you install your apps via comand line.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Enter fullscreen mode Exit fullscreen mode

once installed, give it an update.

brew update
Enter fullscreen mode Exit fullscreen mode

Node.js

Download node.js form their website or install it through nvm. It’s better not to use homebrew for just this one. So you can easily switch between node versions.

Download nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

Ensure that nvm was installed correctly with nvm --version, which should return the version of nvm installed.

Install the latest LTS version with

nvm install --lts
Enter fullscreen mode Exit fullscreen mode

Git

You should probably get git when you install Xcode, or you could simply run git from the Terminal the very first time.

git --version
Enter fullscreen mode Exit fullscreen mode

If it is not already installed, it will prompt you to install it. You can also get a macOS installer from the git website.

or with Homebrew

brew install git 
Enter fullscreen mode Exit fullscreen mode

Additionally, you can download the GUI for GitHub from here. If thats your thing.

Window management tool

MacOS never had a built in window management solution as good has windows does, but you can get away with it with 3rd party apps like Rectangle, download from their website or with brew.

brew cask rectangle
Enter fullscreen mode Exit fullscreen mode

Applications

Visual Studio code

It is my got to text editor for all things web, it got plenty of features, and you can always find an extension for almost anything.

Download it from here or

brew cask install visual-studio-code
Enter fullscreen mode Exit fullscreen mode

Browsers

You’ve got Safari pre installed, and since its web development, you’d probably need to check you website in different browsers. So, lets get the rest of them...

with brew;

brew cask install google-chrome firefox opera
Enter fullscreen mode Exit fullscreen mode

Yarn

An alternative to npm.

brew install yarn
Enter fullscreen mode Exit fullscreen mode

Spotify

Well, what is life without some music.

brew cask install spotify
Enter fullscreen mode Exit fullscreen mode

ImageOptim

ImageOptim helps you optimise an compress images for your website, download it form here, or

brew cask install imageoptim
Enter fullscreen mode Exit fullscreen mode

For messaging and communications

Microsoft Teams for work and WhatsApp for friends and family.

brew cask install microsoft-teams whatsapp
Enter fullscreen mode Exit fullscreen mode

Settings and configurations

General

  • Try dark mode

Dock

  • Enable automatically hide and show doc.
  • Enable Show indicators for open applications
  • Disable show resent application in doc (it gets really messed up soon)

Users & Groups

  • Add “Rectangle” to Login items

Security and Privacy

  • Enable Require password immediately after sleep
  • Turn on FireVault for ssd encryption
  • Turn on Firewall

Keyboard

  • Disable “Correct spelling automatically”
  • Disable “Capitalize words automatically”
  • Disable “Add period with double-space”

Display

  • Make sure Night Shift is off

Sharing

  • Change computer name
  • Make sure all file sharing is disabled

Setting up the apps

VSCode

Install the extensions and themes

lastly,

To add code . command to open VSCode from mac Terminal. Press CMD + SHIFT + P and click "Install code command in PATH".


Thats pretty much it for now, hope it helped your process.
Let me know what are your go to apps and tools..

💖 💪 🙅 🚩
dheerajmurali
Dheeraj

Posted on August 6, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related