{"@attributes":{"version":"2.0"},"channel":{"title":"Radomir Sohlich","link":"https:\/\/sohlich.github.io\/categories\/angular\/index.xml","description":"Recent content on Radomir Sohlich","generator":"Hugo -- gohugo.io","copyright":"\u00a9 2017 Radomir Sohlich","item":[{"title":"Angular on Electron, part 2","link":"https:\/\/sohlich.github.io\/post\/angular_electron_2\/","pubDate":"Sun, 20 Aug 2017 20:33:51 +0200","guid":"https:\/\/sohlich.github.io\/post\/angular_electron_2\/","description":"\n\n

In the previous post the bootstrap of Angular project on Electron platform was described. In this one, the process of application packaging will be presented.<\/p>\n\n

One of the benefits of Electron is that it runs on all major platforms. Each platform has naturally its needs regarding to creating the distribution package. Fortunately, the packaging and all that stuff do not need to be done manually. There are few tools which will help you. But first things first.<\/p>\n\n

Get ready<\/h2>\n\n

Before we begin this tutorial there will be one small change to an existing project from part 1. Because the folder “dist” will be used for another purpose, the Angular default build folder will be changed to “build”. This is done by modification of “angular-cli.json” config file. The property “outDir” of “apps” section will change the default output directory.<\/p>\n\n

${PROJECT_FOLDER}\/angular-cli.json:<\/p>\n\n

    "apps": [\n        {\n          ...\n          "root": "src",\n          "outDir": "build"\n          ...}\n          ],\n      ...\n<\/code><\/pre>\n\n
After this change, test the configuration by building the project. The folder “build” should be created with all the content. If everything is OK, we are good to go.<\/p>\n\n
    > ng build\n    > tree build\/\n    build\/\n        \u251c\u2500\u2500 favicon.ico\n        \u251c\u2500\u2500 index.html\n        \u251c\u2500\u2500 inline.bundle.js\n        \u251c\u2500\u2500 inline.bundle.js.map\n        \u251c\u2500\u2500 main.bundle.js\n        \u251c\u2500\u2500 main.bundle.js.map\n        \u251c\u2500\u2500 polyfills.bundle.js\n        \u251c\u2500\u2500 polyfills.bundle.js.map\n        \u251c\u2500\u2500 styles.bundle.js\n        \u251c\u2500\u2500 styles.bundle.js.map\n        \u251c\u2500\u2500 vendor.bundle.js\n        \u2514\u2500\u2500 vendor.bundle.js.map\n<\/code><\/pre>\n\n
Assets packaging<\/h2>\n\n
All the assets of application need to be bundled in the distribution somehow. Naturally there are several ways how to accomplish that. The first option is to bundle the files ( js, css bundles) as they are. Your install folder that will contain the build folder with all the files.  Sometimes it is better to hide the raw files from user. So the next option is to use archive. As this si preferred way, the asar archive were designed.<\/p>\n\n
Asar archive<\/em><\/p>\n\n
The asar archive (https:\/\/github.com\/electron\/asar<\/a>) is tar-like format very easy to use. Following example demonstrates the basic usage.<\/p>\n\n
    > npm install -g asar\n    > asar pack app app.asar\n<\/code><\/pre>\n\n
The benefit of asar archive is that it could be read as simple as a folder in the filesystem. One way how to achieve it is via Node API. (https:\/\/electron.atom.io\/docs\/tutorial\/application-packaging\/#using-asar-archives<\/a>)<\/p>\n\n
    const fs = require('fs')\n    fs.readdirSync('\/path\/to\/example.asar')\n<\/code><\/pre>\n\n
There is more. The Electron BrowserWindow class provides the ability to access the archive too. So it can load the “index.html” file in the application the common way via the BrowserWindow#loadURL method. In this case, the “__dirname” would be the path to the .asar file.<\/p>\n\n
        var path = require('path');\n        var url = require('url');\n        win = new BrowserWindow({ width: 1280, height: 960 });\n        \/\/ __dirname is a current working directory\n        win.loadURL(url.format({\n                pathname: path.join(__dirname, 'build', 'index.html'),\n                protocol: 'file:',\n                slashes: true\n        }));\n<\/code><\/pre>\n\n
Now after the packaging and the ways how to use the asar were described, let’s move to an installer. Don’t worry you would not need to create the archives and config files manually. The tools for this purpose are there for you.<\/p>\n\n
Electron builder<\/h2>\n\n
For this tutorial, the electron-builder<\/a> tool will be used.  The utility simplifies the creation of distribution package for all major platforms, even the cross platform build is possible.<\/p>\n\n
    npm install electron-builder --save-dev\n<\/code><\/pre>\n\n
The electron-builder tool needs a little bit of configuration, so the final changes in “package.json” file looks like this (This is a minimal configuration)\n${PROJECT_FOLDER}\/package.json<\/p>\n\n
      "author": {\n        "name": "Radomir Sohlich",\n        "email": "sohlich@example.com"\n      },\n      "description": "Example application.",\n      "devDependencies": {\n         "electron-builder": "^19.22.0",\n      },\n      "build": {\n        "appId": "com.example.app",\n        "files": [\n          "main.js",\n          "build"\n        ],\n        "mac": {\n          "category": "productivity"\n        }\n      }\n<\/code><\/pre>\n\n
The build->files section defines which files\/folders will be included in asar archive. The archive works as the application folder. The electron executes the main.js directly from the archive. The build folder contains application build with index.html and bundles. The “author” and “description” properties are not mandatory, but it is always better to provide this info. (The electron-builder will produce less warning messages :) )<\/p>\n\n
The final step is to add a npm command to run the electron-builder build.<\/p>\n\n
${PROJECT_FOLDER}\/package.json<\/p>\n\n
    "scripts": {\n        "dist": "build --mac"\n      },\n<\/code><\/pre>\n\n
The “dist” command will build the application and subsequently build a distribution package. In this case, the MacOS is configured. The platform is defined by the switch. The available values are in the following figure. (stolen from project documentation https:\/\/github.com\/electron-userland\/electron-builder#cli-usage<\/a>)<\/p>\n\n
      --mac, -m, -o, --macos   Build for macOS, accepts target list (see\n                               https:\/\/goo.gl\/HAnnq8).                       [array]\n      --linux, -l              Build for Linux, accepts target list (see\n                               https:\/\/goo.gl\/O80IL2)                        [array]\n      --win, -w, --windows     Build for Windows, accepts target list (see\n                               https:\/\/goo.gl\/dL4i8i)                        [array]\n<\/code><\/pre>\n\n
To execute the build, call the command in terminal and the output should look like this.<\/p>\n\n
    > npm run dist\n    > electron_app@0.0.0 distmac \/Users\/radek\/Junk\/electron_app\n    > ng build && build --mac\n    \n    Hash: ee6c31ccdab8735b740c\n    Time: 10199ms\n    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]\n    chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.27 kB {3} [initial] [rendered]\n    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]\n    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.89 MB [initial] [rendered]\n    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]\n    electron-builder 19.22.1\n    No native production dependencies\n    Packaging for darwin x64 using electron 1.7.5 to dist\/mac\n    Building macOS zip\n    Building DMG\n    Application icon is not set, default Electron icon will be used\n<\/code><\/pre>\n\n
After the successful command run, the dist folder should be created in the working directory and the installer should be there.<\/p>\n\n
    dist\/\n    --- electron_app-0.0.0-mac.zip\n    --- electron_app-0.0.0.dmg\n    --- mac\n        --- electron_app.app\n<\/code><\/pre>\n\n
The “electron_app.app\/Resources” folder contains the asar archive with “app.asar” file. That is our bundled application. If you need to debug, what is packed into “app.asar” file and what is included in the installer. The “build –dir” command could be used. It will create only the expanded distribution folder (same as dist\/mac).<\/p>\n\n
Note:\nIf you encounter the error by executing the “build –dir” command.<\/p>\n\n
    Error: Cannot find electron dependency to get electron version\n<\/code><\/pre>\n\n
The electron dependency need to be add to project.<\/p>\n\n
    npm install electron --save-dev\n<\/code><\/pre>\n\n
The repository with example project https:\/\/github.com\/sohlich\/angular_on_electron<\/a><\/p>\n\n
Series:<\/h3>\n\n