Webpack entryPoints name

[panpansh]

can we move files from .webpack/renderer/app_window/ to .webpack/renderer/

I try to use react-router with nested routes and to avoid problems it can be better to have files at the root of renderer folder.

Best Regards.

#21 (comment)

[codesbiome]

Hello @panpansh

Seems like there is no such configuration option available, to have files at the root of renderer folder.
Electron Forge's Webpack Plugin requires an entryPoint name to separate the context (in case of multiple windows process).

Maybe you can try use react-router-dom instead of react-touter.

[panpansh]

@codesbiome thanks for your reply.
yes im using this one react-router-dom

here working but not nested and strange

<BrowserRouter>
    <WindowFrame title='ERWT Boilerplate' platform='windows'>
      <Routes>
        <Route path="/app_window" element={<Application />} />
        <Route path="expenses" element={<Expenses />} />
        <Route path="invoices" element={<Invoices />} />
      </Routes>
    </WindowFrame>
  </BrowserRouter>

but nested routes not working

<BrowserRouter>
    <WindowFrame title='ERWT Boilerplate' platform='windows'>
      <Routes>
        <Route path="/app_window" element={<Application />}>
          <Route path="expenses" element={<Expenses />} />
          <Route path="invoices" element={<Invoices />} />
        </Route>
      </Routes>
    </WindowFrame>
  </BrowserRouter>
  // No routes matched location "/expenses"
  // No routes matched location "/invoices"

if i can replace /app_window by / even with hack it can be cool

something like

if entryPoints.length === 1
  // use root

[panpansh]

ok looking the code in @electron-forge/plugin-webpack/WebpackConfig.js:83

toEnvironmentVariable()

src/main/appWindow.ts

APP_WINDOW_WEBPACK_ENTRY and APP_WINDOW_PRELOAD_WEBPACK_ENTRY
to
_WEBPACK_ENTRY and _PRELOAD_WEBPACK_ENTRY

tools/forge/forge.config.js

// Window process name
name: '',

now i need to fix the index.js location :

[panpansh]

@electron-forge/plugin-webpack/WebpackConfig.js:211

filename: this.pluginConfig.renderer.entryPoints.length === 1 && this.pluginConfig.renderer.entryPoints[0].name === '' ? 'index.js' : '[name]/index.js',

[panpansh]

the UI display, counter work, all good 👍

[codesbiome]

yes im using this one react-router-dom
here working but not nested and strange

<BrowserRouter>
    <WindowFrame title='ERWT Boilerplate' platform='windows'>
      <Routes>
        <Route path="/app_window" element={<Application />} />
        <Route path="expenses" element={<Expenses />} />
        <Route path="invoices" element={<Invoices />} />
      </Routes>
    </WindowFrame>
  </BrowserRouter>

Using BrowseRouter might also cause some issues with routing, specially when building the app for distribution (Production).

Also not sure why /app_window is being used instead of just /, is there any specific reason to use that Route path?

Something simple with using HashRouter might work :

// ... Other imports
import { HashRouter as Router } from 'react-router-dom';

// Application to Render
const app = (
  <Router>
      <WindowFrame title='ERWT Boilerplate' platform='windows'>
        <Routes>
          <Route path="/expenses" element={<Expenses />} />
          <Route path="/invoices" element={<Invoices />} />
          <Route path='/' element={<Application/>} />
        </Routes>
      </WindowFrame>
  </Router>
);

[panpansh]

the current problem I have with my changes is in development mode he give me the good path

<script defer src="/index.js"></script>
<link href="/assets/7bf2b3737dfbbf561dbd.css" rel="stylesheet">

but for production when I make I get this path :/

<script defer="defer" src="Users/panpansh/Desktop/test_app/.webpack/renderer/index.js"></script>
<link href="Users/panpansh/Desktop/test_app/.webpack/renderer/assets/c02c3fd55c60c9305d15.css" rel="stylesheet">

[panpansh]

ok here is my fix from start :

src/main/appWindow.ts

declare const _ROOT_WEBPACK_ENTRY: string;
declare const _ROOT_PRELOAD_WEBPACK_ENTRY: string;
...
preload: _ROOT_PRELOAD_WEBPACK_ENTRY,
...
appWindow.loadURL(_ROOT_WEBPACK_ENTRY);
// use _ROOT as key 

tools/forge/forge.config.js

// Window process name
name: '.',
// this dot is used to be the current dir (like root) of renderer

@electron-forge/plugin-webpack/WebpackConfig.js:85

return `${this.pluginConfig.renderer.entryPoints.length === 1 && this.pluginConfig.renderer.entryPoints[0].name === '.' ? '_ROOT' : entryPoint.name.toUpperCase().replace(/ /g, '_')}${suffix}`;
// if the name is dot '.' use '_ROOT' as prefix for EnvironmentVariable

here you have files at root of render and it seems all is working fine. until next comment 😂

[panpansh]

let me know if we can integrate react dev tools please if you already done this :)

[panpansh]

Thank you for this #21 (comment)
Let me know how we can simply debug routes.
btw all working fine <3

[codesbiome]

let me know if we can integrate react dev tools please if you already done this :)

React devtools can be used by installing electron-devtools-installer package and implementing extension installer in main/app.ts

// app.ts

import { app, BrowserWindow } from 'electron';
import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';
import { createAppWindow } from './appWindow';

app.on('ready', createAppWindow);

/**
 * Devtools Extension Installer
 */
app.whenReady().then(() => {
    installExtension(REACT_DEVELOPER_TOOLS)
        .then((name) => console.log(`Added Extension:  ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});

//.....

[panpansh]

Its perfect much thanks. It's very appreciated