Setup Macbook M1 for Web and React Native development

Published on Mar 14, 2021

11 min read


🕑 Updated on: July 13, 2022


It's 2022, and I am still coming back to this article. I wrote this originally in 2021 to keep track of what I need to start when setting up a new laptop. Since then, I have had two Macbook Pros using an Apple Silicon processor (M1). I try to keep this article up to date.

First steps


When setting up a new Macbook, here are the initial steps I take:

  • Downloads:

    • Browser: Download Brave Browser, Google Chrome
    • Terminal: Download iTerm 2 and set it to default
    • Editor/IDE: VSCode
    • Other downloads: CleanMyMac X, Xcode
  • Log in

    • Gmail, GitHub, Outlook

macOS Settings and Preferences


System preferences and settings that I prefer. These settings are available in the Systems and Preferences app:

  • Siri:

    • Disable Ask Siri
  • Dock & Menu Bar:

    • Enable "Automatically hide and show the Dock"
    • Enable "Automatically hide and show the menu bar in full screen"
    • Disable Siri
  • Mission Control:

    • Disable "Automatically rearrange Spaces based on most recent use"
    • Hot Corners: remove everything
  • Trackpad:

    • Point & click
      • Enable secondary click with bottom right corner
      • Enable Tap to click with one finger
    • Scroll & zoom:
      • Disable Scroll Direction: Natural
    • More gestures:
      • Disable Swipe between pages and App Exposé
  • Spotlight:

    • Disable search except for Applications, Calculator, Conversion, Definition, and System Preferences.
  • Finder settings:

    • Preferences > Advanced > Show filename extensions
    • Enable showing hidden files (hold Cmd + Shift dot(.) in a Finder window)
    • Enable: View -> Show Path Bar, Show Status Bar
  • Chrome settings:

