Running Electron on Apple Silicon (M1) Mac

🚨 IMPORTANT: The first step for someone who is just starting out with the Mac is downloading the Xcode. Open App Store and put Xcode to download. It (~12 GB) takes a long time to finish, trust me. Consider it the first requirement for M1 Electron development.

TLDR;

• Install Xcode and Xcode Tools
• Install NVM for NodeJS v15
• Use Electron >= v11

M1 MacBook

Apple has released its own chip called the M1 using the ARM architecture. Intel’s architecture is different from Apple’s, and apps built for Intel would need to be rebuilt to run on Apple technology.

Building for ARM on new MacBooks is not as straightforward yet. I had to dig around to find the right tools. This guide could help you save some of the time I lost.

You need an ARM machine to build for ARM. I couldn’t wait for cloud platforms (e.g. GitHub Actions) to support the ARM builds, so I just purchased M1 MacBook to build locally.

The Setup

1. Xcode

First thing we need is Xcode to be installed on our machine. If you already have it installed (congrats!), you can go to next step. If not, you should start downloading Xcode right away from the App Store.

1.2. Once you have the Xcode, Start it if you’ve never started it yet. You need to accept Terms and Condition it shows on the first start. Next, Install some components we need for our development workflow with the command in Terminal: xcode-select — install

1.3. To make sure that Xcode developer tools have correct paths in our environment, run the command: sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

To build Electron app, which uses NodeJS, we need an ARM build of NodeJS itself. Only NodeJS v15 and up work on the M1. But as of today (11/29/2020), NodeJS website only offers x64 builds for Darwin (mac) for the latest v14. Which means we’ll have to build NodeJS from the source on the machine first before using it to build the app.

Fortunately, the awesome tool called NVM allows you to build the source if it cannot find a suitable version for the local machine.

2. Install NVM

You can follow the instruction on NVM’s repo to install the latest version for your Mac. Once complete, run nvm install 15 in the Terminal to install the v15 of NodeJS. This step requires the Xcode and its components to be already installed because it builds NodeJS from source.

While its building, if you have MacBook Air, you’ll notice it’ll get hot and slowdown a little. If you have MacBook Pro, the fans in it will start spinning. But that’s normal, don’t worry because it was the only time MacBook got hot for me, otherwise it feels cool to the touch.

Once the build is done, run node -v in terminal to verify you have NodeJS installed and to check its version. It should be v15.x.x.

3. M1 Electron

Once you have NodeJS installed correctly, cd into your project and run npm i.

If you had a version less than v11, you’ll see an error similar to:

Errors: Failed to find Electron v10.2.0 for darwin-arm64 at …

Which occurs because there’s no binary of darwin-arm64 architecture in electron’s releases earlier than v11.

Go to the package.json file of your project and check which version of Electron is it using. If it’s v11 or greater, you’re good. Otherwise, run npm i electron@11 to install v11 of Electron because that is the first Electron version that supports M1.

Next, close your eyes, cross you fingers and run npm start (or whatever command) to run your app. If stars are in your favor, you’ll see your app run. If not, you’ll see some errors regarding some native dependencies you have which do not have a binary for ARM yet.

Dependency Problem

In some cases, a dependency (at any level) of your app may not have the correct binary. For me it was deasync package; I didn’t know where it was being used but it did not have the correct binary.

I cd’d to the deasync folder in node_modules and ran the node build.js to build the package for ARM, it fixed the problem in seconds. But you may not be that lucky. I suggest that you check out the latest version of the failing package on NPM and find any open issues for it. The NodeJS/Electron community may have figured it out already.

Using x64 mode

If nothing seems to work and you need to run the app, then you can ask macOS to run electron in x64 mode. Try running arch -x86_64 npm i command. It may ask you to install Rosetta 2, the app needed to run x64 mode on Apple Silicon, go ahead and install. Once done, NPM may install a x64 version of Electron. After that, run arch -x86_64 node start to start the app in x64 mode.

But I’d not recommend always using x64, unless absolutely required, because you’ll get the same performance from it as you’d with Apple Silicon.

You can also make the Terminal app to always run in x64 mode. To do so:

Go to Applications > Utilities folder.

Right-click on the Terminal app and click ‘Get info’.

On the Terminal Info panel, check ‘Open Using Rosetta’ and close the panel.

Now, whenever you’ll use terminal, it’ll be using the x64 architecture.

⚡️⭐️ If you’re developing for Electron then you may also like my project Electrolytic. It has features like Analytics, Push Notifications, Cloud Config, and much more. Go, check it out.

👉🏼 You can follow me on Twitter for more Electron stuff: @moinism