Cristobal Schlaubitz Human. Standing at the intersection of tech, design, and management. Left brain by nature and right brain by cultivation. Committed on consistently adding value and making a difference. Currently freelancing.

Set up an M1 MacBook for web development

Get your web development environment up and running within 20 minutes

6 min read 1714

set up m1 macbook for web development

My M1 MacBook Air arrived a few days back, and I couldn’t be happier. I have been pushing its limits since I first got it, and this thing is fast. I have multiple installations running in parallel, and the temperature barely peaked at 104 degrees Fahrenheit. Overall, this machine is on a whole new level compared to the Intel models.

But because there are an overwhelming amount of resources that don’t have quite all the information, it took me far too long to set up my MacBook for the ideal web development environment. So, I’ve put together a tutorial that will help you get your web development tools up and running in 20 minutes.

This web development environment includes:

All of that in 20 minutes!

Why I upgraded my MacBook Pro

With over 1200 charge cycles, my six-year-old 13-inch MacBook Pro grew unreliable by the day, and I was faced with the tough choice of buying a new computer just around the time Apple released the M1 line.

Every review of the new chip painted a picture akin to sorcery, and they all shared a common denominator: the chip was mind-blowingly fast. Still, the decision was not as straightforward, considering the M1 is based on ARM architecture.

For web developers, this means Docker Desktop is not supported as of January 2021. But the good news is that it is already in beta phase and the Docker Team plans to roll out native support in the coming months. In my case, I am not using Docker in any of my current projects, so this is really not a setback for me.

Still, the fact that many apps are yet to be optimized for ARM chips was something I gave thorough consideration. After waiting for the noise to clear and seeing developers have successful runs, I decided it was the time to take a leap into the future and go all-in on the M1.

Tutorial

Everything you need to go through the tutorial is pre-installed on your Mac, so we’ll spend most of our time in the terminal to install the tools on the list.

Rosetta 2

First off, we need to have the software designed to run on Intel speak the same language as our newly minted processor. Apple has rolled out a solution that makes the transition seamless : an emulator named Rosetta 2 that allows us to run apps that use x86 instructions (the instruction set used by Intel chips) on ARM.

We made a custom demo for .
No really. Click here to check it out.

Keep in mind that Rosetta is not installed by default. To use it, we have to go into the pre-installed Terminal in the Utilities folder and run the following command:

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

The --agree-to-license flag will skip the interactive install and agree to Apple’s license but, if you really want to know what you are signing up for, feel free to delete the flag and give the license a read.

Homebrew

We will be using Homebrew to install most of our apps and utilities. Please be aware that as of December 2020, many formulas are still not optimized for ARM, so you may run into some troubles. In my experience, I have yet to run into an error, and all the tools I have installed work out of the box.

The best way to install Homebrew is by going into the Utilities folder in Applications and have our terminal run all commands through Rosetta.

We can do this by opening the Terminal’s Get Info tab and ticking the Open using Rosetta checkbox, as in the following GIF:

Set up M1 macbook homebrew

Now open your terminal, run the command below, and input your computer’s password when prompted:

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

Tools

After Homebrew finishes installing, we can now use it to install a big chunk of our tools. I have a script that does the heavy lifting for me. The script is derived from zellwk’s repo and tweaked to fit my environment. You can find my version of the script in the following repo.

Go to the latter repo and download it. After you unzip it, cd into the setup folder. The repo includes some of my config files, but we’ll only use the brew-installs.sh script for this tutorial.

Before going any further, my recommendation is to open brew-installs.sh in your text editor and see everything it does and installs. You can tweak it to fit your environment because I don’t expect you to use the same tools as I do.

Once you are satisfied with it, check if the brew-installs.sh file is executable by running ls -al. If the file isn’t executable, the output will look something like this: -rw-r-xr-x ... brew-installs.sh (the three dots represent some information that doesn’t concern our purposes).

To make it executable, just run chmod +x brew-installs.sh. This should now output: -rwxr-xr-x ... brew-installs.sh.

