Setup Macbook M1 for Web and React Native development
🕑 Updated on: November 24, 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é
- Point & click
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:
- Sync settings and switch "Developer Mode" on.
- Extensions that I use:
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 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 at the top:
# Path to your oh-my-zsh installationexport 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 setupcd $HOME/.oh-my-zsh/plugins# then clone the git repositorygit clone https://github.com/zsh-users/zsh-syntax-highlighting.gitecho "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 installationexport ZSH="/Users/amanhimself/.oh-my-zsh"export PATH=/opt/homebrew/bin:$PATHexport ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-toolsZSH_THEME="spaceship"# Uncomment the following line to disable bi-weekly auto-update checks.DISABLE_AUTO_UPDATE="true"plugins=(gitnodevscodezsh-syntax-highlighting)source $ZSH/oh-my-zsh.shsource /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:
Copy dotfiles
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:
- Colors: For the overall looks and appearance, I use Dracula Pro Color Presets created by Zen Rocha.
- 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 https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew installs:
- Node.js and npm via Node Version Manager (NVM). Read the entire blog post on how to install Node.js using NVM.
- scrcpy (control Android devices connect via USB on mac)
Karabiner-Elements (remapping function keys for Macbook Air or with Macbooks without touchbar)- install Watchman to watch changes in the filesystem using the command:
brew install watchman
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 tomain
. Set it globally and forget about it.
git config --global init.defaultBranch main
Xcode
🔗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 "example.com"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:
VSCode
🔗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:
1{2 // VSCODE EDITOR3 "workbench.colorTheme": "fairyfloss",4 "workbench.startupEditor": "welcomePage",5 "workbench.iconTheme": "material-icon-theme",6 "workbench.editor.tabSizing": "shrink",7 "security.workspace.trust.untrustedFiles": "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": true36 },37 "extensions.autoUpdate": false,38 // --------------------------------------39 // EXPO TOOLS40 "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 // --------------------------------------48 // CODE::STATS EXTENSION49 "codestats.apikey": "api-key",50 // --------------------------------------51 // READ TIME EXTENSION52 "readTime.enabled": true,53 // --------------------------------------54 // HIGHLIGHT MATCHING TAG EXTENSION55 "highlight-matching-tag.styles": {56 "opening": {57 "name": {58 // surround is border59 "surround": "yellow"60 }61 }62 },63 // --------------------------------------64 // INTEGRATED TERMINAL65 // "terminal.integrated.defaultProfile.osx": "zsh",66 "terminal.external.osxExec": "iTerm.app",67 "terminal.integrated.fontSize": 12,68 // --------------------------------------69 // NPM70 "npm-intellisense.importES6": true,71 // --------------------------------------72 // TS IMPORT SUGGESTION73 "typescript.suggest.paths": false,74 // --------------------------------------75 // NATIVE BRACKET PAIR COLOR SETTINGS76 "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 // Markdown99 "[markdown]": {100 "editor.quickSuggestions": {101 "comments": "on",102 "strings": "on",103 "other": "on"104 }105 },106 // JSON107 "[json]": {108 "editor.defaultFormatter": "esbenp.prettier-vscode"109 },110 // JavaScript111 "[javascript]": {112 "editor.defaultFormatter": "esbenp.prettier-vscode"113 },114 // JavaScript + React115 "[javascriptreact]": {116 "editor.defaultFormatter": "esbenp.prettier-vscode"117 },118 // TypeScript119 "[typescript]": {120 "editor.defaultFormatter": "esbenp.prettier-vscode"121 },122 // TypeScript + React123 "[typescriptreact]": {124 "editor.defaultFormatter": "esbenp.prettier-vscode"125 },126 // JSON with Comments127 "[jsonc]": {128 "editor.defaultFormatter": "esbenp.prettier-vscode"129 },130 // HTML131 "[html]": {132 "editor.defaultFormatter": "esbenp.prettier-vscode"133 },134 // ----------------------------------135 // ESLINT136 "eslint.validate": [137 "javascript",138 "javascriptreact",139 "typescript",140 "typescriptreact"141 ],142 // --------------------------------------143 // LANGUAGES SPECIFIC144 "javascript.updateImportsOnFileMove.enabled": "always",145 "security.workspace.trust.banner": "never",146 "emmet.includeLanguages": {147 "typescript": "typescriptreact",148 "javascript": "javascriptreact"149 },150 // MISCELLANEOUS151 "git.autofetch": true,152 "cSpell.language": "en,en-US",153 "cSpell.enableFiletypes": ["markdown", "mdx"],154 "editor.inlineSuggest.enabled": true,155 "github.copilot.enable": {156 "*": true,157 "yaml": false,158 "plaintext": true,159 "markdown": true160 },161 "customizeUI.fontSizeMap": {162 "13px": "12px",163 "12px": "11px",164 "window-title": "12px", // Window title font when using custom titlebar165 "tab-title": "12px", // Used for editor tab titles166 "monospace": "11px" // Used for monospace fonts in user interface167 },168 "errorLens.fontSize": "12",169 "grammarly.files.include": [170 "**/README.md",171 "**/readme.md",172 "**/*.txt",173 "**/*.md",174 "**/*.mdx"175 ]176}
Themes
🔗I usually like to switch between a dark and a light theme.
- For the dark theme where I spent most of my time, I use fairyFloss.
- Other themes I switch between:
- Quiet Light
- Other themes I switch between:
- For file icons, I love Material-Icon-Theme.
- For the terminal prompt, I use Spaceship ZSH.
Extensions
🔗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.
- Auto Close tag
- Auto Complete Tag
- Auto Rename Tag
- Babel JavaScript
Bracket Pair Colorizer 2- VSCode now supports this natively. Check out my post 👉 How to configure VSCode Bracket Pair Colors Natively- Code Spell Checker
- Code::Stats
- Color Highlight
- DotENV
- Error Lens
- ESLint
- Expo Tools
- GitHub Copilot
- Git Lens
- Highlight Matching Tag
- Indent rainbow
- iOS common files
- Material Icon Theme
- MDX - For syntax highlighting of
.mdx
files - npm intellisense
- Prettier
- React Native Tools
- Read Time
- SVG Viewer
- TODO Highlight
- Version Lens
- Word Count
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.
Conclusion
🔗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.
isapplesiliconready.com 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
I'm a software developer and a technical writer. In this blog, I write about Technical writing, Node.js, React Native and Expo.
Currently, working at Expo. Previously, I've worked as a Developer Advocate, and Senior Content Developer with companies like Draftbit and Vercel.