How I setup freshly installed macOS Big Sur for Web Development

How I setup freshly installed macOS Big Sur for Web Development

"I recently do a fresh installation of the new macOS Big Sur on my old MacBook Pro so I decided to write this post, more as a step-by-step guide on how I should setup my mac for web development."


Updated as of Jan 16, 2021. I recently received my M1 MacBook Pro and set it up exactly as this post described. Pretty much all of the steps completed without any problem (except nvm taking quite long to install node because it has to compile the whole thing from source instead of using pre-built version). However, some of the npm dependencies refuse to install correctly. I will make another post to update on these soon.

While the new M1 MacBook are very exciting and are what I have been waiting to upgrade to, a configured version (e.g. with 16 GB of RAM) will take a bit more time to ship in my country.

Plus, I don't know how I feel about not being to connect multiple monitors natively. Not to mention the hardest part, deciding between an Air or a Pro...

So, to squeeze the last drop of life of my trusty, now 7 years old, 2014 top-of-the-line 15" MacBook Pro with Retina Display that is now running very slow and basically have none-existing battery life, I decided to do a fresh installation of macOS again to see if this could maybe last a few more months until the shipping time for those new MacBook's drop slightly.

Here is how I set it up!

1Password

I am a big fan of password managers and have been using 1Password even before they turn to a subscription model (good times, I know)... and no, I'm not being paid to say that.

1Password is even more powerful on Big Sur, with better OS integration, like it's iOS/iPad OS counterpart.

Naturally, it is the first app I downloaded. It will make setting up my other accounts a lot easier.

Spotify

Setting up a new machine/OS can take a while. Better put some music on!

Visual Studio Code

VS Code has been my IDE of chioce for almost everything for a while now. I'm still impress this is made by Microsoft, considering it's brother—Visual Studio Professional/Enterprise still require multiple keystrokes to comment out a line of code out-of-the-box.

I used to use the Insider version just to get Extensions and Settings sync, but those has since become generally available in the normal version of Code.

I might do another post about the extensions that I use. Honestly though, with auto-sync and stuffs, I kinda take many of them for granted.

My Terminal

I already wrote a post some time ago on how I setup my terminal. It's a bit long to put here so you should go check it out.

Connect to my Synology NAS and setup Time Machine

I have a NAS at home that I keep my backups and files shared across my PC and laptops. Since the NAS has already been setup and correctly broadcast appropriate protocols to my local network, this is just a matter of putting in credentials.

Same goes for setting up Time Machine.

Dev Tools

If you follow the How I setup my Terminal post, the basics like GIT and stuffs should already been taken care of.

Homebrew

Install Homebrew Package Manager so we can use it to install other things.

NVM and Node

I use nvm to manage my Node versions.

nvm is useful if you want to switch between multiple versions of node, maybe because each projects require different version as a dependencies.

As of Jan 16, 2021, the command I used to install nvm on macOS Big Sur is this command below:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | zsh

Once installed, you can use:

nvm install [version] 

and

nvm use [version]

to install and use a specific version of Node.

If you only going to use one version of Node or you mainly develop your app in a container (and probably don't need my help telling you how to install node), then you can just download and install Node package from the official website.

Yarn

Full Instructions

brew install yarn

I use both npm and yarn. Honestly, the performance feels about the same nowadays (I just run it and go do something else anyway). I just prefer yarn add over remembering to add -save flag to npm...

My project at work still use npm though.

Global Angular CLI

I am an Angular developer, so I will install the latest version of Angular CLI.

yarn global add @angular/cli

or

npm install -g @angular/cli

React

I'm pretty new with React but as far as I know, React doesn't really need any special CLI to be installed globally (or one exist that I should have known but don't). Well... it also depends on who you setup your React project.

Docker

I don't use Docker that much yet so I won't install it on this laptop as it cost too much battery to leave running. It is easy enough to install following this instruction though. Also, Docker still doesn't support the new Apple M1 chip in production build at the time of writting this.

Tweak Safari a bit

Enable Show full website address so I can actually see which localhost:[PORT] I am on.

While you are at that, don't forget to check Show Develop menu in menu bar, to enable developer tools.

I also disable Open "safe" files after downloading.

I also turn Show Status Bar on in View > Show Status Bar

This give you a preview of the link's URL before you click on them.

Download Chrome

While I mainly love and use Safari for day to day browsing, I sometime jump to Chrome for its amazing development tools (at the expense of reduced battery life...).

Dev Extensions

My extensions are auto-sync.

I don't have a lot installed. These are the three main ones related to developments:

Configure Finder

I like to see my status bar and path so I enable the two options in View.

You can press CMD + Shift + . to show/hide hidden files.

I also like for it to show my folders on the sidebar, as well as showing something predictable on launch (Recents annoy me cause it look disorganized).

Disable Automatic Spaces Arrangement

I hate it when macOS switch my spaces around. I like my IDE to always be in the middle space. The left space to my IDE is for testing/previewing/displaying the output of whatever I am developing. The right is for web browsing, opening stackoverflow, and referencing stuffs. Next to that will sometime be Spotify.

To prevent the OS from ruining my muscle memory, I would go to System Preferences > Mission Control and uncheck Automatically rearrange Spaces based on most recent use.

In System Preferences, go to Mission Control.
Uncheck Automatically rearrange Spaces based on most recent use so macOS won't mess with the order of your spaces.

Other Stuffs

I mainly use Todoist for my task management, so that is one of the few other programs I downloaded (it does have a very good web version, but I like to keep it a separate app so I can quickly switch back and forth between it and other apps).

Another is a journalling app called Day One that I use to keep my diary.

Also, let's not forget Zoom, because... you know... it's 2020 and quarantine... (I hope this whole thing would already be a thing of a past one day when you read this).

Others like Figma and YNAB work perfectly fine in a browser (oh the beauty of modern web!).


Written by Romson Preechawit

Hi there! I'm a typical geek, designer, developer. Love coding, design, photography, reading, and a lot more. English is not my first language so please help correct my grammar! :)

Romson Preechawit