Setup Macbook M1 for Web and React Native development – DEV Community

I recently upgraded from Macbook Air 2017 to Macbook Pro with an M1 chip. My four year old Macbook Air was giving up. The performance to run heavy tasks like using the iOS simulator when developing and working on React Native apps was declining. I had long given up using the Android emulator and have been using a real Android device for testing. December 2020 was the time I decided its time to upgrade.

I had a long internal discussion with myself for almost a month that whether should I upgrade to M1 or stick with Intel-based chips and spend them bucks. Don’t get me wrong here, M1 is not cheap either as I did go for a RAM upgrade to max limits which is currently 16GB in the base model. The kind of performance I was expecting after going through some online reviews and research, has been worth it so far (it is fast, no doubt). I received it two weeks back at the time of writing this post and since then I have installed all the necessary tools and utilities that help me work on Web development and React Native apps.

My local environment currently includes:

Other apps:

Rosetta 2

Rosetta 2 is the lifeline that allows you to run apps designed for Intel-based chips that use x86 architecture on ARM-based chips (in this case M1). This solution is provided by Apple in form of an emulator and doesn’t come pre-installed. You have to install it manually. Fire up the Terminal application that comes pre-installed on the Big Sur and let your first command to execute be:

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

If you decide not to put the flag --agree-to-license, you will be prompted by Apple’s interactive install and you will have to agree to their terms and license conditions in order to use it.

My favorite terminal app that I have been using for years is iTerm. I am currently using two versions of iTerm on my setup. One with Rosetta 2 enabled and the default one. This way, I can only use the Rosetta 2 emulator when required. There are no performance issues I have found with using iTerm with Rosetta 2 for ARM-based applications.

If you’d like a similar setup, go to the Applications folder in your Macbook and duplicate the iTerm application.

You can rename the duplicated iTerm app. I have renamed it to iTerm_rosetta to differentiate between the two. Right-click the duplicated app and click Get Info. In the General check the box where it says Open using Rosetta.

Now, if you open the second terminal, it will be using Rosetta 2 emulator by default.

Other iTerm profile settings that I use:

Recently I started using Jetbrains Mono font.

For the overall looks and appearance, I use Dracula Pro Color Presets created by Zen Rocha.

And my last favorite thing is to split the working directory into two more different tabs using Command + D for horizontal panes. Make sure to have the following setting configured from General > Working Directory > select Advanced Configuration > click button Edit… > select Reuse previous session’s directory under Working Directory for New Split Panes.

For terminal prompt, I use Spaceship ZSH.

On December 1, 2020, the Homebrew team made an official announcement on their website about the version release 2.6.0. The most significant changes among others they listed were the support for macOS Big Sur, using brew commands instead of brew cask and beginning to support macOS M1 and Apple Silicon or ARM-based chips.

This is the tricky part. At the time of writing this post, some formulae that you may like to use, might not work. It’s better to track at the GitHub issue here in the Brew’s official repository which is maintained by their team. I am thankful to the whole team behind the Homebrew for making it accessible and appreciate their hard work on making things work in such a short time.

Using the terminal, you can install the Homebrew by executing the default command:

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

Recently I found that it can be installed natively on a Macbook. You can run the above command in a native terminal environment as well without using the Rosetta terminal environment.

I did install Git using brew command: brew install git.

To authenticate GitHub to be used from the terminal environment, I’d recommend you to check out the official document on creating and accessing personal tokens.

After installing Git, for me, the next step is to install Xcode app from Apple’s App Store.

After installing it, make sure to open it for the first time, from the menu bar, open Xcode > Preferences > Locations and make sure that Command Line Tools point towards the current Xcode app.

Node.js

On Apple’s silicon-based laptops, Node.js versions starting from 14 and below are not supported. You will have to install version 15.x.x. or greater (depending on when you are reading this post).

At first, I installed Node.js using nvm without using Homebrew. Execute the below curl command to install nvm first:

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

After installing it, add the following to the .zshrc file and make sure to put them after sourcing Oh My Zsh:

# after sourcing Oh My Zsh

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

To verify that nvm is installed, restart the console or the zsh session (execute: source .zshrc) and execute the following command to check out its current version:

nvm --version

# output
0.37.2

Then run the command nvm install node.

Alternatively, you can also install the Node.js using the official installer for the current version which I later moved on to.

ZSH and Oh My Zsh

ZSH is the default shell that macOS Big Sur comes with. I like to use Oh My Zsh to manage ZSH configuration and some plugins and a theme to prettify the terminal.

To install, run the command below:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/
robbyrussell/oh-my-zsh/master/tools/install.sh)"

