Electron app with Nex.js (loading html files not working)

Question

I'm building an electron app using Next.js and electron-next package so Electron can handle the "ouput" folder from Next.js. The app works great (simple html "hello world" test for all) for development; however, when I'm packaging the app with electron-builder, the page doesn't load and the DevTools is saying that it cannot load local files. I can see the files generated by electron-builder and nowhere I can find the static html files. Is there something I'm missing? Are the static files are included in the *.asar file?

This is for Electron under Windows 10. Below I'm showing the package.json file setup for electron-builder, as well as the call to open the initial HTML file on the app entry file (index.js)

// ---------package.json----------
 "scripts": {
    "start": "electron .",
    "build": "next build renderer && next export renderer",
    "dist": "npm run build && electron-builder"
  },
  "build": {
    "files": [
      "**/*",
      "renderer"
    ]
  },

// --------index.js----------
  // I can confirm that /renderer/out/start.html file is created

  const devPath = "http://localhost:8000/start"
  const prodPath = path.resolve('renderer/out/start.html')

  const entry = isDev ? devPath : ('file://' + prodPath)

  console.log(entry)
  win.loadURL(entry)

This is the error I get:

Not allowed to load local resource: file:///C:/Users//Desktop/text_exc_app/dist/win-unpacked/resources/renderer/out/start.html

SSR is mostly interesting for time to first paint when bandwidth is limited (mobile) and for SEO. Both are irrelevant in the case of an electron app. While nothing prevents you from still doing SSR, you may get a lot of worthless issues. — ghybs
I agree with you. I am trying this out as a way to be able to make electron apps using React. I previously tried a way using create-react-app but wanted to try something else since it was a bit cumbersome — Otto Gutierrez

Otto Gutierrez Otto Gutierrez · Accepted Answer · 2019-07-22T16:42:59

I found from another post that you can also do this (using app.getAppPath()):

const prodPath = path.join(app.getAppPath() ,'renderer/out/start.html')

This solved my problem!

I'm still not sure as to what is the difference between the two ways of accessing the files is, and why one works and the other one doesn't.

Electron app with Nex.js (loading html files not working)

1 Answers