M1 web development setup

Tools
Updated: Aug 11, 2022

I just picked up a MacBookPro M1.

I held out for as long as I could. But with these summer temperatures, no amount of fan spinning could keep my MacBookPro 2015 from overheating and griding to a hault. It’s been a valiant servant over the years, but sadly its time has come.

My aim with this M1 is to keep it as lean as possible. I’ve refrained from copying over my entire machine. Instead, most of it’s gone on to an external hard drive. Only projects I’m actively working are in the cloud with Sync or Github.

App-wise, I’ve only installed the absolute essentials – design and web development tools that I use on a daily basis. Let’s hope I can keep it that way and make this beast last for another 7 years, if not longer.

For those who are interesting, here are the steps I went through to get set up, including the apps I’ve installed and my general settings.

Steps #

Install Homebrew #

The Homebrew package manager allows you to install macOS software via the command line.

Install it by pasting the following command in the terminal.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

You will be asked for your password.

Checking for `sudo` access (which may request your password)...
Password:

Type in your macOS user account password. When you type, nothing will show on screen for security. Once you’ve typed your password, hit enter.

When Homebrew finishes installing, check for any warnings.

If you are using an M1 you will probably see the following warning:

Warning: /opt/homebrew/bin is not in your PATH.

Follow the instructions in the “Next steps” section to add Homebrew to your PATH:

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/harrycresswell/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Finally, make sure everything is up to date.

brew update

Install shell applications #

Install Shell applications using Homebrew.

brew install git
brew install go
brew install hugo
  • git (version control)
  • go (programming)
  • Hugo (static site generator)

Install GUI applications. #

Install GUI applications using Homebrew.

Use Homebrew Formulae to find out if there is a cask available for the app you want to install.

brew install --cask affinity-photo
brew install --cask affinity-designer
brew install --cask bitwarden
brew install --cask figma
brew install --cask firefox
brew install --cask glyphs
brew install --cask hyper
brew install --cask imageoptim
brew install --cask nordvpn
brew install --cask numi
brew install --cask obsidian
brew install --cask rectangle
brew install --cask signal
brew install --cask slack
brew install --cask spotify
brew install --cask sync
brew install --cask tutanota
brew install --cask typora
brew install --cask visual-studio-code
brew install --cask vivaldi

Apps without a cask to install manually:

Setup shell with Oh My Zsh #

Install Oh My Zsh to configure Zsh shell with sensible defaults.

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

Install Node with nvm #

Use Node Version Manager (nvm) to install Node.js. This will allow you to switch you version of Node easily.

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

Now close your terminal, then reopen to start nvm.

Install #

Install the latest version of Node.

nvm install node

Make sure you’re using nvm version of node.

nvm use node

Confirm you’re using the latest verison of nvm, Node and npm.

nvm --version && node -v && npm -v

Update #

If you need to update nvm in the future, use the following command:

nvm install node --reinstall-packages-from=node

Change version #

Install new version.

nvm install xx.xx

Switch to new version.

nvm use xx.xx

Git configuration #

Set up your global name and email.

git config --global user.name "Firstname Lastname"
git config --global user.email you@example.com

Set default branch name to main instead of master.

git config --global init.defaultBranch main

Check your global configurations.

git config --list
user.name=Firstname Lastname
user.email=you@example.com
init.defaultBranch main

Check specific values using the following command:

git config <key>

For example, to check your username:

git config user.name
Firstname Lastname

You can also use the following command to open and edit your global configurations, directly from your git config file.

open ~/.gitconfig

[user]
  name   = Firstname Lastname
  email  = you@example.com
[github]
  user   = username
[alias]
  a      = add
  ca     = commit -a
  cam    = commit -am
  cm     = commit -m
  s      = status
  p      = push
  pom    = push origin master
  puom   = pull origin master
  cob    = checkout -b
  co     = checkout
  fp     = fetch --prune --all
  l      = log --oneline --decorate --graph
  lall   = log --oneline --decorate --graph --all
  ls     = log --oneline --decorate --graph --stat

GitHub CLI and SSH keys #

The Github CLI allows you to interact with Github from the command line.

Install it using Homebrew with the following command:

brew install gh

Now login by copy and pasting the following command into the terminal.

gh auth login -s 'user:email' -w

The Github CLI will ask you several questions.

? What is your preferred protocol for Git operations?

With the arrows, choose SSH and press Enter. SSH is a protocol to log in using SSH keys instead of the well known username/password pair.

Generate a new SSH key to add to your GitHub account?

Press Enter to ask gh to generate the SSH keys for you.

If you already have SSH keys, you will see instead: 

Upload your SSH public key to your GitHub account?

With the arrows, select your public key file path and press Enter.