After installation, make sure that the file zshrc is exporting the below path:

# Path to your oh-my-zsh installation.
export ZSH="/Users/<USERNAME>/.oh-my-zsh/oh-my-zsh.sh"

The first I like to do after setting up the bare minimum ZSH configuration is to install a plugin called
zsh-syntax-highlighting. It provides syntax highlighting for the ZSH shell. Execute the series below commands in the terminal window:

cd $HOME/.oh-my-zsh/oh-my-zsh.sh/plugins

# OR depending on the /plugins folder in your local setup
cd $HOME/.oh-my-zsh/plugins

# then clone the git repository
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highligh
ting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

In a nutshell, this is my initial ZSH configuration in the file ~/.zshrc file:

# Path to your oh-my-zsh installation.
export ZSH="/Users/amanhimself/.oh-my-zsh/oh-my-zsh.sh"

export PATH=/opt/homebrew/bin:$PATH

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

ZSH_THEME="spaceship"


plugins=(
  git
  node
  vscode
  zsh-syntax-highlighting
)

source $ZSH/oh-my-zsh.sh
source /Users/[USER_NAME]/.oh-my-zsh/oh-my-zsh.sh/plugins/
zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

After installing the syntax highlight plugin, it starts to recognize the commands:

VSCode does not have native M1 support yet. However, VS Code Insiders edition does support ARM chips. Download the installer from here.

I am still using the same VSCode configuration from my previous setup:

{
  "editor.tabSize": 2,
  "editor.fontSize": 13,
  "editor.fontFamily": "Jetbrains Mono, 'Courier New', monospace",
  "workbench.colorTheme": "morgan.codes",
  "workbench.iconTheme": "material-icon-theme",
  "editor.minimap.enabled": false,
  "editor.cursorBlinking": "expand",
  "editor.fontLigatures": false,
  "editor.wordWrap": "on",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.tabCompletion": "on",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "workbench.editor.enablePreview": false,
  "window.restoreFullscreen": true,
  "window.title": "${activeEditorShort}${separator}${rootName}",
  "search.exclude": {
    "**/node_modules": true,
    "**/*.code-search": true,
    "ios/": true,
    "android/": true,
    "dist/": true,
    "yarn.lock": true,
    "package-lock.json": true,
    ".gitignore": true,
    ".expo": true,
    ".vscode": true
  },
  "window.zoomLevel": 0.3,
  "explorer.confirmDelete": false,
  "workbench.editor.tabSizing": "shrink",
  "breadcrumbs.enabled": true,
  "explorer.openEditors.visible": 0,

  // Integrated Terminal
  "terminal.integrated.shell.osx": "zsh",
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.fontSize": 12,

  // Extensions
  "extensions.autoUpdate": false,
  "bracket-pair-colorizer-2.colors": ["#F72585", "#94b4a4", "#a3d8f4"],
  "highlight-matching-tag.styles": {
    "opening": {
      "name": {
        // surround is border
        "surround": "yellow"
      }
    }
  },
  "npm-intellisense.importES6": true,
  "typescript.suggest.paths": false,
  // Prettier
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.arrowParens": "avoid",
  "prettier.proseWrap": "preserve",
  "prettier.quoteProps": "as-needed",
  "prettier.jsxBracketSameLine": false,
  "prettier.bracketSpacing": true,
  "prettier.tabWidth": 2,

  // Macros
  "macros": {
    "collapseAndClose": [
      "workbench.files.action.collapseExplorerFolders",
      "workbench.action.closeAllEditors"
    ]
  },

  // Markdown
  "[markdown]": {
    "editor.quickSuggestions": true
  },

Global NPM Packages I use

For React Native Development

For more instructions on how to setup development environment for React Native, please follow the official documentation here.

For Gatsby Sites

If you have a side project that uses GatsbyJS, chances are you are going to face the issue https://github.com/lovell/sharp/issues/2460. Gatsby uses a C based library called Sharp that needs to be compiled under the ARM architecture. It did not work for me and the only way I could solve was to install vips formulae from Homebrew as mentioned in the GitHub issue itself.

That’s the setup I now use for my JavaScript, Node.js, React and React Native. I think it’s a good machine. Hopefully, M1 is just the beginning of a new era of powerful computers for daily use.

The only thing left for me is to find a way to transfer all laptop swag/stickers from my Macbook Air to Pro. I miss having them on this one. For me they are memories, and experiences.

If you know a way, please let me know!

is another useful link I found sometime back to check what is compatible to work on Apple Silicon chips natively or using Rosetta or not optimized at all.