npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

electron-complete-builder

v0.7.0

Published

Complete solution to build ready for distribution and 'auto update' Electron App installers

Downloads

81

Readme

Complete solution to build ready for distribution and "auto update" installers of your app for OS X, Windows and Linux.

electron-packager, appdmg and windows-installer are used under the hood.

Real project example — onshape-desktop-shell.

Configuration

In short

  1. Ensure that required fields are specified in the application package.json:

Standard name, description, version and author.

Custom build field must be specified:

"build": {
  "app-bundle-id": "your.id",
  "app-category-type": "your.app.category.type",
  "iconUrl": "(windows only) A URL to an ICO file to use as the application icon, see details below"
}

This object will be used as a source of electron-packager options. You can specify any other options here.

  1. Create directory build in the root of the project and put your background.png (OS X DMG background), icon.icns (OS X app icon) and icon.ico (Windows app icon). Linux icon set will be generated automatically on the fly from the OS X icns file.

  2. Add scripts to the development package.json:

    "scripts": {
      "postinstall": "install-app-deps",
      "pack": "build",
      "dist": "build"
    }

    And then you can run npm run pack or npm run dist (to package in a distributable format (e.g. DMG, windows installer, NuGet package)).

  3. Install required system packages.

iconUrl

Please note — local icon file url is not accepted, must be https/http.

  • If you don't plan to build windows installer, you can omit it.
  • If your project repository is public on GitHub, it will be https://raw.githubusercontent.com/${info.user}/${info.project}/master/build/icon.ico by default.

Distributable Format Configuration

In the development package.json custom build field can be specified to customize distributable format:

"build": {
  "osx": {
    "title": "computed name from app package.js, you can overwrite",
    "icon": "build/icon.icns",
    "icon-size": 80,
    "background": "build/background.png",
    "contents": [
      {
        "x": 410,
        "y": 220,
        "type": "link",
        "path": "/Applications"
      },
      {
        "x": 130,
        "y": 220,
        "type": "file",
        "path": "computed path to artifact, do not specify it - will be overwritten"
      }
    ]
  },
  "win": "see https://github.com/electronjs/windows-installer#usage"
}

As you can see, you need to customize OS X options only if you want to provide custom x, y. Don't customize paths to background and icon, — just follow conventions (if you don't want to use build as directory of resources — please create issue to ask ability to customize it).

See OS X options and Windows options.

Auto Update

electron-builder produces all required artifacts:

  • .dmg: OS X installer, required for OS X user to initial install.
  • -mac.zip: required for Squirrel.Mac.
  • .exe and -x64.exe: Windows installer, required for Windows user to initial install. Please note — your app must handle Squirrel.Windows events. See real example.
  • .full-nupkg: required for Squirrel.Windows.
  • -amd64.deb and -i386.deb: Linux Debian package. Please note — by default the most effective xz compression format used.

You need to deploy somewhere releases/downloads server.

In general, there is a possibility to setup it as a service for all (it is boring to setup own if cloud service is possible). May be it will be soon (feel free to file an issue to track progress). It is safe since you should sign your app in any case (so, even if server will be compromised, users will not be affected because OS X will just block unsigned/unidentified app).

Code signing

OS X and Windows code singing is supported. On a development machine set environment variable CSC_NAME to your identity (recommended). Or pass --sign parameter.

export CSC_NAME="Developer ID Application: Your Name (code)"

Travis, AppVeyor and other CI servers

To sign app on build server:

  1. Export certificate. Strong password must be used. Consider to not use special characters (for bash) because “values are not escaped when your builds are executed”.
  2. Upload *.p12 file (e.g. on Google Drive).
  3. Set (Travis or AppVeyor) CSC_LINK and CSC_KEY_PASSWORD environment variables:
travis encrypt "CSC_LINK='https://drive.google.com/uc?export=download&id=***'" --add
travis encrypt 'CSC_KEY_PASSWORD=beAwareAboutBashEscaping!!!' --add

Build Version Management

CFBundleVersion (OS X) and FileVersion (Windows) will be set automatically to version.build_number on CI server (Travis, AppVeyor and CircleCI supported).

CLI usage

Execute node_modules/.bin/build --help to get actual CLI usage guide. In most cases you should not explicitly pass flags, so, we don't want to promote it here (npm lifecycle is supported and script name is taken in account). Want more — please file issue.

Programmatic usage

See node_modules/electron-builder/out/electron-builder.d.ts. Typings is supported.

Old API (< 2.8)

Old API is deprecated, but not dropped. You can use it as before. Please note — new API by default produces Squirrel.Windows installer, set target to build NSIS:

build --target=nsis