GithubHelp home page GithubHelp logo

rushellphoto / electron-builder Goto Github PK

View Code? Open in Web Editor NEW

This project forked from electron-userland/electron-builder

0.0 2.0 0.0 1.29 MB

Build installers for Electron apps the easy way

License: MIT License

NSIS 2.74% JavaScript 80.03% Smarty 17.24%

electron-builder's Introduction

Build Status npm version npm downloads Dependency Status Uses greenkeeper.io

electron-builder

The electron-builder project is used to create installers for the platforms Windows and OS X. It's built to work together with the electron-packager.

If you are looking for a complete set up on how to use the electron-packager and electron-builder check the "How we use it section below".

The project has currently only been executed on OS X machines. Any support or help for Windows is welcome.

Install

You can go the global installation route. ;)

$ npm install -g electron-builder

Oooooor... You can wrap electron-builder with npm scripts to not have a global dependency.

# install electron builder as a dependency of your project
$ npm install --save electron-builder

After that you can easily use the electron-builder binary in your npm scripts.

part of package.json

{
  "scripts" : {
    "pack:osx": "npm run build:osx && electron-builder \"dist/osx/Loopline Systems.app\" --platform=osx --out=\"dist/osx\" --config=packager.json"
  }
}

Pre-requisites

If you're on OS X/Linux and want to build for Windows, you need Wine installed. Wine is required in order to set the correct icon for the exe.

You will also need the nullsoft scriptable install system for all platforms.

On OS X, via Homebrew

$ brew install wine makensis

On Ubuntu(-based) Linux distributions, via apt:

# add-apt-repository ppa:ubuntu-wine/ppa -y
# apt-get update
# apt-get install wine nsis -y

On Windows, download the nullsoft scriptable installer

If you're on OS X/Linux and want to build for Windows, make also sure you're running at least v0.12.0 of node.js.

$ node --version
v0.12.0

Build OS X installer

$ electron-builder dist/osx/someFancy.app --platform=osx --out=/some/path/ --config=config.json

Build Windows installer

$ electron-builder dist/win/someFancy-win32 --platform=win --out=/some/path/ --config=config.json

Parameters

Usage
  $ electron-builder <sourcedir> --platform=<platform> --config=<configPath> --out=<outputPath>

  Required options:
    platform:          win, osx
    config:            path to config file

  Optional options:
    out:               path to output the installer (must exist)

Because the configuration is fairly complex we decided to go with a good old config file for now. You will find a sample config file below.

config.json.sample:

{
  "osx" : {
    "title": "Loopline Systems",
    "background": "assets/osx/installer.png",
    "icon": "assets/osx/mount.icns",
    "icon-size": 80,
    "contents": [
      { "x": 438, "y": 344, "type": "link", "path": "/Applications" },
      { "x": 192, "y": 344, "type": "file" }
    ]
  },
  "win" : {
    "title" : "Loopline Systems",
    "version" : "x.x.x.x",
    "icon" : "assets/win/icon.ico",
    "nsiTemplate" : "path/to/custom/installer.nsi.tpl"
  }
}

osx.title

Title of the generated dmg file.

osx.background

Background of the dmg dialog.

osx.icon

Your application mount icon.

osx.icon-size

Sizes of the icons included in dmg dialog.

osx.contents

This property contains the configuration for the OSX dmg window. This property is passed to appdmg, which builds the dmg package. For a deeper explanation of the different options that you can set in this property, visit appdmg's page.

win.title

Title of your application shown in generated windows installer.

win.version

Version of your application shown in add/remove programs list.

win.icon

Icon to be shown in installation process.

win.nsiTemplate ( optional )

Option to define a custom NSI installation file.

Note: You need to add something that might have value for others? Please consider a PR. ;)

How we use it so far

When you run npm run pack it will create executables for the platforms Windows and OS X inside of the dist directory. It grabs the generated executables afterwards to create the installers out of it.

directory structure

desktop
  |-- app                               // actual electron application
  |
  |-- assets                            // build related assets
    |-- osx                             // build assets for OS X
      |-- installer.png                 //   -> referenced in packager.json ( dmg background )
      |-- mount.icns                    //   -> use by electron-packager ( actual app icon )
      |-- loopline.icns                 //   -> referenced in packager.json ( dmg background )
    |-- win                             // build assets for Windows
      |-- icon.ico                      //   -> referenced in packager.json
  |
  |-- dist                              // out put folder
    |-- osx                             // generated executables for OS X
      |-- Loopline Systems.app
      |-- Loopline Systems.dmg
    |-- win                             // generated executables for Windows
      |-- Loopline Systems-win32
      |-- Loopline Systems Setup.exe
  |-- package.json
  |-- packager.json

package.json

{
  "name": "loopline-desktop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "electron ./app",

    "clean": "rm -rf ./dist",
    "clean:osx": "rm -rf ./dist/osx",
    "clean:win": "rm -rf ./dist/win",

    "build": "npm run clean && npm run build:osx && npm run build:win",
    "build:osx": "npm run clean:osx && electron-packager ./app \"Loopline Systems\" --out=dist/osx --platform=darwin --arch=x64 --version=0.25.3 --icon=assets/osx/loopline.icns",
    "build:win": "npm run clean:win && electron-packager ./app \"Loopline Systems\" --out=dist/win --platform=win32 --arch=ia32 --version=0.25.3 --icon=assets/win/icon.ico",

    "pack": "npm run pack:osx && npm run pack:win",
    "pack:osx": "npm run build:osx && electron-builder \"dist/osx/Loopline Systems.app\" --platform=osx --out=\"dist/osx\" --config=packager.json",
    "pack:win": "npm run build:win && electron-builder \"dist/win/Loopline Systems-win32\" --platform=win --out=\"dist/win\" --config=packager.json"
  },
  "dependencies": {
    "electron-packager": "^4.0.2",
    "electron-prebuilt": "^0.25.2",
    "electron-builder": "^1.0.0"
  }
}

Important note for windows users: If the build process throws an error like "rm" is not recognized as an internal or external command, operable program or batch file. you may want to use windows counter part rmdir or rimraf (cross platform) to clean up the distribution folder.

packager.json

{
  "osx" : {
    "title": "Loopline Systems",
    "background": "assets/osx/installer.png",
    "icon": "assets/osx/mount.icns",
    "icon-size": 80,
    "contents": [
      { "x": 438, "y": 344, "type": "link", "path": "/Applications" },
      { "x": 192, "y": 344, "type": "file" }
    ]
  },
  "win" : {
    "title" : "Loopline Systems",
    "icon" : "assets/win/icon.ico"
  }
}

Contribution

You want to help out and have ideas to make it better? Great!

Create an issue and we will tackle it.

If you decide to propose a pull request ( even better ) make sure npm test is succeeding.

Releases

For releases we like to give release names via adj-noun. You'll find proper release notes here.

electron-builder's People

Contributors

championswimmer avatar dab0bby avatar demetris-manikas avatar etiktin avatar freewil avatar frondor avatar greenkeeperio-bot avatar malept avatar maxcnunes avatar radibit avatar stefanjudis avatar tengyifei avatar vxsx avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.