Search code examples
windowsmacoselectroncross-platformyarnpkg

Electron: Sharing the same project folder between macOS and Windows

Goal

I've read many Electron tutorials about app bootstrapping and build pipeline and had assumed that you could have a single project to handle a cross-platform action.

But after numerous failures in the packaging and build process, I finally realized that maybe my assumption is wrong.

Problem

Here is my desired workflow based on electron-forge:

1. Create app skeleton on Windows


yarn create electron-app my-app

cd my-app

yarn add my-dependency

yarn start

yarn make

This all went well. Now onto macOS

2. Transfer project to macOS for a ride

On macOS, running the app will lead to an error

cd my-app

yarn start

The error looks like this

$ yarn start
yarn run v1.22.4
$ electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 1 / 1
✔ Launching Application
/path/to/my-app/node_modules/electron/dist/electron.exe: /path/to/my-app/node_modules/electron/dist/electron.exe: cannot execute binary file
error Command failed with exit code 126.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So I blindly reinstall electron on macOS

yarn add electron

yarn start

yarn make

Things work fine on macOS.

Now back to Windows.

3. Travel back to Windows to double-check

This time. I got the similar problem as in Step #2. The Windows distribution now has the wrong Electron binary.

Findings

I found this file constantly getting overwritten even if I merge carefully when transferring project files between Windows and macOS.

my-app/node_modules/electron/path.txt

It contains a hardcoded path to Electron executable:

macOS

Electron.app/Contents/MacOS/Electron

Windows:

electron.exe

Workarounds

I could add pre-build steps against this by copying predefined metadata to the project folder depending on the current platform. But a hack like this sounds lame for a framework like Electron.

Question

So to me this metadata arrangement makes it difficult to share the same project between Windows and macOS. I can't imagine Electron developers working like this.

So What am I missing?

Solution

  • Basically, you shouldn't commit node_modules at all. Some post installation scripts may compile packages for a specific OS and the folder is usually huge.

    Also, you shouldn't commit any result of a build, package or compile command. Typically, dist folders should be ignored.

    Your repository should only contains code and configuration files. The idea is that it makes no sense to commit these files and folders as you have all the required steps in order to reproduce the result on any machine: your windows computer, your macOS computer, your CI environment, etc. For example (these are pseudo-commands):

    1. npm i or npm ci
    2. npm run build
    3. electron package
    4. etc

    So you should add all these folders to you .gitignore file:

    # compiled output
/dist
/tmp
/out-tsc
/packages

# dependencies
/node_modules