Now, assuming that your current working directory is setup, run the brew-installs.sh script by inputting ./brew-installs.sh into your terminal. Here, let the script do the magic for you. Depending on your internet speed, it should take roughly five minutes to download and install everything.

iTerm

iTerm, which was included in the previous setup script, should be installed by now, and thus, we can finish the tutorial with it. It will be important to add the Rosetta layer like we first did on Terminal. One option is to duplicate the app and have a Rosetta iTerm and a regular iTerm. We can do this by following the GIF below:

set up macbook M1 iterm

Zsh

Zsh should be your default shell by now if you didn’t exclude it from the brew-installs.sh script. If you did exclude it, run brew install zsh. Before we move on, let’s make sure Zsh is the default shell by running echo $SHELL, which should output /bin/zsh. If not, change to Zsh by running chsh -s $(which zsh).

Oh My Zsh

Let’s give Zsh some steroids with Oh My Zsh. Run the following command to install it:

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

There are many plugins and themes available with Oh My Zsh. You can check the full list in their GitHub repo. Syntax Highlighting is one of the plugins I can’t live without.

It is much easier to identify if you are typing the right command or if it is in your path. If the command is recognized, the text will be green in color, if not, it will be red.

Terminal prompt with Syntax Highlighting oh my zsh

To reduce clutter, it is best to first cd into the following path to install the plugin: cd $HOME/.oh-my-zsh/plugins and then run the following command, which will automatically append the source to the folder to your .zshrc file:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

nvm

I tried to install nvm through Homebrew, but that failed miserably… Many have faced the same problem, so the best alternative at the moment is to do it via curl by running the following command:

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

After the installation is done, append the following lines to your .zshrc file (if using bash, you will have to add it to .bash-profile or .bashrc) in your home directory:

export NVM_DIR="$HOME/.nvm"
#This loads nvm
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
#This loads nvm bash_completion
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Reset your console session and check if nvm installed properly by running nvm --version, which should output your current version 0.37.2.

Git & GitHub

Git is one of the installations included in the brew-installs.s and should be installed by now. To configure it, let’s first set your username and email.

Substitute < USERNAME > and < EMAIL > with your own and run the following command sequence:

git config --global user.name < USERNAME > &&
git config --global user.email < EMAIL > &&
git config --global --list

To authenticate GitHub, the recommended method is through personal access tokens. Because this is beyond the scope of this tutorial, please visit the official GitHub tutorial.

VS Code

To make the transition from one computer to another seamless, VS Code has a sweet extension by the name of Settings Sync, which lets you upload your configurations to a GitHub Gist. Once they are up on GitHub, the extension takes care of keeping the following files in sync: settings file, keybindings, snippets, workspace folders, and extensions and their corresponding configurations.

The extension’s page has a thorough explanation on how to get it set up and should only take a couple of minutes to have your VS Code with your preferred settings.

Powerline Fonts

Most themes in Oh My Zsh require Powerline Fonts. I pulled the following info from the official Powerline repo (all credits to the authors), and converted the commands into a sequence for convenience purposes. Copy and paste the block below into the terminal, and it will download and install Powerline for you.

git clone https://github.com/powerline/fonts.git --depth=1 &&
cd fonts &&
./install.sh &&
cd ..

You may now delete the fonts folder that was created by running rm -rf fonts. I left this command out of the sequence for security purposes.

If you are using the Agnoster or any other theme that uses Powerline, and for some reason, you see question marks instead of the icons, you must change the Non-ASCII font in the iTerm settings. You can find this in the Text tab in Profiles. I personally use Space Mono for Powerline, but there are many other options available that you can check out.

Conclusion

And wahlah! You’re set up for web development. This may have been dense, but the good news is that your projects should compile by now (after npm installing the required node_modules, of course).

Please reach out through the comments sections if you have any questions or remarks, and I will be glad to help you out.

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Cristobal Schlaubitz Human. Standing at the intersection of tech, design, and management. Left brain by nature and right brain by cultivation. Committed on consistently adding value and making a difference. Currently freelancing.

One Reply to “Set up an M1 MacBook for web development”

Leave a Reply