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 appyarn add electron electron-builder wait-on concurrently --devyarn 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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Achuth hadnoor

Achuth hadnoor

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

More from Medium

How to make a Vue Router 4 Navigation Guard with Firebase v9 API and Pinia

Vite — Perfect build tool for Web development

Build an Ecommerce Store with Headless Commerce and CMS

How to create my first Open Source project