Ionic3 + Electron how to configure build and launch of electron exe

Ionic Framework ionic-v3
1

Hi there,

I have set up an ionic + electron project, but every time I have to do ionic serve and then npm start so as to launch the electron wrapper.

I have 2 questions:

  1. is there a way to setup this in one single command? (So that it builds my ionic files, and then does the launch of electron?

  2. Is there a command, when developing web-apps for browser, to just build (not serve?) I tried Ionic cordova build (after adding browser platform - obligated by the CLI - , but it just yields weird errors).
    What is the difference between the files generated by: Ionic serve, and those generated by ionic cordova build browser?

This is my current pagkage.json:

{
    "name": "suntrack-inject-app",
    "author": "Todologic",
    "homepage": "http://todologic.com/",
    "private": true,
    "main": "electron-main.ts",
    "scripts": {
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "electron": "ionic-app-scripts build; electron .",
        "start": "electron ."
    },
    "dependencies": {
        "@angular/common": "2.2.1",
        "@angular/compiler": "2.2.1",
        "@angular/compiler-cli": "2.2.1",
        "@angular/core": "2.2.1",
        "@angular/forms": "2.2.1",
        "@angular/http": "2.2.1",
        "@angular/platform-browser": "2.2.1",
        "@angular/platform-browser-dynamic": "2.2.1",
        "@angular/platform-server": "2.2.1",
        "@ionic/storage": "1.1.7",
        "@types/moment": "^2.13.0",
        "@types/node": "^7.0.12",
        "@types/utf8": "^2.1.5",
        "cordova-browser": "^4.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.1",
        "cordova-plugin-whitelist": "^1.3.1",
        "electron": "^1.6.2",
        "ionic-angular": "2.0.1",
        "ionic-native": "2.4.1",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "moment": "^2.18.1",
        "ng2-translate": "^5.0.0",
        "rxjs": "5.0.0-beta.12",
        "sw-toolbox": "3.4.0",
        "zone.js": "0.6.26"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.1.0",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "electron": "^1.4.15",
        "electron-packager": "^8.6.0",
        "typescript": "2.0.9"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "Suntrack Inject, by Todologic",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "browser"
        ]
    }
}

Thanks!

1 Like
2

Hi mflmartin,

did you find a solution? If that’s the case, would you mind sharing it? :smiley: thank you!

1 Like
3

What are the exact commands you use? This should be pretty easy with the scripts part of package.json. You can combine commands in there.

Yes, before that was npm run ionic:build but Ionic CLI 3.7 added ionic build that does exactly that.

browser is a Cordova platform that also includes support for Cordova plugins that are available for the browser platform. These are not many, so the use is minimal.

ionic build is porbably what you are looking for.

4

Hi,

-> is there a way to setup this in one single command? (So that it builds my ionic files, and then does the launch of electron?

You can use node-foreman: https://github.com/strongloop/node-foreman

Or concurrently: https://github.com/kimmobrunfeldt/concurrently and wait-on: https://github.com/jeffbski/wait-on

Also see: https://robferguson.org/blog/2017/11/09/build-a-desktop-application-with-ionic-3-and-electron/

-> Is there a command, when developing web-apps for browser, to just build (not serve?)

ionic build --platform=browser

Cheers
Rob