Next.js Electron Server

Serve your Next.js app inside Electron using a custom scheme.

Install

$ npm install next-electron-server

or using yarn

$ yarn add next-electron-server

Usage

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.

Motivation

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.

Features

• 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

API

serveNextAt(uri, options)

uri

Required\ Type: string\ Example: next://app

The entry-point of your Next.js app.

options

Type: object

↳ outputDir

Type: string\ Default: "./out"

The directory to serve, relative to the app root directory.

↳ port

Type: number\ Default: 3000

The port your Next.js dev-server runs on.

↳ dev

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.

↳ privileges

Type: object

Check out electron/docs/protocol for more infos about this config object.

↳ partition

Type: string\ Default: electron.session.defaultSession

The partition the protocol should be installed to, if you're not using Electron's default partition.

Contributing

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Link it to the global module directory: yarn link
3. Install in your local project using yarn link next-electron-server

Author

Henrik Wenz (@HenrikWenz)