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


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 .
.exe on windows and
.dmg and .app on macos

You can know more on build for multiple OS on
Thank you ,
Achuth Hadnoor

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

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