We are going to learn how to generate a ready-to-use production application through an executable; for this, we will use the following package:

https://www.electron.build/

It is important to note that you must install this package in each Electron.js project when you are interested in generating application executables, since it is not a dependency that is installed globally but rather locally.

Let's install the package in the chat project that we generated in the previous chapter:

$ npm install electron-builder -D

Once installed, we configure the following commands for MacOS:

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "start": "DEBUG=true electron .",
  "dev:macos": "electron-builder --macos --dir",
  "pro:macos": "electron-builder --macos"
},

ForLinux:

package.json

"scripts": {
  ***
  "dev:linux": "electron-builder --linux --dir",
  "pro:linux": "electron-builder --linux"
},

And for Windows:

package.json

"scripts": {
  ***
  "dev:windows": "electron-builder --win --dir",
  "pro:windows": "electron-builder --win"
},

It is then possible to run any of the commands depending on your operating system; for example:

$ npm run dev:macos

To only generate the package folder without actually packaging it; this is useful for testing purposes

Or

$ npm run pro:macos

To package in a distributable format (for example, dmg, windows installer, deb package).

By executing the previous command, we will have generated the project as an executable:

<proyect>/dist

And some files like the following:

When executing the executable, which in the case of MacOS would be the DMG, in the case of Windows, it would be the EXE and in the case of Linux, it depends on the flavor you are using, we will see the application:

Another very important detail is that, depending on the project you are carrying out, you have to make additional modifications since the workspace is different; especially with the integration with external files whose directory specified when developing the application does not correspond to the one used in production, throughout the book, we will see some examples.

Remember that the previous material is part sobre mi curso completo sobre Electron.js