Serve your Next.js app inside Electron using a custom scheme.
$ npm install next-electron-server
or using yarn
$ yarn add next-electron-server
const serveNextAt = require("next-electron-server");
serveNextAt("next://app");
app.on("ready", async () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
mainWindow.loadURL("next://app");
// mainWindow.loadURL("next://app/page1");
// mainWindow.loadURL("next://app/page2");
});
For more infos check out the example directory.
Most electron tutorials recommend using a url switch to differentiate between devserver localhost urls in development and static urls used in production:
app.on("ready", async () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
const url = isDev
? "http://localhost:8000"
: format({
pathname: join(__dirname, "../renderer/out/index.html"),
protocol: "file:",
slashes: true,
});
mainWindow.loadURL(url);
});
From my point of view this approach has many drawbacks.
- The origin of the html document differs between production & development
- The security model may differ between production & development
- Paths differ between production & development
- 404 pages won't work in production
That's why I created next-electron-server
.
The render page will always being served using the same protocol and url.
- In development is implements a proxy to
http://localhost:3000
. - In production is serves files from the
/out
directory.
- supports 404 pages
- works with Next.js dev-server
- waits for Next.j dev-server to start
- works with paths of images and other static resources
- static paths won't differ between development and production
- has zero dependencies
Required
Type: string
Example: next://app
The entry-point of your Next.js app.
Type: object
Type: string
Default: "./out"
The directory to serve, relative to the app root directory.
Type: number
Default: 3000
The port your Next.js dev-server runs on.
Type: boolean
Default !app.isPackaged
This flag decides how to serve the files. When dev === true
a proxy will be created pointing to localhost:3000
.
Type: object
Check out electron/docs/protocol for more infos about this config object.
- Fork this repository to your own GitHub account and then clone it to your local device
- Link it to the global module directory:
yarn link
- Install in your local project using
yarn link next-electron-server
Henrik Wenz (@HenrikWenz)