nextron
nextron copied to clipboard
Replace electron-serve
First of all thank you for this awesome package.
Problem
Currently we mount the BrowserWindow
in two different ways, depending on the NODE_ENV
.
- in
production
we use electron-serve to mount the application (mainWindow.loadURL('app://./home.html')
) - in
development
we load the next app from localhost (mainWindow.loadURL('http://localhost:${port}/home');
)
This creates many gotchas, that could be avoided:
- Path may differ between
production
anddevelopment
- CORS may block specific resources
- URLs differ between
production
anddevelopment
- Nextron needs to wait for
8s
for next to start - Next.js 404 pages are not working properly
Solution
To solve these issues I'have created a package that allows us to mount Next.js on the same route inside electron no matter what mode it is currently in.
This is done, be using electrons registerStreamProtocol
api, that implements a proxy to the localhost server of Next.js in development.
Replacing electron-serve with next-electron-server removes all the gotchas above and can simplify the bootup logic of nextron.
Example: background.js
import { app } from "electron";
import serveNextAt from "next-electron-server";
import { createWindow } from "./helpers";
serveNextAt("next://app", {
outputDir: "./app",
port: 8888,
});
(async () => {
await app.whenReady();
const mainWindow = createWindow("main", {
width: 1000,
height: 600,
});
await mainWindow.loadURL("next://app/home");
// mainWindow.loadURL("next://app/page1");
// mainWindow.loadURL("next://app/page2");
})();
next-electron-server has no external dependencies and could be integrated inside nextron.
What do you think about this proposal?
Due to changes regarding WebSockets in Next.js 12, I will close this issue for now, since the new Next.js DevServer will have issues using this approach.
In detail: Before Next.js 12 the DevServer was using Server Side Events to notify the client. This was working with the custom scheme approach very well. WebSockets change this because they use a different protocol.
https://nextjs.org/blog/next-12#other-improvements
@HaNdTriX I opened an issue on your repo, please take a look when you have a chance.
Reopening because we found a working solution: https://github.com/HaNdTriX/next-electron-server/issues/7#issuecomment-1143371567
@HaNdTriX do you think you can upload an PR with an example ? I am glad to test it and if works we can merge it. I like the idea of having a single URL for both enviroments.