#React Router with Electron Forge

22 messages · Page 1 of 1 (latest)

frosty blaze
#

I'm a bit stuck on setting up React Router with Electron + Forge. What file should I use as the entry point? I have an App.ts which contains my Electron App setup, I have a renderer.ts which renders my main React page, and then I have the page being rendered itself.

My understanding is that I should use a HashRouter for navigation, but if someone could point me in the direction of getting there, I'd really appreciate the help.

leaden stump
#

Yes you should use HashRouter

#

I've also read that you can use <BrowserRouter basename={'/'}> but I have not tried to see if it works.

#

And you need to set the param homepage: "./" on your package.json

#

The entry point (main) must be your main electron JS file

final wolf
#

Hello @leaden stump i am also building my electron app i wanted to ask somethings like i am using window.open("localhost:300/note) in my app i have a route for the same in app.js so if i use HashRouter what would i have to change to keep the app working even after i build it

#

also in main.ts i am loading the app as mainWindow.loadUrl("localhost:3000/)

leaden stump
#

Hello @final wolf , I'm not sure for window.open, but for the loadUrl you need something like this:

const url = app.isPackaged
  ? `file://${path.join(__dirname, "../../index.html")}`
  : "localhost:3000/"
#

the path will depend on your file/folder structure after the build

#

Alright, for the window.open it seems to be:

`file://${path.join(__dirname, "../.../index.html#note")}`
final wolf
final wolf
#

i tried this but it shows white screen

#

here is my main.js

# 
const { app, BrowserWindow, globalShortcut, ipcMain } = require("electron");
const path = require("path");

let mainWindow;
let secondWindow;

const urlMain = app.isPackaged
    ? `file://${path.join(__dirname, "./public/index.html")}`
    : "localhost:3000/";

function handleSetMinSize(event, width, height) {
    const webContents = event.sender;
    const window = BrowserWindow.fromWebContents(webContents);
    window.setMinimumSize(width, height);
}
function handleOpenWindow(event, url, width, height) {
    let windowNote = new BrowserWindow({
        height: height,
        width: width,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        },
        autoHideMenuBar: true,
    });
    windowNote.loadURL(url);
}
function createWindow() {
    let win = new BrowserWindow({
        height: 240,
        width: 450,
        minHeight: 240,
        minWidth: 450,
        maxHeight: 240,
        maxWidth: 450,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        },
        autoHideMenuBar: true,
    });

    win.loadURL(`file://${path.join(__dirname, "./public/index.html")}`);
    return win;
}

ipcMain.on("set-size", handleSetMinSize);
ipcMain.on("open-window", handleOpenWindow);
app.whenReady().then(() => {
    mainWindow = createWindow();
    const ret = globalShortcut.register("CommandOrControl+j", () => {
        secondWindow = new BrowserWindow({
            height: 590,
            width: 550,
            webPreferences: {
                preload: path.join(__dirname, "preload.js"),
            },
            autoHideMenuBar: true,
        });
        secondWindow.loadURL("http://localhost:3000/note");
        secondWindow.openDevTools();
    });
    if (!ret) {
        console.log("registration failed");
    }
});
#

and this is the app.js

#

import { HashRouter as Router, Routes, Route } from "react-router-dom";

import Start from "components/Starter/Starter";
import NewTagMaker from "components/NewTagMaker/NewTagMaker";

import Home from "pages/Home/Home";
import NewNote from "pages/NewNote/NewNote";
import GroupSelector from "pages/GroupSelector/GroupSelector";
import Submit from "pages/SubmitNote/SubimitNote";
import Search from "pages/Search/Search";
import Error from "pages/Error/Error";

import "./styles/main.scss";

function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Start />} />
<Route path="/home" element={<Home />} />
<Route path="/note" element={<NewNote />} />
<Route path="/select" element={<GroupSelector />} />
<Route path="/submit" element={<Submit />} />
<Route path="/newtag" element={<NewTagMaker />} />
<Route path="/search" element={<Search />} />
{/* private route for higher order component /}
<Route path="" element={<Error />} />
</Routes>
</Router>
);
}

export default App;

leaden stump
#

@final wolf the path seems wrong, when a react app is build, the path of index.html is build/index.html, public is only in src

final wolf
#

ohh ok ok

#

so i should do npm build first?

#

also i was using this command to package my app:

# 
"electron-packager . myapp --overwrite --asar=true --platform=win32 --arch=ia32 --icon=src/assets/icons/win/favicon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"myapp\""
leaden stump
#

Yes you need to build first and use the compiled files for the packaged app