Dive Into Electron - Node.js

Dive Into Electron - Node.js

Build Apps for Windows, MacOS, and Linux Using Node.js and Web Technologies, all From a Single Code Base.

Build Apps for Windows, MacOS, and Linux Using Node.js and Web Technologies, all From a Single Code Base.

Electron logo

Photo by the author.

If you’re a web developer, you probably know about  Electron by now. For the uninitiated, Electron is the semi-controversial technology that allows developers to create apps that can run on Windows, macOS, and Linux using web technologies and a single code base. Despite producing apps that are supposedly slower and heavier than native apps, Electron allows web developers to target all three major PC platforms — something that may otherwise be too costly or time-consuming. In fact, some of the most widely used desktop applications (including Visual Studio Code, Slack, and Discord) are built with Electron.

In this guide, we’ll set up a simple Electron app. Because Electron is based on  Node.js, you’ll need to be familiar with that first, as I won’t cover it here. You also need to know the basics of the  Express library. As a bonus, we’ll be using  TypeScript instead of JavaScript. Trust me, you’ll never want to go back to JS.

If you like, you can refer to my repo that features an Electron app with an  Angular front end.

Overview

Electron apps essentially run on the same front-end/back-end model as most web apps, except that the front end runs in its own window instead of a browser and the back end is a Node app running locally instead of on a server.

The process of making one can be broken down into these major parts:

  1. Setting up the environment
  2. Setting up TypeScript
  3. Creating the back end
  4. Creating the front end
  5. Testing the app
  6. Building the app

javascript nodejs electron programming typescript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Object-Oriented Programming with Javascript — using Typescript

Object-Oriented Programming With JavaScript — Using Typescript. TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure Object-oriented with classes, interfaces, and statically typed like C# or Java.

The What, Why, and How of TypeScript for JavaScript Developers

A typed introduction to JavaScript .The What, Why, and How of TypeScript for JavaScript Developers

Typescript — Hello World Program

In this lesson, we are going to learn about the basic structure of a TypeScript program and understand a few concepts of the compilation process. Then we will see how we can run the compiled JavaScript program using node and ts-node.

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

Migrating from JavaScript to TypeScript (from scratch)

In this tutorial, we will talk about how to Switch from JavaScript to TypeScript . Scripts typically require some level of tinkering and tweaking to get the desired output. If written in JavaScript, developers have to remember the shape of input and output. I personally have to log output to recall what I’m getting as a response.