TODO:

1. Create DMG package

Now we have to turn our code (files) into a DMG package so that everyone could download our app.

package.json

{
  "name": "TimeTracker",
  "version": "0.0.1",
  "license": "MIT",
  "description": "App is based on Electron, React, Redux + Rails as a back end.",
  "author": "Dmytro Vasin <[email protected]>",
  "repository": {
    "type": "git",
    "url": "https://github.com/DmytroVasin/TimeTracker.git"
  },
  "scripts": {
    "electron": "NODE_ENV=development electron ./electron-app/js/index.js",
    "postinstall": "install-app-deps",
    "publish:electron": "cp -R electron-app/ app/electron-app/",
    "publish:osx": "build --x64",
    "publish:dist": "npm run publish:electron && npm run publish:osx"
  },
  "dependencies": {
    "electron-positioner": "^3.0.0",
    "webpack-node-externals": "^1.4.3"
  },
  "devDependencies": {
    "electron": "^1.3.6",
    "electron-builder": "^6.7.6",
    "electron-devtools-installer": "^2.0.1",
    "webpack": "^1.13.1"
  },
  "build": {
    "asar": false,
    "appId": "hr.creaticon.eatodo",
    "category": "public.app-category.productivity",
    "dmg": {
      "title": "Time Tracker Installation",
      "contents": [
        {
          "x": 410,
          "y": 125,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 125,
          "type": "file"
        }
      ]
    }
  }
}

Lets discuss several lines of code from this file:

1. install-app-deps - This line allows us to use several pacakage.json files.

2. publish:electron - This command simply copy files from root directory to app/ ( Our app should only contain files that must be in dmg package.

3. publish:osx - By this command we specify for which platform/architecture should be generated our compiled app

4. build - This is standard block of specification for electron-packager ( To be more accurate this is specification for npm appdmg package )

5. asar - Option is used to specify should we pack ( compress ) our files.

Lets specify libs which are necessary for our app:

app/package.json

{
  "name": "TimeTracker",
  "version": "0.0.1",
  "license": "MIT",
  "description": "App is based on Electron, React, Redux + Rails as a back end.",
  "author": "Dmytro Vasin <[email protected]>",
  "main": "electron-app/js/index.js",
  "dependencies": {
    "electron-positioner": "^3.0.0",
  }
}

Here is the most interesting line of code from this file:

1. 'main': 'electron-app/js/index.js' - This line is entry point of our app.

2. npm install - Launch of this command will produce two folders node_modules in root/ and app/ directories.

3. Into build/ dirrectory you should throw two icons icon.icns and background.png for Mac. This files will be used by electron-packager to create custom dmg package:

background.png ( 512/320 )
icon.icns ( 256/256 )

Lets launch next command: npm run publish:dist

After execution of it in our root folder should be appeared /dist directory. In this directory you will find .dmg file for installing our all. ( Also there you will find totally working app ).

VIDEO: Published DMG

Because we specify option asar: false we can see all our source file inside app:

VIDEO: Source Files