Electron-builder: Resources from static/media are not resolvable after package

[Solomka12]

• Version: 21.2.0

• Target: Linux deb

I am using CRA to build the app and getting such build structure:

After building the project with electron, the application does not substitute the correct path to the files from static/media and does not find them.
./static/media/logo.4c2ab132.svg -> file:///static/media/logo.4c2ab132.svg.

Although the paths for the files in static/css and static/js are defined correctly (full path to app.asar).
./static/media/logo.4c2ab132.svg -> file:///home/user/path/to/app.asar/build/static/css/main.a20d4a01.chunk.css.

In the final index.html all this file paths are relative.

What is the problem?

[defusioner]

Hey,

Actually it could be that you are doing it wrong. I'm having almost similar issue but my static paths from create-react-app are working well:

<script src="./static/js/main.25f70597.chunk.js"></script>

[Solomka12]

@defusioner
Yes, I understand that I'm doing something wrong, I need to find out what)
My static paths from create-react-app are working well too, including js and css.
For example path to main.js is the same:
<script src="./static/js/main.814f72e3.chunk.js"></script>

The problem is only with media files (png, svg, mp3, etc.) in electron build when static/media files are requested.

Maybe wrong build configuration in package.json could lead to this behavior. But I think it's configured correctly, as far as I'm concerned.

[defusioner]

@Solomka12 oh, I’ve got the same problem then. All static images that are not resolvable after package via js code.

[srepollock]

Side question on static assets: is there a way to add non-image file types? (Such as *.json, *.mp3, *.gif)

[Solomka12]

Side question on static assets: is there a way to add non-image file types? (Such as *.json, *.mp3, *.gif)

@srepollock in my case, this applies to all types of files. I have .mp3 .ogg and .svg files in a static folder, the result is the same. So a solution is still needed.

[srepollock]

So what you're saying @Solomka12 is that only .js, .svg are the only ones loaded from the project depicted above? It sounds like it's omitting anything other than specific file types

[Solomka12]

@srepollock I'm saying that builded .js and .css are loaded correctly. But everything in static/media (.mp3, .svg, .jpg) is not resolvable after electron packaging.

In react app I import files from src directory this way:
<audio preload="auto" autoPlay={true}> <source src={require("../files/sound.mp3")} type="audio/mpeg"/> </audio>
or images:
import logoImg from "../assets/images/pinngle/logo.svg"; ... <img className="app-logo" src={logoImg} alt=""/>

Then I building app and webpack bundles all imported files to build/static/media. It also bundles all js and css files to static/js and static/css.
And everything works as it should at this moment.
But after package build directory with electron-builder, the resulting electron app loads well js and css but fails to find static files at static/media

[srepollock]

I am seeing a similar issue in my own projects. While I don't use Webpack to bundle into static assets, I do have the entire folder (aptly named assets) included in my bundle. I've also logged a similar issue in #4226 outlining my own issues.

By reading so far and getting more explanation, this looks to be an electron-builder issue by not allowing assets outside of a select group (being js, html, css or web allowed images).
I'm not to sure on how to properly use the FileSet.from/FileSet.to file mapping as given in the docs but from what I've researched it's supposed to do the trick.

That said, I still don't think it's working correctly and would like to ask someone from the project to take a look in the latest version of this project.

[Solomka12]

I just manually placed the files in a public folder and after packaging they are still unavailable, which means the problem is not related to the webpack or CRA. Although all these files are present in app.asar and if you manually set the correct path, the file will be available.

Maybe FileSet.from/FileSet.to or manipulating with files and buildResources in package.json is close to the right solution but I didn’t succeed with it.

I found electron-serve for serving static files in electron. But I did not understand how it works because I did not have time to use it.

But I found a solution for myself. I used protocol.interceptFileProtocol() for modifying paths to requested resources. Example of usage on stackoverflow

@srepollock, I think it's suitable for you too.
Here is needed part of my code in main.js:

mainWindow.once('ready-to-show', () => {
    electron.protocol.interceptFileProtocol('file', (request, callback) => {
        const filePath = request.url.replace('file://', '');
        const url = request.url.includes('static/media/') ? path.normalize(`${__dirname}/${filePath}`) : filePath;

        callback({ path: url });
    }, err => {
        if (err) console.error('Failed to register protocol');
    });
});

I feel it more like workaround, but seems it's appropriate solution in context of electron applications.

[srepollock]

Just wanted to follow this up and post that this fix did solve my issue! Thanks @Solomka12 !

[Solomka12]

I just found that the solution I provided above doesn't work on windows. So I still need the right solution or at least adapt interceptFileProtocol solution for windows platform.

[n3tman]

Not sure if it helps, but specifying extraResources and requesting path.dirname(__dirname) helped in my case (portable Windows build):

Example:

"build": {
    "extraResources": "sounds/*.mp3",

Then recursively get all files using path.dirname(__dirname) + path.sep + 'sounds'

[aristeu13]

I also had this problem, the files in 'build/static/media/*.png' (and gifs too). They were not found.
solution:
note: I'm using react and building with electron
https://stackoverflow.com/questions/45178195/image-assets-not-found-in-packaged-electron-app-angular4-and-webpack
Only add <base href="./"> in 'public/index.html'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <base href="./">
  <link rel="icon" href="%PUBLIC_URL%/example.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700&display=swap" rel="stylesheet">


  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <title>Example</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

</body>

</html>

[oosswwaalldd]

I also had this problem, the files in 'build/static/media/*.png' (and gifs too). They were not found.
solution:
note: I'm using react and building with electron
https://stackoverflow.com/questions/45178195/image-assets-not-found-in-packaged-electron-app-angular4-and-webpack
Only add <base href="./"> in 'public/index.html'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <base href="./">
  <link rel="icon" href="%PUBLIC_URL%/example.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700&display=swap" rel="stylesheet">


  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <title>Example</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

</body>

</html>

You just saved my life!