Question:

Build an Electron application from scratch

Solution

Electron JS apps are the easiest way to create a cross-platform GUI application. It is widely used for desktop applications such as Steam, VSCode, Spotify, and Slack. In this article, we will deep dive into the topic and learn about the various components that create electron applications. This electron js tutorial will help you create a basic application quickly.

Overview

Electron.js is a popular open-source framework that enables developers to create cross-platform desktop applications using web technologies such as >HTML, CSS, and JavaScript. With Electron, developers can build desktop apps for Windows, macOS, and Linux using a single codebase, making it an efficient and cost-effective solution for creating desktop apps.

Electron works by bundling a web application inside a native wrapper, allowing it to access system-level resources like file systems, network connections, and other hardware. This means that developers can leverage the power of web technologies to create desktop applications that are as functional as native applications.

Now, that you have basic information about the Electron app, let’s get into the process of building an app with Electron. js. We have listed simple steps to quickly build an Electron.js application.

Step 1: Install Node.js

Install Node.js and npm (Node Package Manager) on your machine.

Step 2: Create a browser window

After installing node.js and npm, it's time to set up a simple npm project. The npm will help us to manage the packages our project depends on. Plus, these packages serve as a handy place to keep building scripts.

> mkdir electron-from-scratch

> cd electron-from-scratch

> git init

> npm init

Here, npm will ask a lot of questions and then create a package.json file based on the answers we provide. Now, the below command will ensure that we do not publish this package as a library by accident and hence set the private property in the config:

[...]

"private": true

}

This enables npm to refuse to publish the pancake, even if we asked it to.

After setting up npm, we’ll use it:

> npm install --save-dev electron

The update package.json will help us to add electron as a dependency and also build a package-lock.json.

The minimal electron script looks something like the below-mentioned:

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {

// once electron has started up, create a window.

const window = new BrowserWindow({ width: 800, height: 600 });

// hide the default menu bar that comes with the browser window

window.setMenuBarVisibility(null);

// load a website to display

window.loadUrl(`http://example.com`);

});

This will allow Electron to run, and once it is ready, we will create a window to display a webpage that we want. After this, we need to add this file in src/electron/index.js. The plan is for a folder structure that looks like the below structure:

root

> package.json

> src/

> electron/

[code to implement the main electron process]

> website/

[code to define the website that we're hosting in electron]

> out/

[contains compiled/bundled versions of src/ folders]

> dist/

[contains packaged version of the app, ready to release]

We now need to run the electron application that looks like this:

> ./node_modules/.bin/electron ./src/electron/index.js

But, typing that out every time is cumbersome, so we'll define an npm script in the package. json to store the command:

"scripts": {

[...]

"start": "electron ./src/electron/index.js"

When we run npm scripts, npm adds./node modules/.bin/ to the path, so we don't need to specify that portion. We can now execute our electron program with npm start.

Introducing TypeScript

TypeScript is an open-source programming language developed by Microsoft that is a superset of JavaScript. It adds static typing and other features to the JavaScript language. TypeScript provides optional static typing, which helps catch errors before code is executed, making it easier to build and maintain large-scale applications.

>TypeScript is designed to be compatible with existing JavaScript code and run on any platform that JS desktop app can run on, including web browsers, servers, and desktop and mobile devices.

Step 1: Install TypeScript

> npm install --save-dev typescript

Step 2: Create a simple built script

"scripts": {

[...]

"build": "tsc"

Finally, you need to rename it from index.js to index.ts.

We can now execute npm run build to check how the files in./src are mapped to./out. We'll also need to modify the start script so that electron runs./out/electron/index.js rather than our typescript code.

After all of that work, we arrive at the punchline: