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

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

On my way to be an indie developer, creator creating a focus on better living.

On my way to be an indie developer, creator creating a focus on better living.