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

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?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 19

Most upvoted comments

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>

+19

aristeu13 on May 21, 2020

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.

Solomka12 on Sep 13, 2019

<base href="./">

man u r a hero .thanks alot

mohfrea on Mar 30, 2023