3

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.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • Any errors in the [console](https://www.electronjs.org/docs/tutorial/application-debugging#renderer-process)? – Mosh Feu Mar 01 '21 at 09:37
  • I have tried it using changing the BrowserRouter to HashRouter and the application is running, but its not rendering the full functionality of the application, means on redirecting to same pages, the app crashes – Apurv Singla Mar 02 '21 at 05:55

0 Answers0