electron-userland / electron-userland/electron-webpack

Multiple windows with routing not working

Open
#325 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
902
Forks
168
PR merge metrics
No merged PRs in 30d

Description

* **Version**:
"electron": "5.0.6",
"electron-builder": "^21.0.11",

Hello guys, I have a problem I am struggling with for a couple of days now. I am trying to get multiple windows (2 exactly) to work in my electron app. I started from boilerplate and look trough multiple topics on that matter trough out the internet. The solution for multiple windows seems to be, to have ala routing in place. I tried it out and it works for the dev environment (yarn dev) as it is an HTTP, but when I package my app it seems not to work as expected. I have an error in the dev tools (of unpacked win):

> chromewebdata/:1 Not allowed to load local resource: file:///C:/Users/grzes/Documents/projects/electron-webpack-quick-start/dist/win-unpacked/resources/app.asar/index.html%3Froute=settings

The problem seems to be this route part I've been adding when I remove it everything works fine (just unable to run multiwindow.

Ok, so let go trough the setup.

I created a class for app window that just takes care of building my window:
```
import { BrowserWindow } from "electron";
import { format as formatUrl } from 'url';
import * as path from 'path';

class AppWindow
{
window: BrowserWindow|null;

constructor(route: string, devMode: boolean = false) {

this.window = new BrowserWindow({webPreferences: {nodeIntegration: true}});

if (devMode) {
this.window.webContents.openDevTools();
this.window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}?route=settings`);
} else {
this.window.loadURL(formatUrl({
pathname: path.join(__dirname, 'index.html?route=settings'),
protocol: 'file',
slashes: true
}))
}

this.window.on('closed', () => {
this.window = null
})

this.window.webContents.on('devtools-opened', () => {
if (this.window) {
this.window.focus();
setImmediate(() => {
if (this.window) {
this.window.focus()
}
});
}
})
}

get() {
return this.window;
}
}

export default AppWindow;
```
Then in main process, I am creating one main window, and one settings window (on-demand, after clicking a button on main window trough IPC events).
```
'use strict'

import { app, ipcMain } from 'electron';
import AppWindow from './windows/AppWindow';

const isDevelopment = process.env.NODE_ENV !== 'production';

// global reference to mainWindow (necessary to prevent window from being garbage collected)
let mainWindow: any

function createMainWindow() {
const window = new AppWindow('widget', isDevelopment).get();
return window;
}

function createSettingsWindow() {
const window = new AppWindow('settings', isDevelopment).get();
return window;
}

// quit application when all windows are closed
app.on('window-all-closed', () => {
// on macOS it is common for applications to stay open until the user explicitly quits
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// on macOS it is common to re-create a window even after all windows have been closed
if (mainWindow === null) {
mainWindow = createMainWindow()
}
})

// create main BrowserWindow when electron is ready
app.on('ready', () => {
mainWindow = createMainWindow();
})

ipcMain.on('settings', () => {
createSettingsWindow();
})
```
In renderer, I tried to resolve the route parameter and decide which module to load (semi routing testing solution):
```
import Vue from 'vue';
import App from './App.vue';
import Settings from './Settings.vue';

const route = new URLSearchParams(window.location.search).get('route') || 'widget';

if (route === 'widget') {
new Vue({
components: { App },
template: ''
}).$mount('#app')
}

if (route === 'settings') {
new Vue({
components: { Settings },
template: ''
}).$mount('#app')
}
```
And there I stuck, it seems to be unable to pass the variable trough URL on windows packed build. I lost hope today, please help me out because I can't move forward with it at this point, I am out of ideas on how to do it. I'm gonna add that the idea is, to have a simple app window with a settings button, that will open another window with settings of this app.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.