next-electron-server
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    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.

    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)

    Install

    npm i next-electron-server

    DownloadsWeekly Downloads

    910

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    8.08 kB

    Total Files

    5

    Last publish

    Collaborators

    • handtrix