#web#MacOS#windows

Production ready electron app setup with ReactJS

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

6,293 subscribers – 34 issues