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

Created on 25 May 2015 · 26Comments · Source: electron/electron

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?

Source

RinatMullayanov

Most helpful comment

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

Myrga on 31 Oct 2016

👍141 ❤56 🎉29 😄22 👎12 👀5 🚀5 😕2

All 26 comments

Related issue: #1747.

lolmaus on 25 May 2015

👎44 😕4 👀2 😄2 🚀1 ❤1 🎉1 👍1

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 25 May 2015

👍4 🚀1 ❤1

@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.

RinatMullayanov on 25 May 2015

👍25 ❤2

Have the same issue too. Electron tries to load resources from C:/ , relative paths not working.
Setting full path is not an option, files will not be loading if we will place application on another path.

odragora on 20 Feb 2016

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 13 Apr 2016

❤2

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

Myrga on 31 Oct 2016

👍141 ❤56 🎉29 😄22 👎12 👀5 🚀5 😕2

@Myrga you're a life save. I've been looking for an answer for 5 days now, no doc on this, until I came across this old post. Thanks a lot

guibot17 on 14 Nov 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)

johnmw on 12 Jan 2017

👍24 ❤16 🚀9 🎉7 😄7

thank you so much

breaded on 17 Feb 2017

@BesatZardosht You've got a typo in your URL:

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

should be:

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

(note the :)

anaisbetts on 17 Feb 2017

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!! 😄

mim-Armand on 17 Jun 2017

🎉3

Had same problem, Myrga's solution worked. I think 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 27 Jul 2017

👍2

Decided to remake my application in React. Once I added file-loader to my project, I started getting this issue again. changing the publicPath property in webpack.config.js to a relative path (for me ./app/ rather than /app/) fixed the problem.

P.S. seems that the dev server hates this. If you make this change and want to run a webpack dev server this change will confuse it. You'll need to switch back and forth as you go from working directly in electron and working on dev server (The reason i do this is to do css work, I find the dev server faster and more stable)

hexthedev on 4 Aug 2017

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

emirpoy on 22 Aug 2017

👎14 👀3 😕1

how to solve "Failed to load resource: net::ERR_FILE_NOT_FOUND"
whenever I add an image using "CSS" it throws this error. Do you guys have any solution for it???
not only image but the files like font file, it gives the same error.

Tahawahid on 20 Jun 2018

@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 9 Jul 2018

👍4

rkmyowin on 8 Sep 2018

👎6 👍2

@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 */ })

？

xiaomizhou66 on 22 Apr 2019

Path issue. Browser search your file in D:/css/app.css. This because somewhere in your code, have mentioned a wrong path. If you are given a path like /css/... this will search in D:/

Yuresh on 27 Apr 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 15 Jul 2019

👍1

@Myrga Thanks for saving my day. Loved your answer :)

zearaez on 16 Jul 2019

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

defusioner on 2 Sep 2019

👍4

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

Please @defusioner, is there any doc on this?

leodutra on 2 Sep 2019

@leodutra humm, I'm using react-cra and they are able to produce such config: https://create-react-app.dev/docs/deployment#building-for-relative-paths

defusioner on 3 Sep 2019

@defusioner Hum, that explains a lot.
Looks like this is not on the electron level, it's more a homepage for react apps, where this will replace the default root for any relative or root link.

In my case, using a Vue.js dist or raw electron, this probably won't work.

I think this package approach should be taken in consideration... like some electronBasePath on package.json

leodutra on 3 Sep 2019

I think the win.loadFile('index.html') is like a shit! After we compile it to EXE file by using electron-builder. It'll always show DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map.

But the win.loadURL() works well.

I spent 8 hours to find out that this is a bug that I can't solve.

Then I realized this bug is not important, because the map file is indeed imported.

For me, the real bug was caused by alert(): https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert