electron: Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css

I have such a structure in the application: file struct

I write in head my index.html:

<link rel="stylesheet" href="css/app.css"/>

run electron and get error:

capture Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css Please everyone, tell me, how should I set the path to the file?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 31 (2 by maintainers)

Links to this issue

javascript - fresh cordova build from angular2 build white screen on android - Stack Overflow

Commits related to this issue

Fix: Bug that did not allow to inject react code to the index.html in build folder Solved by fixing the loading path in electron.js, and by changing the homefolder in package.json according to this ... — committed to alfonso46674/ElectronApps by alfonso46674 3 years ago

Most upvoted comments

If this occur when having <base href="/"> in the index.html, just replace it by <base href="./">.

+316

Myrga on Oct 31, 2016

ps: if you came here and are using create-react-app, try putting "homepage": "./", in your package.json. (Although apparently this is not currently supported so you might have other issues with fonts and such, which might require moving those assets to your /public folder)

+72

johnmw on Jan 12, 2017

Related issue: #1747.

+62

lolmaus on May 25, 2015

You can save the html file as “save as web page” then try to open in chrome. This worked for me.

+30

emirpoy on Aug 22, 2017

@shama Thanks for snippet. I get an error because the use <base href=“/”>, without this error does not occur. Sample work https://github.com/RinatMullayanov/angular-boilerplate branch electron.

+28

RinatMullayanov on May 25, 2015

+14

rkmyowin on Sep 8, 2018

In case you are here with the same problem using Webpack 2.x, React and/or Redux, there is a chance that this would solve your problem:

Search your project directory for “publicPath” and change its value from / to ./ with all the different available boilerplates this setting may be found in different locations, In my case using redux-cli which uses redux-starter-kit, it was in the project.config.js:

publicPath: './',

Also if you are building for Electron you may need to add/modify the Webpack target property. Stay Happy!! 😄

+12

mim-Armand on Jun 17, 2017

@Tahawahid @RinatMullayanov It’s because of your all files are being served from the local file system rather than the relative app path. The solution is to intercept the file protocol. Do following changes in main.js file

Main.js

mainWindow = new BrowserWindow({width: 1100, height: 700, icon: __dirname + '/icon.ico'}) mainWindow.loadURL(url.format({ pathname:'index.html', protocol: 'file', slashes: true }))

app.on('ready', () => { protocol.interceptFileProtocol('file', (request, callback) => { const url = request.url.substr(7) /* all urls start with 'file://' */ callback({ path: path.normalize(${__dirname}/${url})}) }, (err) => { if (err) console.error('Failed to register protocol') }) createWindow() /* callback function */ })

itsaakashpatel on Jul 9, 2018

Try this as an alternative way to get around this path issue:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <script>
    var link = document.createElement('link')
    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('href', require('path').join(__dirname, 'css', 'app.css'))
    document.head.appendChild(link)
    </script>
  </body>
</html>

shama on May 25, 2015

@Myrga well, you would probably set "homepage": "./" in the package.json instead of hard-coding these things.

defusioner on Sep 2, 2019

This also did the trick. Thanks for Mr. @itsaakashpatel for the insight.


// ...
const { protocol } = require('electron')
// ... 
// run the next block right before <BrowserWindow>.loadFile()
const htmlRootDir = 'dist/'
const indexFile = 'index.html'

protocol.interceptFileProtocol(
    'file',
    (request, callback) => {
        const url = request.url.substr(7) // strip "file://" out of all urls
        if (request.url.endsWith(indexFile)) {
            callback({ path: url })
        } else {
            callback({ path: path.normalize(`${__dirname}/${htmlRootDir}/${url}`) })
        }
    }, 
    error => console.error(error) 
) 
// ...

Just replace htmlRootDir and/or indexFile for your expectations. Tested on Linux

leodutra on Jul 15, 2019

Had same problem, Myrga’s solution worked. I think <base href="/"> must consider / as global root directory for the PC when using file protocol. While “./” works as a relative reference to the current folder. Just a guess, when using http:// protocol on port 4200 (Where I serve my Angular4 app) everything works with “/”. For file protocol have to use “./”

hexthedev on Jul 27, 2017

I have the same issue getting some font

I have added this to my CSS @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); I have even tried adding this to my html: <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

I have also tried:

<link rel="stylesheet" type="text/css" href="http//fonts.googleapis.com/css?family=Open+Sans" />

<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Open+Sans" />

but I get this error: Failed to load resource: net::ERR_CONNECTION_REFUSED

BesatZardosht on Apr 13, 2016