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:
Table of Contents
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.
This content was originally published here.
The recruitment picture is changing rapidly, and AI in recruitment is at the forefront of…
Multimodal AI is a groundbreaking technology that combines multiple modalities, such as text, images, and…
Artificial intelligence (AI in the energy) sector is revolutionizing how we produce, distribute, and consume…
Nowadays, monetization application is the end game of mobile app development. Whether you're an indie…
Nowadays, many mobile apps fail to make an impact. From poor research to bad user…
Apple's VisionOS, the operating system powering the Vision Pro headset, is paving the way for…