Building and packaging the Electron application

Packaging an Electron application can be done in various ways. There are different tools available to do the packaging for you. It can also be done manually. Before checking the tools that automate the Electron application packaging, let's check how we can package the application manually so that you will get a detailed idea about the internals of the Electron packaging process, which is essential even when you are using the automated tools.

Distributing an Electron application is simple when comparing desktop applications that are developed using other technologies. The prebuilt binaries that can be used to distribute the application are available for download. This prebuilt binary is also shipped with the npm module that you have already installed as part of your application development. You can find this inside your node_modules/electron/dist folder. For the time being, download the same or copy the folder to your disk and extract it if downloaded from the Internet. It can be downloaded from the GitHub repository: https://github.com/electron/electron/releases. The binaries are available for most of the platforms and architectures. Download the binary for the platform that you are going to target. Actually, the prebuilt binary itself is a packaged application with minimal code that contains a simple HTML with JavaScript code inside it. The application can be executed directly so that the default application will be rendered on the shell. To package your Electron application, rename your Electron application folder as the app and place it in the resource directory of Electron prebuilt:

The typical structure of Electron prebuilt for Windows is shown in the preceding screenshot. There will be slight differences in this structure on other platforms. You can find a default _app.asar file inside the resources directory, which is the default application shipping with the prebuilt Electron. Replace your application folder with this asar archive, and you are ready to distribute your application after making your app into a zip archive or any other compressed format.

For example, if we are having a simple application with only three files--the package.json, index.html, and the main.js file--then the structure after copying the app to the prebuilt binary should be as follows:

|- locales
|- resources
|- app
|- index.html
|- package.json
|- main.js

The application can be run by executing the electron.app on Mac and electron.exe on Windows platform. The Electron shell will start your application immediately after executing the executable. You can use this as your output bundle that can be distributed to the end user.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.37.191