Migrating to a new Mac

Published:

Setting up a new Mac is painful. Here are some of the things I have to do:

  1. Install all 47 applications I use every day.
  2. Provide the right credentials for each application.
  3. Change macOS default settings to the ones I like.
  4. Set up coding configurations.
  5. Move files from the old Mac to the new one.

I estimate at least a three day’s worth of work (downloading things and waiting for them to download 😴) if I have to install everything manually.

But I was able to set my computer up in hours (automatically) thanks to dotfiles.

What are dotfiles?

Dotfiles is a collective name for all files that begin with a dot. Examples include:

  • .eslintrc
  • .gitignore
  • .editorconfig

To the programming community, dotfiles are more than a name for files that begin with a dot. They refer to startup scripts that help you set up new computers.

(I have no idea why programmers call startup scripts dotfiles. Maybe because dotfiles sound sexier? ¯_(ツ)_/¯).

For clarity purposes, I’ll use these terms:

  1. Dotfiles: files that begin with ..
  2. Startup scripts: scripts that help set up the computer.

What dotfiles do

A dotfile is used to configure how applications behave. For example:

  1. .gitconfig and .gitignore changes how git behaves.
  2. .eslintrc changes how ES Lint behaves.
  3. .editorconfig changes how many text editors behave.

These files live on your computer’s $HOME directory. If you want to see what dotfiles you have, simply open up your Terminal app and type ls -la. You’ll see a list of dotfiles.

Here’s what mine looks like now:

Results from running ls -la in my $HOME directory

Note: It’s okay if you don’t know what dotfiles are. They’re not important for this article. I just had to explain the difference between dotfiles and startup scripts 😉.

What’s more interesting is the next part: Startup scripts.

My Startup script

If you get a new computer, you can run a startup script to:

  1. Download applications
  2. Change default settings

My startup script (aptly named: Dotfiles ¯\_(ツ)_/¯) helps me install 31 out of the 47 applications I use. This saves me a huge ton of work!

It also helps me install commands that I use regularly on my command line. Examples include: svgo and http-server. (Note: These “commands” are generally called command line interfaces, or CLIs).

The startup script does it through three files:

  1. Brew.sh
  2. npm.sh
  3. .macos

Brew.sh

Brew is a shorthand for Homebrew. Homebrew lets you download packages onto macOS or Linux computers through the command line.

It can help you install useful things like:

  1. Node
  2. PHP
  3. Git
  4. Openssh

It can also help you install applications. Here’s a list of 31 applications I install with Homebrew.

  1. 1password
  2. Alfred
  3. Beamer
  4. Dash
  5. Dropbox
  6. Firefox
  7. Firefox Nightly
  8. Chrome
  9. Chrome Canary
  10. Grammarly
  11. Iterm2
  12. Kap
  13. Marked
  14. Messenger
  15. MongoDB Compass
  16. Moom
  17. Mplayerx
  18. Notion
  19. Obs
  20. Odrive
  21. Postman
  22. Sketch
  23. Skitch
  24. Skype
  25. Slack
  26. Spotify
  27. Telegram
  28. Textexpander
  29. Tower
  30. Visual Studio Code
  31. Wechat
  32. Whatsapp

npm.sh

npm lets you download JavaScript packages onto your computer. Many frontend development toolchains rely on npm. It comes installed with Node, and I installed Node with Brew.

After running brew.sh, I configured my npm and install additional CLIs I use frequently. These include http-server and svgo that I mentioned above.

.macos

.macos helps you set up a new Mac with sensible default settings.

Here, I copied Mathias Bynens .macos script and modified it to my personal preferences. You may want to refer to his version if you intend to build your own .macos file.

Symlinked dotfiles

(Note: This is an advanced section for people who use dotfiles).

Earlier, I mentioned that dotfiles can be found in the $HOME folder. (Every Terminal app opens the $HOME folder by default).

If you want to see what dotfiles you have, you can open your Terminal app and type ls -la. You’ll see a list of dotfiles.

I also showed you what mine looks like:

Results from running ls -la in my $HOME directory

Notice the dotfiles in pink? These dotfiles also have a -> to another file. The -> indicates the dotfile in the $HOME folder is symlinked to the dotfile in my dotfiles project.

Symlink means symbolic link. It lets you open a file from a second location.

Here’s how it works:

  1. You decide on a source file
  2. You choose a second location (a destination) to open the file with.
  3. You run the symlink command.
  4. Once you run the symlink command, this destination file will point to the source file.

In the case above, if I open .gitconfig from $HOME, I’m actually opening .gitconfig from /Users/zellwk/project/dotfiles.

Dotfiles can change. I want to make sure my Dotfiles repo is updated with the latest changes.

If I don’t create symlinks, I’ll forget to update my dotfiles project. (This has happened before with the dotfiles on my old computer 🤭).

I created a link.sh file in the Dotfiles repo to help with creating symlinks. If I ever create a new dotfile in my Dotfiles repo, I just have to run link.sh to make sure everything is synced up properly 🤓.

Finally, let’s talk about the most important part: setting up my code editor.

Setting up my code editor

I’m anal when it comes things I use. Particularly things I use on a daily basis. I had to make sure my text editor is perfect to my own likings (and I spent days to configuring it… I don’t want to do it again…).

I use Visual Studio Code (VSCode from now on) as my text editor. It has a plugin that lets you sync everything you’ve configured onto another computer. The plugin is called Settings Sync.

Here’s how to set it up:

First, create a personal Github OAuth Token according to the instructions on Settings Sync.

On the old computer:

  1. Run the Sync: Update / Upload Settings command in VSCode.
  2. It’ll ask for authentication.
  3. Insert the OAuth Token you created into the box provided.
  4. Hit enter.

Wait for ~10 seconds for the plugin to sync your settings into a Github Gist. Once it’s done, you’ll see the VS Code integrated shell. Scroll up and you’ll see the OAuth token you used and the Gist ID the plugin stored your settings.

Image of the Token and Gist after uploading VS Code settings

SAVE THESE SOMEWHERE. YOU WILL NEVER SEE THEM AGAIN.

(No need to panic if you’ve lost them. Do the syncing process ☝️ again and you’ll get new keys).

On the new computer:

  1. Run the Sync: Download settings in VSCode
  2. Fill in your Github OAuth token
  3. Fill in your Gist ID

Settings Sync will do its job and sync everything you’ve configured in VS Code. (Yes, this includes extensions too!).

Wrapping up

That’s everything I could automate as I transitioned from my old Mac to the new one. I hope you found/learned something useful in this series!

  1. Setting up my new Mac (Part 1—the apps I use)
  2. This article

Want to become a better Frontend Developer?

Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!

  • 60+ CSS articles
  • 90+ JavaScript articles

I’ll also send you one article every week to help you improve your FED skills crazy fast!