CODEWITHSUNDEEP
node.jsnpmelectron
RukshanJS
RukshanJS

Reputation: 966

How to correctly build an electron nodejs program into an .exe?

I'm using Electron v2.0.8, Node v8.9.3, npm 6.4.1. I've created a simple "Hello world" program using html, css, js alongwith npm.

The program works really fine when I cd to the program directory and npm start. But when it is build(packaged) using, electron-packager <sourcedir> <appname> --platform="win32", the "sweetalert" is not showing its message, which did show when using npm start. But the buttons function as supposed. ("Clears the text field")

I suspect this has something to do with the file paths or something, but being new to this whole framework, I have no clue.

I don't know whether my whole "creating an .exe approach" is 100% correct or not. I've tried with electron-forge but it gave so many errors so I gave up on it and switched to electron-packager instead. None of the online helps work for me(I believe due to different versions) Someone please help.

Upvotes: 1

Views: 4369

Answers (2)

Michael Seltene
Michael Seltene

Reputation: 591

package.json etc...
"repository": {
    "url": "https://github.com/your/repo.git",
    "type": "git"
},
"author": {
    "name": "Author name"
},
"main": "./afolder/main.js",
"build": {
    "productName": "The product name",
    "compression": "maximum",
    "files": [
        "./afolder",
        "./node_modules",
        "./package.json"
    ],
    "appId": "any.id.app",
    "asar": true,
    "win": {
        "icon": "./your/icon/path/icon.ico",
        "target": "nsis"
    },
    "nsis": {
        "oneClick": false,
        "installerIcon": "./afolder/your/icon/path/icon.ico",
        "uninstallerIcon": "./afolder/your/icon/path/icon.ico",
        "perMachine": false,
        "deleteAppDataOnUninstall": true,
        "artifactName": "${productName} ${os} ${arch} v${version} setup.exe",
        "allowToChangeInstallationDirectory": true,
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "ShortcutName"
    },
    "asarUnpack": [ 
        //remove this comment ... 
        //packages you want to include after install.
        //for e.g.
        "./node_modules/electron-window-state",
        "./node_modules/fs-extra",
        "./node_modules/7zip-bin"
    ],
    "npmRebuild": false,
    "nodeGypRebuild": false,
    "directories": {
        "output": "../installer/${productName} v${version} setup"
    }
},
"scripts": {
    "start": "electron .",
    "installer": "yarn build --x64"
},
package.json etc...
  1. You will need "npm install electron-builder yarn --save-dev"
  2. Amend your package.json file with the above content (change productName etc... to your custom needs)
  3. npm run installer
  4. you should see a folder called installer generated on the parent directory

Upvotes: 2

RukshanJS
RukshanJS

Reputation: 966

For anyone else facing a similiar issue. Actually my program was built correctly and there was no error in the code.

What had happened was that the file paths were not correctly configured. When I manually copied the necessary files for the "sweetalert" to run, it showed up the message. Thus no errors specific to sweetalert.

I'll have to find a way to solve the 'path' issue anyways.

UPDATE:

Adding the code

"extraFiles": [
    "folder_to_be_included_in_build"
  ],

into the package.json file now copies the needed folder during "building" the app. Now no need to copy the folder manually to the build.

Upvotes: 5

Related Questions