Building Cross-Platform Desktop Apps with Electron, TypeScript and Angular

Building Cross-Platform Desktop Apps with Electron, TypeScript and Angular

We'll learn how to build cross-platform desktop apps for Windows, Linux and macOS using Electron, TypeScript and Angular. Electron was initially developped for GitHub's Atom editor. Nowadays, it's being used by big companies like Microsoft and Slack to power their desktop apps. Visual Studio Code is a powerful and popular code editor built by Microsoft using Electron.

In this article, we'll learn how to build cross-platform desktop apps for Windows, Linux and macOS using Electron, TypeScript and Angular.

Table of Contents

  • What Electron Precisely Does?
  • Prerequisites
  • Installing Angular CLI 8
  • Creating a Project
  • Installing & Setting up Electron
  • Calling Electron APIs by Example
  • Packaging your Electron App
  • Conclusion

Electron was initially developped for GitHub's Atom editor. Nowadays, it's being used by big companies like Microsoft and Slack to power their desktop apps. Visual Studio Code is a powerful and popular code editor built by Microsoft using Electron.

You can check out more apps built with Electron from this link.

What Electron Precisely Does?

So you are a frontend web developer - you know JavaScript, HTML and CSS which is great but you need to build a desktop application. Thanks to Electron that's now possible and you don't have to learn classic programming languages like C++ or Java to build your application, you can simply use your web development skills to target all the popular desktop platforms such as macOS, Linux and Windows with one code base. You only need to rebuild your code for each target platform.

Electron simply provides a native container for your web application so it looks and feels like a desktop application. If you are familiar with hybrid mobile development, Electron is quite similar to Apache Cordova but targets desktop systems instead of mobile operating systems.

Electron is actually an embedded web browser (Chromuim) bundled with Node.js and a set of APIs for interfacing with the underlying operating system and providing the services that are commonly needed by native desktop apps such as:

Let's now see how we can use Electron and web technologies (TypeScript and Angular) to create a desktop app.

electron typescript angular javascript developer

Bootstrap 5 Complete Course with Examples

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

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Build Desktop Apps with Electron, TypeScript and Angular

We'll learn how to build cross-platform desktop apps for Windows, Linux and macOS using Electron, TypeScript and Angular. Electron was initially developped for GitHub's Atom editor. Visual Studio Code is a powerful and popular code editor built by Microsoft using Electron.

The Good and Bad of Angular Development

Today, we will gather some necessary information about Angular and know its pros and cons that can help you in deciding whether to use this framework for your next project or not.

TypeScript will Make You a Better JavaScript Developer

TypeScript will make you a better JavaScript developer. You'll feel confident writing code, have fewer errors, and write fewer tests (yay!). Find out why.