Electron Build Desktop Apps HTML\CSS\JS | Package, Build and Deploy your App 05

Video Tutorial

Overview

In this tutorial we are going to cover the build and deployment of your Electron App, using a third party library electron-builder which is going to help us compile our app and create an installer for a specific platform (Windows, Linux, OS X), in this case, we are going to build for windows either 64 or 32, keep in mind that if you need to build other supported platforms make sure to do it from the target platform.

Installing and App Config

First, we need to install electron-builder as an npm package

npm install electron-builder --save-dev
#make sure to save it as dev dependency

Then go to package.json and add your app information (name, version, license…)

/*package.json*/
"name": "electron-app",
"main": "main.js",
"version": "1.0.0",
"author": "Islem Penywis",
"license": "MIT",

and your app is set for building, please make sure to correctly type your app information in case you have built a larger app.

Building and Packaging

Now it is time to build our app, all we need to do is add the build configuration under the build object and our platform-specific config

"build": {
    "appId": "com.ipenywis.app",
    "productName": "Electron Test App",
    "target": "NSIS",
    "directories": {
        "output": "build"
    },
    "nsis": {
        "oneClick": false, ///< No One Click Installer 
        "allowToChangeInstallationDirectory": true ///< User can change install DIR
}

So under the build object, we add our appId which represents our specific application id, productName is the installer name which may contain special chars and spaces.

electron-builder by default specifies the dist directory as the folder where to store the built app, but in our case, this folder is already in use so using the directories attribute we can change the output directory.

Then we choose our build configuration for the windows installer (NSIS) you can use other configurations, but I really recommend you go with this one besides for other platforms rather than windows there are other build conf specific for them, please make sure to read more about the installer and build configurations on the electron-builder DOCS.

Lastly, we need to run the build, let’s just add another script to the package.json file that will handle building our app.

//Add this Script
"dist": "electron-builder"

What’s Next 

Try to start by building a very basic app using electron in order to grow your skills up, also i really recommend you go with react for the UI Rendering because that would give your app more meaning.

Lastly, don’t forget to check the DOCS for more advanced usage.

No Comments Yet