Frameworks are now simplifying how you build your apps, allowing developers to build more complex apps faster and easier. Using a significant less amount of codes and more tools and libraries, frameworks can help you build your apps in half the time and with half the work.
Electron is one such brilliant framework that allows building native applications (applications built on a particular platform for a particular device or OS) using simple languages and technologies such as JavaScript, HTML and CSS. Using technologies such as Chromium and Node.js, developers can build cross platform apps and websites that work on Windows, Mac and Linux.
Electron originally started off as a shell for Atom Editor, from there progressing and growing to become a complete JavaScript library in itself. Electron offers a brilliant tool set and comes packed with numerous features such as built in APIs, libraries and even support for TypeScript and Node, along with so much more!
In this blog, we’ll learn how to get started with Electron by actually installing it into our Windows PC:
In order to install Electron binaries, you need to use npm. This is most commonly the preferred method to installing Electron as a development dependency in your app
npm install electron --save-dev –save-exact
Often new developers tried to start installation of electron by simply running npm install electron instead of npm install electron-prebuilt, which was actually not the Electron that they were looking for. The reason behind this is that there was already an existing Electron project on npm, before Github’s project. However, when Github reached out to him for making only one electron project, the owner agreed to let Github use the name.
If you’ve ever worked with Electron before, you’ve likely come across the electron-prebuilt npm package. This package is an indispensable part of nearly every Electron project. When installed, it detects your operating system and downloads a prebuilt binary that is compiled to work on your system’s architecture.
The —save-exact flag is recommended as Electron does not follow semantic versioning.
If you want to see a minimal Electron app in action, then you need to clone and run the electron/electron-quick-start repository
git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start
However, most people use Electron from the command line, but if you require electron inside your Node app (not your Electron app) it will return the file path to the binary. Use this to spawn Electron from Node scripts:
const electron = require('electron')
const proc = require('child_process')
// will print something similar to /Users/maf/.../Electron
console.log(electron)
// spawn Electron
const child = proc.spawn(electron)
Electron is one of the easiest project to not only integrate, but to actually use. Once you master Electron, it will be the only framework that you will turn to for building dynamic native apps.
In order to help people advance as a developer, Eduonix has build a complete hands-on course from scratch that focuses on the actual building of apps using Electron. In this brilliant course, you will actually build 5 different practical applications from the ground up.
The first project will start off with the basics, with each project after adding more complex concepts and technologies to help the user become a master developer at the end of this course. If you want to learn more about this course, then you can visit the Eduonix Kickstarter Page. To help bring this course to life, simply pledge your support!
