When I am serving a specific directory the devtools always complain that the source maps couldn't be loaded. That also makes sense cause Chrome will try to fetch those relative to directory that is served, meaning it looks for source maps in app://-/Users/... and obviously it cannot find them there, cause that path is not a correct path to the node modules where the source maps are located. Any idea what I could do to fix this?

I have an electron-forge setup that I want to add electron-serve to.

I tried creating a /renderer directory and putting an index.html in it and using this code

const loadURL = serve({ directory: "renderer" });

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 1600,
        height: 800,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    // and load the index.html of the app.
    // original electron-forge command
    // mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY)
    loadURL(mainWindow);

    // Open the DevTools.
    // mainWindow.websContents.openDevTools();
};

But I end up with

UnhandledPromiseRejectionWarning: Error: ERR_FILE_NOT_FOUND (-6) loading 'app://-/'
    at rejectAndCleanup (electron/js2c/browser_init.js:217:1457)
    at Object.failListener (electron/js2c/browser_init.js:217:1670)
    at Object.emit (events.js:315:20)

Am I missing something simple?

Hi Sindre,

I maintain a rather similar module, which is in use for ember-electron: https://github.com/pichfl/electron-protocol-serve

Maybe we can combine our efforts?

Just local directories? This means packaged apps won't work though...

Hi,

I am currently developing an Electron application that renders an Angular application using standard win.loadURL('file://…'). It uses the router module from Angular internally for routing tasks and it works ok. What is the advantage of using this library over the standard approach?

Thanks

When I use electron-serve in electron-quick-start require('./renderer.js') can't be resolved.

I have to use path.resolve within the require call to make that work:

<script>
  const path = require('path');
  require(path.resolve('./renderer.js'));
</script>

Any way that can be fixed so that relative requires work with electron-serve?

There is a $40.00 open bounty on this issue. Add more on Issuehunt.

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on Issuehunt to raise funds.

The partition the protocol should be installed to, if you're not using Electron's default partition.

It looks like there's a duplicate subject here and the wrong "to". Should this read: "The partition should be installed too"?

Hi, i noticed that some static files fetched without correct HTTP headers and its causes compilation issues (please see the attached file)

We have to send the correct headers: #11 (comment)

This needs a test too.

You should consider that someone just want a detailed explaination on how this library works. I just learned Electron and I don't know how to implement this. Can you at least give more detail to this one?

import { app, BrowserWindow} from "electron";
import * as path from "path";
// import * as url from "url";
const serve = require('electron-serve');

let mainWindow: Electron.BrowserWindow | null;

