\n
My main.js code -
\nconst { app, BrowserWindow, globalShortcut, shell } = require("electron");\nconst isDev = require("electron-is-dev");\nconst path = require("path");\n\nconst getIconPath = () => {\n let ext = "png";\n if (process.platform === "darwin") {\n ext = "icns";\n }\n if (process.platform === "linux") {\n ext = "png";\n }\n if (process.platform === "win32") {\n ext = "ico";\n }\n let iconPath;\n iconPath = isDev\n ? path.join(__dirname, "..", "assets", "app_icon", `icon.${ext}`)\n : path.join(\n __dirname,\n "..",\n "..",\n "build",\n "assets",\n "app_icon",\n `icon.${ext}`\n );\n return iconPath;\n};\n\nlet mainWindow;\nlet splash;\nfunction createWindow() {\n splash = new BrowserWindow({\n width: 600,\n height: 400,\n autoHideMenuBar: true,\n center: true,\n transparent: true,\n frame: false,\n show: false,\n maximizable: false,\n resizable: false,\n minimizable: false,\n alwaysOnTop: true,\n });\n\n mainWindow = new BrowserWindow({\n minWidth: 500,\n minHeight: 300,\n show: false,\n autoHideMenuBar: true,\n icon: isDev ? getIconPath() : null,\n webPreferences: {\n contextIsolation: false,\n nodeIntegration: true,\n },\n });\n\n const mainWindowURL = isDev\n ? "http://localhost:3000"\n : `file://${path.join(__dirname, "../", "../build/index.html")}`;\n\n const splashURL = isDev\n ? "http://localhost:3000/splash"\n : `file://${path.join(__dirname, "../", "../build/index.html#/splash")}`;\n splash.loadURL(splashURL);\n mainWindow.loadURL(mainWindowURL);\n\n splash.once("ready-to-show", () => {\n splash.show();\n });\n\n mainWindow.once("ready-to-show", () => {\n setTimeout(() => {\n splash.destroy();\n // maximize the window\n mainWindow.maximize();\n mainWindow.show();\n }, 3000);\n });\n\n // production a bad jabe\n const handleDevTools = () => {\n if (mainWindow.webContents.isDevToolsOpened()) {\n mainWindow.webContents.closeDevTools();\n } else {\n mainWindow.webContents.openDevTools();\n }\n };\n globalShortcut.register("CommandOrControl+Shift+I", handleDevTools);\n\n // mainWindow.webContents.openDevTools();\n\n mainWindow.on("closed", () => {\n mainWindow = null;\n });\n}\n\napp.on("ready", createWindow);\n\napp.on("window-all-closed", () => {\n if (process.platform !== "darwin") {\n app.quit();\n }\n});\n\napp.on("activate", function () {\n if (BrowserWindow.getAllWindows().length === 0) createWindow();\n});\n
\nMy router.js code with react-router-dom
\nimport Splash from "../pages/Splash/Splash";\nimport Home from "../pages/Home/Home";\nimport Login from "../pages/Login/Login";\nimport Register from "../pages/Register/Register";\nimport { createBrowserRouter } from "react-router-dom";\n\nconst router = createBrowserRouter([\n {\n path: "/",\n children: [\n {\n path: "/",\n element: <Home />,\n },\n {\n path: "/splash",\n element: <Splash />,\n },\n {\n path: "/login",\n element: <Login />,\n },\n {\n path: "/register",\n element: <Register />,\n },\n ],\n },\n]);\n\nexport default router;\n
\nAnd when I run the project in production mode built by electron-builder. This shows up the
\n\n\n\n","author":{"@type":"Person","name":"Ashikur Rahman Munna"},"upvoteCount":2,"answerCount":3,"acceptedAnswer":{"@type":"Answer","text":"error - Unexpected Application Error! 404 Not Found
\n
Your splash window's url uses a hash (#
), yet you use createBrowserRouter
. Routing on Electron and React only works with HashRouter
, so you should replace createBrowserRouter
with createHashRouter
.
Additionally, you might need to write the hash path outside of path.join()
:
`file://${path.join(__dirname, "../", "../build/index.html")}#/splash`\n
\n","author":{"@type":"Person","name":"Arkellys"},"upvoteCount":9}}}Reputation: 55
I am building an electron app with react.js. It works fine in development mode but does not work in production mode. I have added the main folder inside the public and you can see my production error in the URL in the main.js code.
My folder structure
My main.js code -
const { app, BrowserWindow, globalShortcut, shell } = require("electron");
const isDev = require("electron-is-dev");
const path = require("path");
const getIconPath = () => {
let ext = "png";
if (process.platform === "darwin") {
ext = "icns";
}
if (process.platform === "linux") {
ext = "png";
}
if (process.platform === "win32") {
ext = "ico";
}
let iconPath;
iconPath = isDev
? path.join(__dirname, "..", "assets", "app_icon", `icon.${ext}`)
: path.join(
__dirname,
"..",
"..",
"build",
"assets",
"app_icon",
`icon.${ext}`
);
return iconPath;
};
let mainWindow;
let splash;
function createWindow() {
splash = new BrowserWindow({
width: 600,
height: 400,
autoHideMenuBar: true,
center: true,
transparent: true,
frame: false,
show: false,
maximizable: false,
resizable: false,
minimizable: false,
alwaysOnTop: true,
});
mainWindow = new BrowserWindow({
minWidth: 500,
minHeight: 300,
show: false,
autoHideMenuBar: true,
icon: isDev ? getIconPath() : null,
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
},
});
const mainWindowURL = isDev
? "http://localhost:3000"
: `file://${path.join(__dirname, "../", "../build/index.html")}`;
const splashURL = isDev
? "http://localhost:3000/splash"
: `file://${path.join(__dirname, "../", "../build/index.html#/splash")}`;
splash.loadURL(splashURL);
mainWindow.loadURL(mainWindowURL);
splash.once("ready-to-show", () => {
splash.show();
});
mainWindow.once("ready-to-show", () => {
setTimeout(() => {
splash.destroy();
// maximize the window
mainWindow.maximize();
mainWindow.show();
}, 3000);
});
// production a bad jabe
const handleDevTools = () => {
if (mainWindow.webContents.isDevToolsOpened()) {
mainWindow.webContents.closeDevTools();
} else {
mainWindow.webContents.openDevTools();
}
};
globalShortcut.register("CommandOrControl+Shift+I", handleDevTools);
// mainWindow.webContents.openDevTools();
mainWindow.on("closed", () => {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
My router.js code with react-router-dom
import Splash from "../pages/Splash/Splash";
import Home from "../pages/Home/Home";
import Login from "../pages/Login/Login";
import Register from "../pages/Register/Register";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
children: [
{
path: "/",
element: <Home />,
},
{
path: "/splash",
element: <Splash />,
},
{
path: "/login",
element: <Login />,
},
{
path: "/register",
element: <Register />,
},
],
},
]);
export default router;
And when I run the project in production mode built by electron-builder. This shows up the
error - Unexpected Application Error! 404 Not Found
Upvotes: 2
Views: 5747
Reputation: 1
I encountered the same issue and the solution was simple. You just need to replace the createBrowserRouter
with createHashRouter
in your app.js
and everything should work perfectly.
Upvotes: 0
Reputation: 2380
After having this issue for a few days I finally discovery the electron-router-dom
It solves all issues using react router with Electron.
const { createFileRoute, createURLRoute } = require("electron-router-dom");
...
if (process.env.ELECTRON_START_URL) {
mainWindow.loadURL(createURLRoute(process.env.ELECTRON_START_URL, "main"));
} else {
mainWindow.loadFile(
...createFileRoute(path.join(__dirname, "../build/index.html"), "main")
);
}
and on your App.js
import { Router, Route } from "electron-router-dom";
...
<Router
main={
<>
<Route
path="/"
element={<Login />}
/>
<Route
path="/home"
element={<Home />}
/>
<Route path="/dashboard" element={<Dashboard />} />
</>
}
/>
Upvotes: 0
Reputation: 7801
Your splash window's url uses a hash (#
), yet you use createBrowserRouter
. Routing on Electron and React only works with HashRouter
, so you should replace createBrowserRouter
with createHashRouter
.
Additionally, you might need to write the hash path outside of path.join()
:
`file://${path.join(__dirname, "../", "../build/index.html")}#/splash`
Upvotes: 9