ElectronJS # 1: How to create cross-platform desktop apps with javascript

If you can build a website, you can build a desktop app as well as using the same technology that you use for web apps.

Now, you might be curious about how we can build the Desktop app from JavaScript.

Yes, We can build the cross-platform desktop app with javascript using an open-source framework, called electron js.

We can use electron js for creating native applications, with web technologies like JavaScript, HTML, and CSS.

It takes care of the hard parts so you can focus on the core of your application.

Electron uses Chromium and Node.js. so you can build any kind desktop app from plain javascript, typescript, angularjs, or reactjs, etc.

we can build and ship cross-platform apps for Windows, Mac, and Linux systems as well.

Desktop Apps built with Electron JS :

The desktop apps like Microsoft teams, Microsoft visual studio code, and slack are developed using web technology and electron js.

VS Studio code

team
slack


you can watch this video to get more ideas about how electron works

Create a desktop app with Javascript & ElectronJS

In this lab, we are going to create a windows desktop app with javascript using an electron.

First, clone quick start electron app from the git repo

git clone https://github.com/electron/electron-quick-start

then go into the repository

 cd electron-quick-start

To Install all dependencies, run following command in the terminal

npm install

And now you can run “npm start” command to start your app

npm run start

It will run your app locally on the dev server and will automatically bring up the browser on your computer with a default desktop app – hello world

Package and Distribute your App

If you want to package and distribute your app to others, then go to https://www.electron.build/ , Install and configure electron builder.

  • Install electron-builder package –

npm install electron-builder

  • Configure commands to build and package app for distribution

In package.json , add the following script and build block

"scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
"build": {
    "appId": "hashlab.demo",
    "mac": {
      "category": "hashlab.app.demo.demoapp"
    }
  },

finally, run command “npm run dist” to make your app one-click installable.

npm run dist

Now your app is ready to install on your Windows machine.

Go ahead and install your app from the “dist” folder. Once the installation is completed, open your app from the Windows start menu.

Thats It!

In the next lab , we will explore about how to autoupdate electron based desktop.