2

i have a react app inside of my electron js i use electron-packager . for creating exe file of my project the exe file is generated success fully but the issue is that when i open the exe file only the electron app gets started since i dont do npm start my react app is not starting and the screen is white when the app start

in devlopement i can do npm start(to start react ) and then i can do npm run dev (to start electron) i am adding scripts that are in my pakage.json what changes must i do to fix this issue

"scripts": {
    "start": "electron .",
    "build": "react-scripts build",
    "dev": "electron .",
    "test": "react-scripts test",
    "electron": "npm:start && electron .",
    "eject": "react-scripts eject"
  },

enter image description here

const { app, BrowserWindow } = require("electron");
const isDev = require("electron-is-dev");

const path = require("path");
const url = require("url");
let mainWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 680,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // ...

  const urlLocation = isDev
    ? "http://localhost:3000"
    : url.format({
        // Running locally
        pathname: path.join(__dirname, "build/index.html"), // Adjust path here
        protocol: "file:",
        slashes: true,
      });
  // const urlLocation = isDev ? "http://localhost:3000" : "http://localhost:3000";
  mainWindow.loadURL(urlLocation);
  mainWindow.maximize();
});

when i do npm start this is how my electron app starts enter image description here

how do i connect my index.html file in build folder to electrons main.js file

folder structure of my react-electron project

folder structure of my react-electron project

enter image description here

enter image description here

enter image description here

vivek kn
  • 107
  • 1
  • 18
  • 45
  • 1
    You need to build the react app into static files, then put those into your electron project. (npm start to run a React app is only done during development) –  Aug 30 '22 at 12:08
  • how can i connecr my build folder to electron? – vivek kn Aug 30 '22 at 12:11
  • This should help: https://stackoverflow.com/questions/41495658/use-custom-build-output-folder-when-using-create-react-app –  Aug 30 '22 at 12:13
  • When the app start blank, please open the dev tools with ctrl-shift-i and see what's in the log. If there is nothing, try to launch your exe with a terminal (`cd ` then `./.exe`) and see what's the output of the software. This generally write an error if the app starts blank. If there is an error, edit your question and specify it. – Marius Van Nieuwenhuyse Aug 30 '22 at 12:23
  • @ChrisG the url u prvided is showing how to create custom folder for build it does not explain how i can connect my build folder to electron pls help – vivek kn Aug 30 '22 at 12:24
  • You don't need to "connect" it. A default electron app starts from index.html in the main folder. If you redirect your React app's build output to the electron main folder, you can then simply run `electron .` as usual and electron will open the React index.html. Since at this point, your React app is just a static index.html file and CSS and JS files. –  Aug 30 '22 at 12:27
  • There's also this: https://github.com/electron-react-boilerplate/electron-react-boilerplate –  Aug 30 '22 at 12:28
  • @ChrisG i have added the folder strcture of my app and have added code of main,js file also my app is not stating when i do electron . – vivek kn Aug 30 '22 at 12:36
  • i think the issue is because the index.html is inside the build folder and main,js is out side – vivek kn Aug 30 '22 at 12:39

1 Answers1

1

Currently, in your main.js you loading HTTP URL from your react dev server, started separately with npm start.

Instead of this, you need to build react app, and point electron to dist index.html, without using web server.

Add this to your main.js:

const path = require('path')
const url = require('url')

// ...

const urlLocation = isDev
    ? "http://localhost:3000" // Running from dev server
    : url.format({ // Running locally
        pathname: path.join(__dirname, 'dist/index.html'), // Adjust path here
        protocol: 'file:',
        slashes: true
    });

Also consider using electron-react-boilerplate

Catzilla
  • 312
  • 1
  • 5
  • @catsila i have tryed ur code but i am still getting white screen i have added screen shot of the error also i think i shoulf use `build/index.html` `dist/index.html` as the index.html is inside the buildfolder – vivek kn Sep 06 '22 at 07:58
  • i cant use boiler plate beacse it uses typescript which i am not femilere with – vivek kn Sep 06 '22 at 08:00
  • i have also added the main,js code what i have changed – vivek kn Sep 06 '22 at 08:03
  • Check "Network" tab in inspector to determine what file electron tries to load, also check this file is present in electron build. Maybe you want to include react build folder to electron build (`files` and `extraFiles` properties in `build` section of `package.json`) – Catzilla Sep 06 '22 at 08:22
  • i have added the screenshot of networktab some files are failing to load – vivek kn Sep 06 '22 at 08:31
  • Look's like react assets does not included in build. Add folder with compiled js and css in `build.files` property in `package.json`, and rebuild electron app – Catzilla Sep 06 '22 at 08:36
  • can u tell what changes must i make in pakage.json – vivek kn Sep 06 '22 at 08:39
  • and alredy i think there is css and js file in build folder i am not sure(i have added screenshot pls check and tell me if i have done something wrong) – vivek kn Sep 06 '22 at 08:42
  • Can you upload the whole project somewhere? It is quite difficult to solve the problem by screenshots – Catzilla Sep 06 '22 at 09:10