Blank screen on first load (I'm probably doing something wrong)

[bivald]

First of all: Thank you for this project :)
Second of all: I'm new to Electron (this being my second app) so I'm most likely doing something wrong.

npm: 7.5.3, node 15.8.0

I ran into some road blocks trying to start a fresh project. All below is of a vanilla checkout from the template (I've done no changes yet):

The first was that @doyensec/electronegativity ^1.8.1 fails to install properly on OS X[1] (at least my version). Given that it's only a day old it's probably some compatibility. I resolved it by removing electronegativity from package.json and installing 1.8.0 globally. It will probably sort itself out since it's a downstream issue.

However, when I run ´npm run dev` I get the following in the electron window:

While it takes the 10 seconds for webpack to compile. If I then refresh the page (CTRL+R) after it's been compiled it runs like a charm.

Given that I am new to Electron I'm not sure if this is intended behaviour or not :)

[1]:

WIN-HVPUU8BOK0U:test bivald$ npm install  @doyensec/electronegativity@1.8.1
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /Users/xxxx/test/node_modules/@doyensec/electronegativity/dist/index.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/Users/.../node_modules/@doyensec/electronegativity/dist/index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

[2]

secure-electron-template-master myusername$ npm run dev

> secure-electron-template@9.2.0 dev
> concurrently --success first "npm run dev-server" "cross-env NODE_ENV=development electron ." -k

[0] 
[0] > secure-electron-template@9.2.0 dev-server
[0] > cross-env NODE_ENV=development webpack serve --config ./webpack.development.js
[0] 
[1] (node:87131) ExtensionLoadWarning: Warnings loading extension at /Users/myusername/Library/Application Support/secure-electron-template/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. 
[1] (node:87131) ExtensionLoadWarning: Warnings loading extension at /Users/myusername/Library/Application Support/secure-electron-template/extensions/fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. 
[1] Added Extension:  React Developer Tools
[1] [87131:0211/150957.101784:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/150957.102619:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[0] ℹ ｢wds｣: Project is running at http://localhost:40992/
[0] ℹ ｢wds｣: webpack output is served from /
[0] ℹ ｢wds｣: Content not from webpack is served from /Users/myusername/Downloads/secure-electron-template-master/app/dist
[1] [87131:0211/150958.309152:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/150959.364427:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151000.848240:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151001.417003:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151002.417035:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151003.547594:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[0] ℹ ｢wdm｣: asset bundle.js 4.03 MiB [emitted] (name: main) 1 related asset
[0] asset main.css 238 KiB [emitted] (name: main) 1 related asset
[0] asset index.html 517 bytes [emitted]
[0] Entrypoint main 4.26 MiB (4.68 MiB) = main.css 238 KiB bundle.js 4.03 MiB 2 auxiliary assets
[0] runtime modules 28.9 KiB 16 modules
[0] modules by path ./node_modules/ 3.71 MiB (javascript) 237 KiB (css/mini-extract)
[0]   javascript modules 3.69 MiB 285 modules
[0]   json modules 12.8 KiB
[0]     modules by path ./node_modules/browserify-sign/browser/*.json 2.23 KiB 2 modules
[0]   css ./node_modules/css-loader/dist/cjs.js!./node_modules/bulma/css/bulma.css 237 KiB [code generated]
[0] modules by path ./app/ 27.9 KiB (javascript) 585 bytes (css/mini-extract)
[0]   javascript modules 27.8 KiB 17 modules
[0]   css modules 585 bytes 3 modules
[0]   ./app/src/constants/routes.json 140 bytes [built] [code generated]
[0] optional modules 30 bytes [optional]
[0]   buffer (ignored) 15 bytes [optional] [built] [code generated]
[0]   crypto (ignored) 15 bytes [optional] [built] [code generated]
[0] util (ignored) 15 bytes [built] [code generated]
[0] webpack 5.21.1 compiled successfully in 6243 ms
[0] ℹ ｢wdm｣: Compiled successfully.
[1] [87131:0211/151004.355034:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151005.551551:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151006.451596:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151007.408898:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151008.721513:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151009.668266:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151010.695874:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151011.681174:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151012.684542:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151013.686433:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151014.355381:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151015.851809:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151016.355426:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151017.355711:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151018.355957:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151019.168291:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [87131:0211/151020.421169:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)

[reZach]

Thanks @bivald. Can you please post an issue in the electronegativity repository? I'd like this package to work for MacOS systems without a hitch, it's probably something small on their end.

Hm, I've looked at this issue many times, but upon the first time I start up the project in any given day I run into this issue. Any time thereafter I close and re-open the app, it works without a hitch. You can refresh the screen anytime after Compiled successfully. prints out in the console.

I'll try to look into this a bit later today.

[bivald]

@reZach Hmm, looks to be that it's trying to load http://localhost:40992/ which doesn't exist until webpack has started. The fact that it's blank is probably just Electrons way of handling Connection refused. If I run npm run dev-server in a separate tab and cross-env NODE_ENV=development electron . -k in another it works the first time.

So looks like the price to pay for not using file:// in local development :)

Any reasons for the live dev server, is that just for nicer dev experience or something about security stopping file:// in dev?

I know others has solved it with what appears to be some hacking, including rendering static HTML with dll injections and stuff

[Nantris]

@bivald if you refresh devtools does it resolve? Whoops, I can read. I only saw this issue on Linux. I didn't test on macOS but I tend to see a lot of the same issues across those two.

#51 (comment)

Electron will load the Webpack files once they exist, even if it begins trying before the files exist.

[bivald]

@slapbox That's the strange thing for me, if it tries to load localhost:/ like it does for dev it doesn't actually load it, even after webpack is finished. I need to refresh once the server is up. The reason for this is a timing issue I guess, if electron starts before webpack even starts its webserver (i.e get "connection refused" instead of the endless-loading until it's finished).

I've solved this by just running the dev-server separately from electron. So feel free to close this :) I'll keep hammering at it too see if I can get the autoreload to work out of the box without reloading, but it's not a huge issue.

The reason I'm doing this is that I use neon to run rust code in Node, and they don't get auto reloaded so I tend to open and close a lot of electron windows ;)

[reZach]

@bivald and @slapbox, it looks like an issue with webpack serve. webpack serve completes "successfully" before all assets are compiled, which leads electron to be started too early sometimes. I've posted an issue that will hopefully gain traction. I do not see how we can solve this here, besides rudimentary timeouts or manual work.

Subsequent runs, running npm run dev-server, or reloading get around this issue but do not fix it completely.

[netpoetica]

Just FYI, I am getting this same issue on a Windows machine with a fresh clone:

$ npm run dev

> secure-electron-template@9.2.2 dev C:\Users\keithl\playground\secure-electron-template
> concurrently --success first "npm run dev-server" "cross-env NODE_ENV=development electron ." -k

[0]
[0] > secure-electron-template@9.2.2 dev-server C:\Users\keithl\playground\secure-electron-template
[0] > cross-env NODE_ENV=development webpack serve --config ./webpack.development.js
[0]
[1]
[0] i ｢wds｣: Generating SSL Certificate
[0] i ｢wds｣: Project is running at https://localhost:40992/
[0] i ｢wds｣: webpack output is served from /
[0] i ｢wds｣: Content not from webpack is served from C:\Users\keithl\playground\secure-electron-template\app\dist
[1] (node:35488) ExtensionLoadWarning: Warnings loading extension at C:\Users\keithl\AppData\Roaming\secure-electron-template\extensions\lmhkpmbekcpmknklioeibfkpmmfibljd: Unrecognized manifest key 'co
mmands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' i
s unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or di
rectory name _metadata. Filenames starting with "_" are reserved for use by the system.
[1] (node:35488) ExtensionLoadWarning: Warnings loading extension at C:\Users\keithl\AppData\Roaming\secure-electron-template\extensions\fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'br
owser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are
reserved for use by the system.
[1] Added Extension:  React Developer Tools
[1] [35488:0211/204834.880:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [35488:0211/204834.883:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [35488:0211/204835.809:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [35488:0211/204836.811:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [35488:0211/204837.809:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [35488:0211/204838.809:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[1] [35488:0211/204839.809:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)
[0] i ｢wdm｣: asset bundle.js 4.03 MiB [emitted] (name: main) 1 related asset
[0] asset main.css 238 KiB [emitted] (name: main) 1 related asset
[0] asset index.html 517 bytes [emitted]
[0] Entrypoint main 4.26 MiB (4.68 MiB) = main.css 238 KiB bundle.js 4.03 MiB 2 auxiliary assets
[0] runtime modules 28.9 KiB 16 modules
[0] modules by path ./node_modules/ 3.71 MiB (javascript) 237 KiB (css/mini-extract)
[0]   javascript modules 3.69 MiB 285 modules
[0]   json modules 13.6 KiB
[0]     modules by path ./node_modules/browserify-sign/browser/*.json 2.23 KiB 2 modules
[0]   css ./node_modules/css-loader/dist/cjs.js!./node_modules/bulma/css/bulma.css 237 KiB [code generated]
[0] modules by path ./app/ 27.9 KiB (javascript) 585 bytes (css/mini-extract)
[0]   javascript modules 27.7 KiB 17 modules
[0]   css modules 585 bytes 3 modules
[0]   ./app/src/constants/routes.json 140 bytes [built] [code generated]
[0] optional modules 30 bytes [optional]
[0]   buffer (ignored) 15 bytes [optional] [built] [code generated]
[0]   crypto (ignored) 15 bytes [optional] [built] [code generated]
[0] util (ignored) 15 bytes [built] [code generated]
[0] webpack 5.21.1 compiled successfully in 6926 ms
[0] i ｢wdm｣: Compiled successfully.
[1] [35488:0211/204840.808:ERROR:CONSOLE(1)] "Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js (1)

Getting a white screen, nothing actually loads

[netpoetica]

If I run npm run dev-server in a separate tab and cross-env NODE_ENV=development electron . -k in another it works the first time.

In my case on Windows, this does not solve the issue

[reZach]

@netpoetica , you can refresh (ctrl + r) once the i ｢wdm｣: Compiled successfully. message has been shown in the console and then you are good to go. This error only happens when running locally.

[netpoetica]

@netpoetica , you can refresh (ctrl + r) once the i ｢wdm｣: Compiled successfully. message has been shown in the console and then you are good to go. This error only happens when running locally.

Thanks reZach - in my case, this is not the case. No matter how much Ctrl + R, Reload of Force Reload, the request to localhost always get no reply.

The call to localhost just gives no response at all. I am running npm run dev from a Git Bash terminal

[reZach]

@netpoetica I've pushed a new update to the template, can you get the latest? I had thought loading contents over https was more secure for this template, but apparently I too experienced this issue where refreshing does not fix anything.

The revert seems to have fixed it (back to where it was).

[netpoetica]

Thanks @reZach for taking a look 💪 latest pull solves this

[reZach]

Sure thing @netpoetica! I'm glad I was able to solve it fast.

[reZach]

@bivald, @slapbox, @netpoetica it looks like there is a way to fix this, but unfortunately I do not know how to accomplish this suggestion. I will leave it to any one of you while I look at some other issues in this repo first.

[twabbott]

Here's a solid repro:

• delete node_modules
• re-run npm install
• npm run dev (note the blank screen)
• Ctrl+R

And now everything works.

Now do this:

• go to the message of the day page.
• Enter a message and save.
• Quit
• restart

Now notice that the page loads up just fine.

[reZach]

@bivald / @slapbox / @netpoetica / @twabbott I've made changes to the template so that the app (when loaded in development, the only configuration we see this issue due to the webpack dev server) is guaranteed to load after webpack is finished. Thanks to this comment, I've made changes which you can view the commit of files you need to change - OR if you simply get the latest version/release you should be set to go.

Please re-open if you are still having problems. I was able to follow the repro steps by @twabbott and am not able to replicate the issue any longer.

1. Delete node_modules
2. npm i
3. npm run dev
4. Console output:

PS C:\Users\me\source\repos\secure-electron-template> npm run dev

> secure-electron-template@9.4.0 dev
> concurrently --success first "node dev-scripts/prepareDevServer.js" "node dev-scripts/launchDevServer.js" -k

[0] Preparing webpack development server.
[1] Webpack development server is ready, launching Electron app.