Skip to content

drewwiens-spikes/hybrid-web-and-desktop-angular-electron-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Description

Electron is a framework for creating native desktop applications for Mac, Windows, and Linux using front-end web technologies and the Node.js API. Each window in an Electron app is essentially a Chromium browser tab running in its own process. Typically a developer will write an Electron application to include all of its assets locally, i.e. HTML, CSS, and JavaScript source files. However, since Electron can also load remote URLs, it is possible to create a hybrid web/desktop application that is loaded from a server. In this way, the developer can add desktop-specific features, such as filesystem access, and make them available in the UI when the web app detects that it is running inside Electron. This repo contains an Angular CLI project and a TypeScript-based Electron project that share TypeScript types in a common directory. The Electron project's TypeScript source files are compiled to JavaScript in the start and build scripts, the build script uses electron-builder to create native binaries of the Electron application, and the Angular CLI app shows a button that allows the user to open a local application (the Windows calculator app) when it detects that it is running inside the Electron application. The remotely-loaded Angular application is able to use the Electron and/or Node APIs via a "bridge" that our Electron application attaches to the window object in a preload script that runs before the Angular application loads.