Achuth Hadnoor

Production ready electron app setup with ReactJS

#web#MacOS#windows
Achuth Hadnoor

Achuth Hadnoor •April 28, 2021

2 min read12,000 views

Introduction

Hey guys ,

I have been playing around with electron to make a menubar app that is used to save single line code snippets . I wanted to ship the electron app faster and i was learning reactJS.So, i decided to use (Create React App ) CRA to build the app that runs on both browser and as an electron app this helped me to build a smooth web and native experience. Turns out that process is hard to set up .So i decided to simplify and share the experience to help anyone to easily setup.

Initial steps

Install
  yarn add electron-is-dev

Create a file in public/electron.js so we can access the same file after build

you might notice this file here preload.js

package.json
  webPreferences: {
    nodeIntegration: false,
    preload: __dirname + ‘/preload.js’
  }

this file actually helps you to attach electron to window object to access native modules like below…

public/electron.js
window.remote = require("electron").remote

Now since its clear how to access native modules ..

Let’s make some changes in package.json file

1)first add the path of main to electronjs

package.json
  "main":"public/electron.js"

2)Add scripts as below

package.json
  "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

now when you type

  yarn electron-dev

you will see the app runs in electron shell

😱isn’t that insane!!!

Now let’s do the actual shit (Build to production)

In package.json

package.json
"build": {
   "appId": "com.example.exampleapp",
    "compression": "normal",
    "productName": "Example",
    "directories": {
      "buildResources": "build",
     "output": "dist"    },
    "mac": {
     "icon": "assets/macos/logo.icns",
     "type": "distribution",
      "target": [
            "pkg",
            "dmg",
            "mas"
      ],
    "publish": {
        "provider":"github",
        "token": "${GITHUB_TOKEN}"
      }
 },
  "mas": {
    "entitlements": "assets/entitlements.mas.plist",
    "entitlementsInherit": "assets/entitlements.mas.inherit.plist",
    "provisioningProfile": "assets/embedded.provisionprofile"
},
"win": {
      "target": "nsis",
   "icon": "assets/windows/logo.ico",
     "publish": {
  "provider": "github"
    }
   },
 "linux": {
     "icon": "assets/logo.png",
      "target": [
     "snap",
   "AppImage"
   ],
 "description": "Example",
     "category": "Network;Feed",
   "publish": {
      "provider": "github"
     }
  }
 },

add below files to scripts in package.json

package.json
  "react-build": "react-scripts build",
  "release": "yarn react-build && electron-builder --publish=always",
  "build": "yarn react-build && yarn electron-build",

And add homepage url

package.json
  "homepage":"./"

After running yarn build you will get the electron app in the dist folder how ever you can only build native versions on particular OS . Like .exe on windows and .dmg and .app on macos

You can know more on build for multiple OS on electron.build.

Thank you ,

Achuth Hadnoor

Subscribe to my newsletter

Get weekly inspiration and tips on product building, marketing and growing audience.follow me on Twitter

- subscribers – View all issues

Subscribe to my newsletter

Get weekly inspiration and tips on product building, marketing and growing audience.follow me on Twitter

- subscribers – View all issues