const loadURLs = serve({directory: path.join('file:///', __dirname, "../build/index.html")});

  async function createWindow() {
  await app.whenReady();
  // Create the browser window.electron
  mainWindow = new BrowserWindow({
    height: 600,
    webPreferences: {
      webSecurity: false,
      preload: path.join(__dirname, "preload.js"),
    },
    width: 1400,
  });
  console.log(path.join('://-', __dirname, "../build/index.html"));
  console.log('LoadUrl', {loadURLs});
  
  await loadURLs(mainWindow.loadURL(path.join('://', __dirname, "../build/index.html")));  

  mainWindow.webContents.on('did-start-navigation', () => {
    //if()
    // mainWindow.loadFile(path.join(__dirname, "index.html#/user/login"));
    // mainWindow.loadFile(path.join(__dirname, "index.html#/"));
  });

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

  // Emitted when the window is closed.
  mainWindow.on("closed", () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
  
}```

Look what I'm doing here. :)

If loadURL is used in app.on('ready', ...), it fails.

The protocol is registered after app.whenReady(), which is resolved after app:ready event.
(Tested in electron v3.1.9 & v5.0.1)

A failing test case can be generated by changing app.whenReady() to app:ready

https://www.npmjs.com/package/spectron

https://github.com/electron-userland/spectron

Cookies work in Dev but not in Prod

Same issue - electron-userland/electron-builder#5278

Please let me know how to solve this.
Thanks

And the extension is not .html.

Loading index.html on these requests, makes it really hard to debug problems.

https://github.com/SimulatedGREG/electron-vue

Error

{ Error: ERR_FAILED (-2) loading 'app://-'
at rejectAndCleanup (C:\Users\david\AppData\Roaming\npm\node_modules\electron\dist\resources\electron.asar\browser\navigation-controller.js:72:21)
at WebContents.stopLoadingListener (C:\Users\david\AppData\Roaming\npm\node_modules\electron\dist\resources\electron.asar\browser\navigation-controller.js:113:9)
at WebContents.emit (events.js:194:13) errno: -2, code: 'ERR_FAILED', url: 'app://-' }

What did i do

const loadURL = serve({ directory: "./build" });

app.on("ready", async () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "POSine",
    autoHideMenuBar: true,
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.maximize();
  await loadURL(win)
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.log(error);
    });

  win.on("closed", () => {
    win = null;
  });
});

what I spected

a window with the static files

what i actually got

a blank window with the error above in the terminal

Please if someone could help me with this

I have created a nuxt.js and electron app which uses electron-serve 's loadURL method to load a page into the BrowserWindow. So far, I only have one BrowserWindow, which is the main window of the application and I'm able to perform page routing in this window like I would in a normal nuxt web application. But I want to create a second application window and I'm not sure how to use the loadURL to load a page into the secondary window since any page you create in nuxt have a ".vue" extension.

Hi,

I'm have a Sveltekit application that I want to run inside electron. I choose the option to export my svelte kit application into node application. It works perfectly when running it with node build-folder. But when starting it inside electron the node server does not startup.

Removing tthe hostname and scheme will response in a ERR_FILE_UNKNOW error.

import { app, BrowserWindow } from 'electron';
import serve from 'electron-serve'

const loadURL = serve({
  directory: 'build',
  hostname: '0.0.0.0:3000',
  scheme: 'http'
});
let mainWindow;

(async () => {
	await app.whenReady();

	mainWindow = new BrowserWindow();

	await loadURL(mainWindow);

})();

npx electron-forge start -l   
✔ Checking your system
✔ Locating application
⠋ Loading configuration
✔ Locating application
✔ Loading configuration
✔ Preparing native dependencies [0.1s]
✔ Running generateAssets hook
⠋ [plugin-vite] Launching dev servers for renderer process code
◼ [plugin-vite] Compiling main process code
✔ [plugin-vite] Launching dev servers for renderer process code [0.0s]
⠋ [plugin-vite] Compiling main process code
vite v5.1.6 building for development...

watching for file changes...
vite v5.1.6 building for development...
✔ [plugin-vite] Launching dev servers for renderer process code [0.0s]
⠙ [plugin-vite] Compiling main process code

build started...

build started...
✓ 1 modules transformed.
Generated an empty chunk: "preload".
✓ 1 modules transformed.
.vite/build/main.js  0.62 kB │ gzip: 0.33 kB
built in 25ms.
✔ [plugin-vite] Launching dev servers for renderer process code [0.0s]
✔ [plugin-vite] Compiling main process code [0.0s]

(node:11662) electron: Failed to load URL: http://0.0.0.0:3000/ with error: ERR_CONNECTION_REFUSED
(Use `Electron --trace-warnings ...` to show where the warning was created)
(node:11662) UnhandledPromiseRejectionWarning: Error: ERR_CONNECTION_REFUSED (-102) loading 'http://0.0.0.0:3000/'
    at rejectAndCleanup (node:electron/js2c/browser_init:2:74086)
    at WebContents.failListener (node:electron/js2c/browser_init:2:74299)
    at WebContents.emit (node:events:514:28)
(node:11662) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
[11662:0319/131328.898771:INFO:CONSOLE(2)] "%cElectron Security Warning (Insecure Content-Security-Policy) font-weight: bold; This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.", source: node:electron/js2c/sandbox_bundle (2)

Hi,

working with electron-serve on an electron 6 app everything works well on dev environment.

I'm trying to run the packaged app (electron builder) on windows 10 but the app schema/protocol registered by electron-serve is not understood by windows and it's trying to search for an external application capable to open it on the windows store.

you need a new application to open this link app
Search an application on the Microsoft Store

The result is a white screen =(

Is there any manipulation to do on production environment to avoid this?

It is not possible (is it? I've been trying for a while now and have concluded it is not) to serve two different directories when the electron app has two windows.

Something like this

const loadURLOne = serve({ directory: 'one' })
const loadURLTwo = serve({ directory: 'two' })

function createWindow() {
  const oneWindow = new BrowserWindow({
    width: 1800,
    height: 1600,
  })

  const twoWindow = new BrowserWindow({
    width: 1800,
    height: 1600,
  })

  if (isDev) {
    oneWindow.loadURL('http://localhost:3000/one')
    twoWindow.loadURL('http://localhost:3000/two')
  } else {
    loadURLOne(oneWindow)
    loadURLTwo(twoWindow)
  }

This in dev works as expected (the localhost is an astro site)
But in build I can only get two windows opened that point to the same directory (the first one).

So this would be a nice feature to have in mind, if it is feasible.

EDIT: Or a variant would be to point, instead of a directory, to a file

const loadURLOne = serve({ directory: '.', file: 'index.html' })
const loadURLTwo = serve({ directory: '.', file: 'two.html' })

Something is broken with Spectron.

Hi, I try to build using electron builder, and after build, it seems cannot open the 'app://-' location, is it because the
"build" folder that contains single-page web app files is not accessible ?

My electron builder config :

  ...
  "build": {
    "extraFiles": [
      "build"
    ],
  ...

the "build" folder is the single-page web app folder

Anybody has clue ?

Thanks

if (isProd) serve({ directory: 'app' });
else app.setPath('userData', `${app.getPath('userData')} (development)`);

(async () => {
    await app.whenReady();

    mainWindow = createWindow('main');
    if (isProd) mainWindow.loadURL('app://./home.html');
    else {
        const port = process.argv[2];
        console.log(this.state.port);
        mainWindow.loadURL(`http://localhost:${port}/home`);
    }
            ...
})();

==================================================
The above is my code snippet, in production mode, reporting cross-domain issues