Create a production ready electron app with create react app

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

create-react-app app
yarn add electron electron-builder wait-on concurrently --dev
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

"main":"public/electron.js"

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": [ 
            "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

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

And add homepage url

"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