electron-userland / electron-userland/electron-webpack
Multiple windows with routing not working
- 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.