Setup Macbook M1 for Web and React Native development

Published on Mar 14, 2021

•

11 min read

•

TOOLS

🕑 Updated on: November 24, 2022

cover_image

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 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 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 https://github.com/zsh-users/zsh-syntax-highlighting.git


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
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools


ZSH_THEME="spaceship"


# Uncomment the following line to disable bi-weekly auto-update checks.
DISABLE_AUTO_UPDATE="true"


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


source $ZSH/oh-my-zsh.sh
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:

ss4

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

iterm1

  • Text:

iterm2

iterm3

  • 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:

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

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.

ss3

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

screenshot-of-function-keys-on-macbbok-air-m1-2020

Here are the key mappings I am using now:

key-mappings-with karabiner-elements

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.

ss5

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

1{
2  // VSCODE EDITOR
3  "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": true
36  },
37  "extensions.autoUpdate": false,
38  // --------------------------------------
39  // EXPO TOOLS
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  // --------------------------------------
48  // CODE::STATS EXTENSION
49  "codestats.apikey": "api-key",
50  // --------------------------------------
51  // READ TIME EXTENSION
52  "readTime.enabled": true,
53  // --------------------------------------
54  // HIGHLIGHT MATCHING TAG EXTENSION
55  "highlight-matching-tag.styles": {
56    "opening": {
57      "name": {
58        // surround is border
59        "surround": "yellow"
60      }
61    }
62  },
63  // --------------------------------------
64  // INTEGRATED TERMINAL
65  // "terminal.integrated.defaultProfile.osx": "zsh",
66  "terminal.external.osxExec": "iTerm.app",
67  "terminal.integrated.fontSize": 12,
68  // --------------------------------------
69  // NPM
70  "npm-intellisense.importES6": true,
71  // --------------------------------------
72  // TS IMPORT SUGGESTION
73  "typescript.suggest.paths": false,
74  // --------------------------------------
75  // NATIVE BRACKET PAIR COLOR SETTINGS
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  // --------------------------------------
143  // LANGUAGES SPECIFIC
144  "javascript.updateImportsOnFileMove.enabled": "always",
145  "security.workspace.trust.banner": "never",
146  "emmet.includeLanguages": {
147    "typescript": "typescriptreact",
148    "javascript": "javascriptreact"
149  },
150  // MISCELLANEOUS
151  "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": true
160  },
161  "customizeUI.fontSizeMap": {
162    "13px": "12px",
163    "12px": "11px",
164    "window-title": "12px", // Window title font when using custom titlebar
165    "tab-title": "12px", // Used for editor tab titles
166    "monospace": "11px" // Used for monospace fonts in user interface
167  },
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.

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.

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.

Share this article on Twitter

More Posts

Browse all posts

⬅️ Previous: How to upload an image using Expo Camera to Cloudinary

Next: How to use React Native Geolocation to get Postal Address ➡️

Aman Mittal author

Buy me coffee

 

Newsletter

 

Twitter

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.

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

Newsletter

•

Twitter

•

Medium

•

Dev.to

•

GitHub

•

RSS

•

Sponsorship