Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Resources from static/media are not resolvable after package

See original GitHub issue

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?

Issue Analytics

State:
Created 4 years ago
Comments:18

Top GitHub Comments

18reactions

aristeu13commented, May 21, 2020

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>

4reactions

Solomka12commented, Sep 13, 2019

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.

Top Results From Across the Web

Spring boot app does not serve static resources after ...

Controllers RequestMappings are working fine, problems are only with the static resources. For what it's worth, it's usual with Boot to simply ...

2053169 – verify-api-int-resolvable throws "error

Bug 2053169 - verify-api-int-resolvable throws "error: You must be logged in to the server (Unauthorized)" after rebooting masters with a future date.

DNS Requirements for the vCenter Server Appliance

If you plan to use an FQDN for the appliance system name, you must verify that the FQDN is resolvable by a DNS...

What is the meaning of error: 'Unable to resolve host name' or ...

Once you enter the hostname by using the command prompt, following error ... If the domain is showing as active but not working,...

What is Amazon Route 53 Resolver?

If you have workloads that leverage both VPCs and on-premises resources, ... The following diagram shows hybrid DNS resolution with Resolver endpoints.