Enter a passphrase for your new SSH key (Optional)

Then press Enter to leave this blank. Unless you want to enter a passphrase each time you commit and push changes to GitHub. In which case, enter a passphrase of your choice.

Title for your SSH key

Choose something descriptive like MacBookPro (14-inch, 2021).

You will then see the following, with a unqiue one-time code:

! First copy your one-time code: 7270-8A57
Press Enter to open github.com in your browser...

Copy your one-time code, then press enter.

Your browser will open and ask you to authorize GitHub CLI with your Github account.

Once your account is authorized, you will see something like this in your terminal:

Authentication complete.
- gh config set -h github.com git_protocol ssh
✓ Configured git protocol
✓ Uploaded the SSH key to your GitHub account: /Users/harrycresswell/.ssh/id_ed25519.pub
✓ Logged in as harrycresswell

You can check your connection using the following command:

gh auth status

If your configured and connected correctly, you will see the following:

github.com
  ✓ Logged in to github.com as harrycresswell (oauth_token)
  ✓ Git operations for github.com configured to use ssh protocol.
  ✓ Token: *******************

macOS settings #

  • System Preferences:
    • Siri: - Disable Ask Siri
    • Dock & Menu bar:
      • Remove all apps except Finder, System Preferences and Trash
      • Reduce Dock size
      • Turn on Automatically hide and show the Dock
      • Turn off Show recent applications in Dock
      • Battery > Turn on Show percentage
    • Notifications:
      • Turn off all notifications
    • Security & Privacy:
      • FileVault > Turn FileVault On
      • Apps that can control computer:
        • Privacy > Accessibility > Add Rectangle
        • Privacy > Camera > Add browser
        • Privacy > Microphone > Add browser
        • Privacy > Screen Recording > Add browser
    • Touch ID:
      • Enable
    • Bluetooth:
      • Pair Trackpad, Keyboard and Airpods Pro
    • Trackpad
      • Increase Tracking speed
    • Keyboard
      • Text
        • Disable Capitalise word automatically
        • Disable Add full stop with double space
        • Disable Use Smart quotes and dashes
      • Shortcuts
        • Enable Use keyboard navigation to move focus between controls
    • Displays
      • Night Shift > Sunset to Sunrise
    • Sharing:
      • Disable file sharing
      • Update Computer Name
  • Finder:
    • View > Show status bar
    • View > Show path bar
    • Sidebar:
      • Favourites
        • Disable Recents, Documents, Movies, Music and Pictures
      • General
        • Show these items on desktop:
          • External Disks
          • CDs, DVDs and iPods

Application settings #

Here are my settings for the applications you’re most likely interested in.

Visual Studio Code #

Press CMD + SHIFT + P, then search “Install code command in PATH” and click to start using code . to open files from the terminal in VSCode.

VS Code has a feature called Settings Sync which you can use sync your VSCode settings, keybindings and extensions with your new device. It makes the transition from one machine to another seamless.

Extensions #

Hyper #

To edit Hyper theme and settings, open the preferences file in VSCode.

code ~/.hyper.js

Then update the exports object with the following config and plugins.

module.exports = {
	config: {
		...
		fontSize: 13,
		...
		hyperBorder: {
			borderColors: ['#fc1da7', '#542bff'],
			borderWidth: '4px',
			animate: true,
		},
		...
	},
	...
	plugins: [
		'hyper-night-owl',
		'hyperborder',
	],
	...
};

Plugins #

Vivaldi #

Create an account with Vivaldi on your previous machine, if you haven’t already.

From your new machine, head to Preferences > Sync to sign in to your account and sync all your settings.

  • Preferences:
    • Keyboard
      • Full Keyboard Access
        • Enable Inherit from System Preferences
        • Enable Focus all controls
      • Keyboad Shortcuts
        • Enable Keyboard Shortcuts
    • Search
      • Set Default Seach Engine to DuckDuckGo
    • Webpages
      • Enable Smooth Scrolling
      • Webpage Focus
        • Enable Focus All Controls and Links

Browser extensions #

Summary #

How you setup a new machine will always be a personal thing. But nonetheless, I hope you find some of this helpful for your own setup.

This is actually the first time I’ve bothered to document this process. Seems kinda bizzare now I think of it, as I’m sure–like with most the words I write down–I’ll be grateful I did, when I return to them later.

After all, setting up a new machine for web development can be a dauting process. But with a roadmap to follow, the process should be a whole lot easier.

Whilst much of my setup was inspired by my previous one, I have to shout out the folk below. To some extent, their setups have inspired my own.

Resources #


Reply by email

Monthly Newsletter

Once a month I curate a newletter for designers and developers interested in static sites, CSS and web performance. Check out past issues to get an idea.

Product