Create your first real Electron application
Tags: electron, react, deployment
Published: 2020-06-14 14:32:11

---
title: Create your first real Electron application
published: true
description: Electron application starter
tags: electron,react,deployment
//cover_image: https://direct_url_to_image.jpg
---
# Objective
I recently published my first electron application [Znote](https://znote.lagrede.fr) (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](https://github.com/alagrede/react-electron-example/)), I prefer to draw your attention to the following points.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wphvxm6kszzeaya7tzpt.jpeg)

# 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](https://github.com/alagrede/react-electron-example/) 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](https://www.electron.build/icons)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tpa31771j5ad9lybvu64.png)

## 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](https://www.electronjs.org/docs/tutorial/updates)
### 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.**