How to make react project exe with electron.js

Viewed 538

I am trying to make the exe file of my reactjs project with the help of electron.js but i am nota able to create that, its just showing white screen after creation. Any idea, how to do that.

My package.json

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "description": "desc",
  "author": "author",
  "homepage": "./",
  "main": "public/electron.js",
  "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",
    "preelectron-pack": "npm run-script build",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build",
    "ebuild": "npm run build && node_modules/.bin/build",
    "dev": "concurrently \"npm start\" \"wait-on http://localhost:3000 && electron .\"",
    "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "compile": "yarn electron-compile"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-preset-react": "^6.24.1",
    "electron": "^11.3.0",
    "electron-builder": "^22.9.1",
    "electron-packager": "^15.2.0",
    "electron-reload": "^1.5.0",
    "nodemon": "^2.0.7",
    "nw": "^0.44.1-sdk",
    "nw-builder": "^3.5.7"
  },
  "build": {
    "appId": "12340214",
    "extends": null,
    "win": {
      "icon": "Assets/icons/win/icon.ico"
    },
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "dist/**/*",
      "package.json",
      "./public/electron.js"
    ],
    "directories": {
      "buildResources": "assets"
    }
  }
}

public/electron.js:

const { app, BrowserWindow } = require('electron');
// const isDev = require('electron-is-dev');   
const path = require('path');
// const url = require('url');
let mainWindow;
 
function createWindow() {
    mainWindow = new BrowserWindow({
        width:800,
        height:600,
        show: false
    });
    // const startURL = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`;
    const startURL = `file://${path.join(__dirname, '../build/index.html')}`;
    // mainWindow.loadURL(url.format({
    //     pathname: path.join(__dirname, 'index.html'),
    //     protocol: 'file:',
    //     slashes: true
    //   }));
    mainWindow.loadURL(startURL);
 
    mainWindow.once('ready-to-show', () => mainWindow.show());
    mainWindow.on('closed', () => {
        mainWindow = null;
    });
    
}
app.on('ready', createWindow);

Whenever i try to run the commands, the setup file is created but it is showing only white screen, and when i try to run it simple i.e normal electron cmd to run the react project in app window it runs successfully.

0 Answers
Related