Next-electron-server NPM

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

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