Multiple windows in webpack+typescript | electronjs.org | Page 1

delicate shell Mar 18, 2023, 7:15 PM

#

Although I have used javascript/typescript in the past, it was always accompanied with a framework like Angular. I'm going for a barebones Electron project with webpack+typescript template and I don't have any experience with Electron or webpack tooling.

I wanted to create a new window with isolated renderer.ts scripts and css files. I understand that I can create new BrowserWindow objects, load HTML and in theory add JS files within script tags, but the renderer.ts gets added to the default index.html automagically and that seems like a better way of doing it.

How can I create a new window with isolated css/html/ts files (in the commonly accepted way)?

grim remnant Mar 18, 2023, 7:28 PM

#

You just have to add a new entry point

delicate shell Mar 18, 2023, 7:34 PM

#

How do I do that? Can I find something in the Electron package that configures the renderer.ts from which I can copy?

grim remnant Mar 18, 2023, 7:35 PM

#

it's a webpack config

#

not Electron

#

https://webpack.js.org/concepts/entry-points/

webpack

Entry Points | webpack

delicate shell Mar 18, 2023, 7:43 PM

#

Errrr... Sooo should I put

entry: {
myFirstWindow: '/src/my-window.ts'
}

Into my existing renderer webpack config file?

import type { Configuration } from 'webpack';

import { rules } from './webpack.rules';
import { plugins } from './webpack.plugins';

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

export const rendererConfig: Configuration = {
  module: {
    rules,
  },
  plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
};

Would this break the automagically added default renderer.ts? Where is that file coming from anyways, which config file lets webpack know that it should be added to index.html?

#

Ah, it's forge.config.ts

grim remnant Mar 18, 2023, 7:44 PM

#

you can only have one main process

#

one entry for the main if you want to bundle it and then as many entries as you want for the renderers

#

If you use a premade config/lib then you will have to look into its docs to see what you can/'t do with it

delicate shell Mar 18, 2023, 7:46 PM

#

Yeah, I understand. I just want to create a isolated renderer file, which entry points seem to provide. I just need to figure out how to start using it 😅

I found an entryPoints array in forge.config.ts.... Should I just repeat the first item in that array and modify?


const config: ForgeConfig = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
  plugins: [
    new WebpackPlugin({
      mainConfig,
      renderer: {
        config: rendererConfig,
        entryPoints: [
          {
            html: './src/index.html',
            js: './src/renderer.ts',
            name: 'main_window',
            preload: {
              js: './src/preload.ts',
            },
          },
        ],
      },
    }),
  ],
};

grim remnant Mar 18, 2023, 7:47 PM

#

I suppose yes

delicate shell Mar 18, 2023, 7:48 PM

#

Would you do it a different way? 😅

grim remnant Mar 18, 2023, 7:49 PM

#

you don't have much choice since you use a template, so no

delicate shell Mar 18, 2023, 7:51 PM

#

Gotcha 😅

Thanks for the help!

delicate shell Mar 18, 2023, 8:57 PM

#

For future readers, my ✅ Solution:

I copy pasted the default entry in forge.config.ts and modified it as desired. Pay attention to the entrypoint name field. Somewhere in the root index.ts (main process) script you need to define these magic constants

declare const <NAME>_WEBPACK_ENTRY: string;
declare const <NAME>_PRELOAD_WEBPACK_ENTRY: string;

which are filled by webpack. You might have seen them declared for MAIN_WINDOW already at the top of index.ts. Also similar to how this window was created, you can now use the new constants like this:

    // Create the browser window.
    const mainWindow = new BrowserWindow({
      height: 600,
      width: 800,
      webPreferences: {
        preload: <NAME>_PRELOAD_WEBPACK_ENTRY
      }
    });
    
    // and load the index.html of the app.
    mainWindow.loadURL(<NAME>_WEBPACK_ENTRY);
    
    // Open the DevTools.
    mainWindow.webContents.openDevTools();

Although not necessarily part of the solution, I also did this:
I ended up moving the entry points array from forge.config.ts to a new file and then importing it from the new file into forge.config.ts. I also moved some of my index.ts (main process) code to new .......-service.ts files. It turns out you can declare the magic constants anywhere as long as it is imported by the root index.ts file.

#Multiple windows in webpack+typescript