Create Electron React App steps

Create Electron React App steps:

1. npx create-react-app <your_app_name> --typescript

2. npm install --save cross-env electron-is-dev

3. npm install concurrently electron electron-builder wait-on

4. Create a file named "electron.tsx" in public folder with some electron code

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();
}
});

5. Add the following to package.json:

"description": "<your project description>",
"author": "<author of app>",
"build": {
"appId": "<com.your_app>"
},
"main": "public/electron.js",
"homepage": "./",

6. Modifiy scripts element like this:

"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 .\""
},

7. Add the following packages for bootstrap, axios, redux, router:

npm install react-bootstrap bootstrap

npm install redux redux-thunk react-redux

npm install react-router react-router-bootstrap react-router-dom react-router-redux

npm install axios

8. Now from command prompt execute command —

npm run start

9. For distribution purpose use command —

npm run build

Once yarn build command successful, you can see a new folder dist has been created inside your project folder. Navigate inside that folder and you can find installer file of your application.

Now you can install your app using that installer or can distribute it.