New Application when packaged shows a blank screen

[ospfranco]

Preflight Checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Issue Details

• Electron Forge Version:
  6.0.0-beta.48
• Electron Version:
  v8.0.0
• Operating System:
  macOS 10.15.13

Expected Behavior

Create a new project from typescript and webpack template and when packaged I expect the same output as when developing the app

Actual Behavior

I get a blank screen and nothing is loaded

To Reproduce

Run the following commands:

create-electron-app testApp --template=typescript-webpack
yarn package

Then navigate to the out folder and open the .app, nothing is shown, the console shows no errors, I also tried with yarn make and still nothing.

opening the .app:

on yarn start output:

I expect at least a new configuration project to work.

[malept]

This was fixed in beta 49.

[nasiriyima]

Still having the same issue in 2023 on beta 63. Has anyone gotten a solution to this problem?

My wild guess is; it's something that has to do with the application's entryPoint and the mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY) function. I have been on this issue for the past couple of weeks without any success. Even though, I later discovered that whenever, I have the application running in development using npm start the packaged application starts working, because its point to http://localhost:3000 instead of the the local file system.file:///C

Any pointers to any viable solution will be greatly appreciated.

[nasiriyima]

@ospfranco After going through hell and back on this issue, I guess I was able to figure out a possible solution. Although this is a very old thread. But I just decided to give a response incase someone comes across this problem like I did, but didn't get any pointers. Ironically, I recently came across a post on Quora about the most frustrating aspects of programming, Which included when a programmer searches or posts a question on StackOverflow without getting any answer or comment! 😂

In my own case, I am using the Svelte frontend framework with electron-forge and Webpack. Which should be similar with your configuration, except for the part were you're using React.

1. Firstly, I had to update the way the application is loaded into the main application window. Such that when the application is in development, it uses the default Webpack main window application entry constant. Otherwise it loads the application from the file system, shown as follows:

   mainWindow.loadURL((app.isPackaged)? `file://${__dirname}/../renderer/main_window/index.html`:MAIN_WINDOW_WEBPACK_ENTRY);
   

2. Also ensure that Webpack JS bundle file (index.js or build.js) script tag in the index.html file is loaded from the correct directory. In my own case, the index.js file was in the same directory with the index.html file, but Webpack was loading it from a different directory. Since it is being loaded automatically by the electron-webpack-plugin in development.

3. At this point the application should work. However, another issue that you may encounter is routing. If you're using react-router, which I guess is quite similar to svelte-navigator. In this case, you may have to use memory or hash based routing, since electron is a minimal browser and does not support browser type navigation. To achieve navigation in svelte, I created a memory history, loaded it to the Router and used the navigate function in the newly created history for navigation around the application. Shown as follows:

   import {Router, Route, createHistory, createMemorySource } from "svelte-navigator"
   
   const history = createHistory(createMemorySource());
   
   const {navigate} = history;
   window.navigate = navigate;
   
   <Router {history}>
      /* -------- */
   </Router>
   

4. Hence, whenever I need to navigate to a route I can navigate like so:

   <a href="#" on:click={ () => window.navigate("routepath") }>Home</a>
   

   OR

    function submit() {
       window.navigate("routepath");
    }
   

[JordanHoang]

2. Also ensure that Webpack JS bundle file (index.js or build.js) script tag in the index.html file is loaded from the correct directory. In my own case, the index.js file was in the same directory with the index.html file, but Webpack was loading it from a different directory. Since it is being loaded automatically by the electron-webpack-plugin in development.

@nasiriyima Step #2 is what is going wrong with our project. I am manually able to fix the script src value to get it to work properly, but were you able to figure out a more persistent way to programmatically set the correct file path so that it doesn't get overwritten each time the .webpack directory gets rebuilt?

[JordanHoang]

2. Also ensure that Webpack JS bundle file (index.js or build.js) script tag in the index.html file is loaded from the correct directory. In my own case, the index.js file was in the same directory with the index.html file, but Webpack was loading it from a different directory. Since it is being loaded automatically by the electron-webpack-plugin in development.

@nasiriyima Step #2 is what is going wrong with our project. I am manually able to fix the script src value to get it to work properly, but were you able to figure out a more persistent way to programmatically set the correct file path so that it doesn't get overwritten each time the .webpack directory gets rebuilt?

Solved!

Used output.publicPath in my webpack.renderer.config.js to get the appropriate relative path in the index.html