Launching main renderer window using 'file://' rather than `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`

[delewis13]

Hello and thanks for all your fantastic work!

This is probably a no-can-do, but I don't understand enough about Webpack to be sure, so thought i'd ask.

Currently running into a situation where I am trying to load images via <img src='file:///foo/bar.png' />. Because electron-webpack uses the dev server and loads a URL, these images trigger Not allowed to load local resource Electron warning. This warning doesn't occur in the packaged application, because then we are serving from file system.

Now I could just go and disable webSecurity while IS_DEV is true, but i'd prefer to keep my PROD / DEV as close as possible, bringing me to this question...

-> Is there any way to load renderer window from file-system / packaged while still maintaining all the HMR / webpack-dev-goodness-stuff?

[loopmode]

Hi. If you look around here, you'll find a bunch of issues regarding __static assets. The most popular problem there is a bit similar and also requires a different handling in development and production. Here's one solution to that one: https://github.com/loopmode/electron-webpack-static-examples/blob/master/src/renderer/utils/getStatic.ts

In case you just want to load specific files that you control, the static approach might be for you. Have a look at the examples repo I fiddled up.

If you need to load just any arbitrary files from just somewhere in the filesystem... Hmm. Depends on your use case, but you might be able to do some ipc and load the file from main process instead of renderer - send a message with the file path to main, read the file from main, serialize the content to a string, send that string with another message back to the renderer process... Let's see if other/more approaches come up 👍

[delewis13]

@loopmode thanks for the response :)

Yeah unfortunately they are files 'uploaded' by the user, which are subsequently copied to a subfolder inside of USER_DATA_DIR [as specified by OS], and then all images within this folder are rendered to browser.

I suppose I could change that so that the files get uploaded to the static dir... At the moment my thinking was to keep all user config stuff outside & seperate from my package for easier production debugging, but perhaps this is a misconception, and it is find to allow user to upload directly to static dir? Curious as to your opinion.

Definitely could go with the IPC way, was just hoping for a more elegant solution.

[loopmode]

Hi. I don't think copying to the static folder is the right way. The static folder is meant to bring well-known files from compile time to run time, so it would be quite a hack to add stuff there. Plus it's basically in the installed location, so not portable/user-specific. Also.. maybe it's not even possible - it might be inside the asar package. I'm not sure but it seems probable.

The ipc solution can be quite simple and elegant actually. But I agree there should be a better way. Maybe there even is - I haven't worked in electron for some time.

Actually I'll have a look in an actual old project where I loaded stuff from arbitrary locations.

[ibash]

@delewis13 electron-serve might work for you, e.g. serve the user data directory