• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

414
Views
Electron + Angular = no local files?

My issue is hard to explain, but I'll try - I've got electron error Not allowed to load local resource when trying to playback mp3 file from the directory of application.

That happens because I'm using Webpack for development and Express server for production to run my apps (Express is used due to some Angular routing features).

This is part of my electron-main.js -

function createWindow() {
    win = new BrowserWindow({
    width: 1500,
    height: 900,
    resizable: true,
    center: true,
    autoHideMenuBar: true,
    icon: path.join(__dirname, 'static', 'note.ico')
  });

   if (DEBUG) {
     // Loading from Webpack
     win.loadURL(`http://localhost:4200`);
     win.webContents.openDevTools();
   }
   else {
     // Loading from Express-server
     const server = require("../server");
     win.loadURL(`http://localhost:3333`);
   }

server.js

let path = require('path');
let express = require('express');
let app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3333);

But when I tried to set

win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));

I've got my mp3 playback.

So I understand that local files can be accessed only when protocol: 'file:', not http: App structure should be similar -

(root folder)
--app.exe (whatever)
--mp3
  --1.mp3
  --2.mp3
  --3.mp3
  ...

Is there a workaround? Maybe I can use Express to get my files?

over 3 years ago · Santiago Trujillo
1 answers
Answer question

0

The only workaround I've found is to create additional hidden window using file: protocol like this

hiddenWindow = new BrowserWindow({
  show: false
});

hiddenWindow.loadURL(url.format({
  pathname: path.join(__dirname, 'hidden.html'),
  protocol: 'file:',
  slashes: true
}));

and init it's functions using ipcRenderer and ipcMain.

over 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error