Setting up the development machine

  • Other apps on my macOS:
    • Brave
    • Android Studio
    • Insomnia as REST API client
    • Slack or Discord (for work and community)
    • There (to track team mate's timezones)
    • LICEcap (for recoding gifs)
    • Zoom (for work)
    • GitHub Desktop App
    • Cleanshot (for screenshots and recording videos)
    • Spotify
    • Bandwidth +
    • Linear (for work)
    • Skype
    • Discord
    • The Unarchiver
    • HiddenMe
    • Numbers
    • Notion
    • Telegram

ZSH and Oh My Zsh


ZSH is the default shell in macOS Big Sur. However, I like to use Oh My Zsh to manage the ZSH configuration, plugins, and a theme to prettify the terminal.

To install, run the command below:

sh -c "$(curl -fsSL"

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

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

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:

# depending on the /plugins folder in your local setup
cd $HOME/.oh-my-zsh/plugins
# then clone the git repository
git clone
echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

Next step is to install spaceship-prompt theme. Follow the steps described in oh-my-sh section.

This is my final ZSH configuration in the file ~/.zshrc file:

# Path to your oh-my-zsh installation
export ZSH="/Users/amanhimself/.oh-my-zsh"
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/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Uncomment the following line to disable bi-weekly auto-update checks.
source $ZSH/
source /Users/amanhimself/.oh-my-zsh/plugins/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

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


Setting up the terminal: iTerm


My favorite terminal app that I have been using for years is iTerm.

  • Enable Working Directory for New Split Panes: General -> Advanced Configuration


  • Text:



  • Window:
    • Transparency: 5
    • Blur: 20

Installing Homebrew


On December 1, 2020, the Homebrew team announced on their website about the version release 2.6.0. The most significant changes they listed were: The support for macOS Big Sur. Using brew commands instead of brew cask. Beginning to support macOS M1 and Apple Silicon or ARM-based chips.

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

/bin/bash -c "$(curl -fsSL"

brew installs:

Install git


I did install Git using the brew command:

brew install git

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

🔥 Tip: As of Git version 2.28, there is a new config option to set the default branch to main. Set it globally and forget about it.

git config --global init.defaultBranch main



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

Then, install "command line tools". Many formulae in Homebrew require it.

xcode-select --install

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


After installing Node.js


Node.js comes with the default package manager npm. Set defaults for it:

npm config set init-author-name "your name"
npm config set init-author-url ""
npm config set init-license MIT

Global NPM Packages I use


Optional: Karabiner-Elements to remap function keys


No longer using Karabiner-Elements as I gave up my Macbook Air

When I bought Macbook Air M1, it had function keys (that got me excited), but I don't understand why Apple decided to replace function keys that would allow me to control Keyboard Brightness! Moreover, replace it with "Do Not Disturb".

Why? That got me confused 🤷

I found this tool called karabiner Elements that is installed as a brew formula:

brew install karabiner-elements


Here are the key mappings I am using now:

key-mappings-with karabiner-elements



VSCode and VS Code Insiders are currently supported on ARM chips (March 13, 2021). Download the installer for Insiders edition from here and for VSCode here.


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

3 "workbench.colorTheme": "fairyfloss",
4 "workbench.startupEditor": "welcomePage",
5 "workbench.iconTheme": "material-icon-theme",
6 "workbench.editor.tabSizing": "shrink",
7 "": "open",
8 "explorer.confirmDelete": false,
9 "explorer.confirmDragAndDrop": false,
10 "workbench.editor.enablePreview": false,
11 "window.restoreFullscreen": true,
12 "editor.tabSize": 2,
13 "editor.fontSize": 14.5,
14 "editor.minimap.enabled": false,
15 "editor.cursorBlinking": "phase",
16 "editor.fontLigatures": false,
17 "editor.wordWrap": "on",
18 "editor.cursorSmoothCaretAnimation": true,
19 "editor.tabCompletion": "on",
20 "editor.formatOnPaste": true,
21 "editor.formatOnSave": true,
22 "editor.semanticHighlighting.enabled": true,
23 "editor.guides.bracketPairs": true,
24 "explorer.openEditors.visible": 0,
25 "search.exclude": {
26 "**/node_modules": true,
27 "**/*.code-search": true,
28 "ios/": true,
29 "android/": true,
30 "dist/": true,
31 "yarn.lock": true,
32 "package-lock.json": true,
33 ".gitignore": true,
34 ".expo": true,
35 ".vscode": true
36 },
37 "extensions.autoUpdate": false,
38 // --------------------------------------
40 "json.schemas": [
41 {
42 "name": "vscode-expo-manifest",
43 "url": "file:///Users/amanhimself/Library/Application%20Support/Code/User/globalStorage/bycedric.vscode-expo/manifest-45.0.0.json",
44 "fileMatch": ["app.json", "app.config.json"]
45 }
46 ],
47 // --------------------------------------
49 "codestats.apikey": "api-key",
50 // --------------------------------------
52 "readTime.enabled": true,
53 // --------------------------------------
55 "highlight-matching-tag.styles": {
56 "opening": {
57 "name": {
58 // surround is border
59 "surround": "yellow"
60 }
61 }
62 },
63 // --------------------------------------
65 // "terminal.integrated.defaultProfile.osx": "zsh",
66 "terminal.external.osxExec": "",
67 "terminal.integrated.fontSize": 12,
68 // --------------------------------------
69 // NPM
70 "npm-intellisense.importES6": true,
71 // --------------------------------------
73 "typescript.suggest.paths": false,
74 // --------------------------------------
76 "editor.bracketPairColorization.enabled": true,
77 "workbench.colorCustomizations": {
78 "editorBracketHighlight.foreground1": "#ffb86c",
79 "editorBracketHighlight.foreground2": "#8be9fd",
80 "editorBracketHighlight.foreground3": "#bd93f9",
81 "editorBracketHighlight.foreground4": "#50fa7b",
82 "editorBracketHighlight.foreground5": "#f1fa8c",
83 "editorBracketHighlight.foreground6": "#abb2c0",
84 "editorBracketHighlight.unexpectedBracket.foreground": "#ff5555"
85 },
86 // --------------------------------------
87 // PRETTIER ----------------------------------
88 "prettier.singleQuote": true,
89 "prettier.jsxSingleQuote": true,
90 "prettier.trailingComma": "none",
91 "prettier.arrowParens": "avoid",
92 "prettier.proseWrap": "preserve",
93 "prettier.quoteProps": "as-needed",
94 "prettier.jsxBracketSameLine": false,
95 "prettier.bracketSpacing": true,
96 "prettier.tabWidth": 2,
97 "editor.defaultFormatter": "esbenp.prettier-vscode",
98 // Markdown
99 "[markdown]": {
100 "editor.quickSuggestions": {
101 "comments": "on",
102 "strings": "on",
103 "other": "on"
104 }
105 },
106 // JSON
107 "[json]": {
108 "editor.defaultFormatter": "esbenp.prettier-vscode"
109 },
110 // JavaScript
111 "[javascript]": {
112 "editor.defaultFormatter": "esbenp.prettier-vscode"
113 },
114 // JavaScript + React
115 "[javascriptreact]": {
116 "editor.defaultFormatter": "esbenp.prettier-vscode"
117 },
118 // TypeScript
119 "[typescript]": {
120 "editor.defaultFormatter": "esbenp.prettier-vscode"
121 },
122 // TypeScript + React
123 "[typescriptreact]": {
124 "editor.defaultFormatter": "esbenp.prettier-vscode"
125 },
126 // JSON with Comments
127 "[jsonc]": {
128 "editor.defaultFormatter": "esbenp.prettier-vscode"
129 },
130 // HTML
131 "[html]": {
132 "editor.defaultFormatter": "esbenp.prettier-vscode"
133 },
134 // ----------------------------------
135 // ESLINT
136 "eslint.validate": [
137 "javascript",
138 "javascriptreact",
139 "typescript",
140 "typescriptreact"
141 ],
142 // --------------------------------------
144 "javascript.updateImportsOnFileMove.enabled": "always",
145 "": "never",
146 "emmet.includeLanguages": {
147 "typescript": "typescriptreact",
148 "javascript": "javascriptreact"
149 },
150 "git.autofetch": true,
151 "cSpell.enableFiletypes": ["markdown", "mdx"]



I usually like to switch between a dark and a light theme.



I use the VSCode editor for both writing code and writing blog posts. Thus, the list of extensions below is the combination that fulfills both of my purposes.

For React Native Development

  • Install following cocoapods: brew install cocoapods
  • According to a post by React Native guru Jamon Holmgren, I learned that all this time I've been installing JDK wrong on my m1 machine 😱. To learn more about how to install "the m1 way", go to his post and give it a read (and leave an appreciation clap 😄)
  • Versions later than Arctic Fox Canary now supports Apple's Silicon-based machines for Android Studio. You can also check out the archive to see what beta/canary and stable version supports Silicon machines
  • Then install Android SDK (I do not prefer AVD and use an actual device for testing)
  • scrcpy to display and control Android devices connected via USB on Mac: brew install scrcpy

⚛️ For more instructions on how to set up a development environment for React Native, please follow the official documentation here.

Rosetta 2


Update: I am not using the Rosetta environment to install anything on the secondary machine since August 2021. That is why I've mentioned it at the end of the post.

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 as 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 macOS and execute the following command:

/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 to use it.



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 work use 🤞

🤔 The only thing left for me is to find a way to transfer all laptop swag/stickers from my Macbook Air 2017 to Pro. I miss having them on this one. is another helpful link I found to check what is compatible to work on Apple Silicon chips natively or using Rosetta or not optimized at all.

More Posts

Browse all posts

Join 1300+ devs & subscribe to my newsletter!


🔗 Subscribe on Revue

Aman Mittal author

Software Developer and Technical Writer since 2017. Loves learning and writing about Node.js, React, React Native & Expo. Previously, worked as Developer Advocate, independent consultant, and technical writer with companies like Draftbit, Vercel and Crowdbotics.

Copyright ©  2019-2022 Aman Mittal · All Rights Reserved.