How to build a React based Electron app

paachu
paachu
Feb 23 · 4 min read
npx create-react-app <your_app_name> --typescript
yarn add cross-env electron-is-dev                              ornpm install --save cross-env electron-is-dev
yarn add --dev concurrently electron electron-builder wait-on                             ornpm install concurrently electron electron-builder wait-on
after adding all required library
const electron = require("electron");const app = electron.app;const BrowserWindow = electron.BrowserWindow;const path = require("path");const isDev = require("electron-is-dev");let mainWindow;
function createWindow() {mainWindow = new BrowserWindow({ width: 900, height: 680 });mainWindow.loadURL(isDev? "http://localhost:3000": `file://${path.join(__dirname, "../build/index.html")}`);mainWindow.on("closed", () => (mainWindow = null));}app.on("ready", createWindow);app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();}});app.on("activate", () => {if (mainWindow === null) {createWindow();}});
"description": "<your project description>","author": "<author of app>","build": {"appId": "<com.your_app>"},"main": "public/electron.js","homepage": "./",
"scripts": {"react-start": "react-scripts start","react-build": "react-scripts build","react-test": "react-scripts test --env=jsdom","react-eject": "react-scripts eject","electron-build": "electron-builder","release": "yarn react-build && electron-builder --publish=always","build": "yarn react-build && yarn electron-build","start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\""},
yarn start
or
npm run start
yarn build
or
npm run build

paachu

Written by

paachu

a passionate coder …

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade