Production ready electron app setup with ReactJS

Achuth Hadnoor

Achuth Hadnoor •April 28, 2021

2 min read12,000 views


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

  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

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

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

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


2)Add scripts as below

  "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

"build": { 
   "appId": "com.example.exampleapp",
    "compression": "normal",
    "productName": "Example",
    "directories": {
      "buildResources": "build", 
     "output": "dist"    }, 
    "mac": {  
     "icon": "assets/macos/logo.icns", 
     "type": "distribution",
      "target": [ 
    "publish": {
        "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": [   
 "description": "Example", 
     "category": "Network;Feed",   
   "publish": {  
      "provider": "github" 

add below files to scripts in 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


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