Blank page after build - Githubissues

Jericho1060 commented 1 year ago

Hi, I made a small test of this package and when developing, I don't have any trouble with it.

The problem is each time after the build, when starting the .exe that is generated, I still have a blank page, and it seems CSS and JS files are not loading. It's remembering me the old baseHref trouble with electron, but I can't figure how to fix it.

It's searching for files in c:\ and not in the app directory

I made it with the quick start example in the repo here.

cd ./examples/quick-start
npm install --save-dev nuxt-electron vite-plugin-electron vite-plugin-electron-renderer electron electron-builder
npm run build

And then starting the .exe ./release/0.0.0/win-unpacked/nuxt-electron-quick-start.exe

I didn't worked with electron from a long time, and maybe I am missing something.

Thank you in advance for your help.

HMaker commented 1 year ago

This is because Nuxt is trying to load CSS and JS from the absolute root path /. Take a look at .output/public/index.html:

<!DOCTYPE html>
<html >
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/entry.3c4ebcd6.css"> <!-- this should be relative ./entry.3c4ebcd6.css -->
<link rel="modulepreload" as="script" crossorigin href="/entry.f4ecee44.js"> <!-- this should be relative ./entry.f4ecee44.js -->
<script type="module" src="/entry.f4ecee44.js" crossorigin></script><script id="shim-exports">var exports = typeof module !== 'undefined' ? module.exports : {};</script></head>
<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildAssetsDir:"/",cdnURL:""}}</script></body>
</html>

In the production build Electron will load the file .output/public/index.html using the file:// URL protocol, the CSS and JS assets are relative to the index.html since they are in the same folder .output/public.

From what I researched Nuxt 3 does not support Static Site Generation which can be accessed from a disk folder using the file:// URL. It always require the site to be served by a webserver (i.e. http:// or https:// URL).

hafsalm commented 11 months ago

If anyone is facing the same issue, check out this repository; the build works well: https://github.com/gurvancampion/nuxt-electron-trpc-prisma

RichySano commented 11 months ago

If anyone is facing the same issue, check out this repository; the build works well: https://github.com/gurvancampion/nuxt-electron-trpc-prisma

@hafsalm, i don't understand well how you resolve this problem in your project. Can you explain?

HMaker commented 11 months ago

If anyone is facing the same issue, check out this repository; the build works well: https://github.com/gurvancampion/nuxt-electron-trpc-prisma

It can build but you can't run the production build, it works only in dev mode aka yarn run dev. I built myself that project, installed the electron app (from the releases/<VERSION> folder) and tried to use it, it won't load the page, the screen will stay blank.

OlaAlsaker commented 11 months ago

Please see my solution in this comment:

I have made a PR for this issue: #60

Meanwhile, the solution will be to add this to your nuxt.config.ts:
nitro: {
  runtimeConfig: {
    app: {
      baseURL: './',
    }
  }
}

Jericho1060 commented 11 months ago

Thank you @OlaAlsaker

It fixed at least the frontend part.

But all the /api/... routes seems to not work, or I don't know how I should write URL in useFetch.

caoxiemeihao / nuxt-electron

Blank page after build #55