Create your first real Electron application

Objective

I recently published my first electron application Znote (a developer friendly Markdown editor 'self promotion here' ☺️) into the Mac and Windows Stores.
In this article, I would share this Electron experience and learn you basics to build, deploy and update your first electron application with React.
I won't explain step by step how to plug React with Electron, (see the result directly here), I prefer to draw your attention to the following points.

React + Electron

The first thing you should do is to upgrade dependencies to ensure to be up-to-date yarn upgrade --latest and avoid later complications. Sometimes, you could expriment issues and incompatibilities (especially with electron-builder or node integration). You can use the example project as compatible reference with Electron 9.

Performance

To avoid to build an extra fat app, don't forget to inspect what you deliver in your application. React and Webpack concat and compress all dependencies into the public/ folder, so you shouldn't have any node_modules/ or exclusively dependencies declared outside React. (e.g. electron.js).

  "dependencies": {
    "electron-is-dev": "1.2.0",
    "electron-log": "^4.2.1",
    "update-electron-app": "^1.2.0"
  },
  "devDependencies": {
    "concurrently": "5.2.0",
    "cross-env": "7.0.2",
    "electron": "9.0.4",
    "electron-builder": "^22.7.0",
    "prettier": "^2.0.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.4.1",
    "wait-on": "5.0.1"
  },

Disable the asar build property to verify the content of your app into dist/mac/MyApp.app/Contents/Resources/app/

  "build": {
    "asar": false
   }

Above all, to avoid security leaks, remember to exclude private files from your build (e.g. password, env file...)

  "files": [
    "build/**/*",
    "!docs/",
    "!scripts/"
  ]

Icons

The next thing to do is to create your icon. Once you have designed your app icon (at least 512x512px), you could use the python script script/generate-iconset.py to generate all required formats and obtain a glossy icon for Mac and Windows

Start to install Imagemagick brew install imagemagick

Mac icns

cd assets/bin
python3 ../../scripts/generate-iconset.py icon.png

Win ico

cd assets/bin/icon.iconset
convert icon_16x16.png icon_32x32.png icon_64x64.png icon_128x128.png icon_256x256.png icon.ico
mv icon.ico ../

more informations on electron-builder icons: here

Deploy on Github

Start to generate a personal token: https://github.com/settings/tokens

export GH_TOKEN="your github token"
yarn deploy

The deploy command is configured to build concurrently Mac and Windows platforms:

  "deploy": "yarn react-build && yarn electron-build --mac --win --publish always"

Then validate your release here:
https://github.com/YOUR_NAME/YOUR_REPO/releases

Auto update

The minimal code to add in your project to auto-update your deployed app:
electron.js

require("update-electron-app")({
  repo: "alagrede/react-electron-example",
  updateInterval: "1 hour"
});

package.json

  "build"{
    "publish": {
      "provider": "github"
    }
  }

For more information see: electron update

How to test

Currently a 1.0.0 release is deployed for demo

• set package.json version: 0.9.0
• Build and install app with dmg (the auto-update is disabled during development)
• Once app is installed, wait the update popup and restart the application

Congrats 🥳

You have just deployed and updated your first Electron application.
I hope you enjoyed this tutorial.
We will see next time how to sign and deploy your app into the Mac Store.