Electron Looking for Resources in Root Folder
<p>We are building a web app (in Angular 2, although I am not sure if that is the reason for my issue) that we also need to run as an Electron application. I have branched out the solution and replaced items in the package.json so that on start it launches Electron. For reasons that I don't understand, in our solution it is looking for relative paths of resources in the root folder of my drive, not the folder that the app was launched from (C:\Source\NameOfMyApp).</p>

<p>Can someone explain why this may occur?</p>

<h2>Changes to package.json</h2>

<pre><code>{
    "main": "electron-main.js",
    "scripts": {
        "start": "electron ."
    }
},
"devDependencies": {
    "electron-prebuilt": "^1.2.0"
}
</code></pre>

<p>When I run <code>npm start</code>, the index.html runs but it cannot find any resources.</p>

<h2>Code in index.html</h2>

<pre><code>&lt;link rel="stylesheet" href="test.css"&gt;
</code></pre>

<p>Where test.css is a file that does exist in the same folder as index.html</p>

<h2>Code in electron-main.js</h2>

<pre><code>const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;
function createWindow() {

    mainWindow = new BrowserWindow({ width: 1200, height: 900 });
    console.log("__dirname", __dirname);

    mainWindow.loadURL(`file://${__dirname}/index.html`);

    // Open the DevTools.
    mainWindow.webContents.openDevTools();

    mainWindow.on('closed',
        function() {
            mainWindow = null;
        });
}

app.on('ready', createWindow);
</code></pre>

<h2>DevTools console error</h2>

<p><a href="https://i.stack.imgur.com/2s75M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2s75M.png" alt="The error message in the DevTools Console"></a></p>

<p>My understanding is that it should look for files in the same folder that the app was created from, not from the root, but Electron for whatever reason is assuming all relative links are from the root <code>C:/</code> level.</p>