Accessing the file system from Angular

One of the core arguments of using electron over building a normal web application is the possibility of accessing features of the operating system only native application can access.

Common applications for that are the file system, external (USB) devices, printers and so on.

With electron, you can do everything a node.js application can do. This is because the main process of an electron application actually is a node.js program.

For this tutorial, we are going to take a look at reading the file-system with our angular application.

How electron works

Electron consists of two parts.

The first part is the main process which is a node.js application. This is the core of any electron program.

The code we defined in our main.ts file is running on the main process.

Because the main.ts is running in node, we can make calls to the node.js API here.

This main process is then spawning the second one by opening the browser window, which is the second part of the app and runs our angular application.

This process is (almost) a regular chrome window and the JavaScript code running in that window has the same access as any other application running in a browser.

We can’t access the node.js API from here. Especially we do not have access to the file system.

Inter-process Communication (IPC)

But if we cant use the node.js API in our angular application, how do we get access to the file system?

The answer is called inter-process communication. It is a method the operating system provides so that two different processes can communicate with each other.

In our case, the main process has to communicate with the browser process and vice versa.

Using electron IPC

Now, IPC sounds highly technical and complicated and it really is.

Luckily, electron provides a convenient way of implementing this using simple JavaScript methods.

There are two different parts we will use for this. One for the main process and on for our angular application.

Setting up IPC in the main process

The first part is the one for the main process and called ipcMain.

To use it, we import it at the beginning of our main.ts file.

TS	electron/main.ts

import { app, BrowserWindow, ipcMain } from 'electron'

In this example, we want to listen to messages from the browser window. To do that we use ipcMain to notify us when a new message arrived.

Because we are not interested in every message, we also specify a so-called channel. Basically, channels are a way to organize messages by topic.

In our case, we listen to messages on a channel called “getFiles”.

TS	electron/main.ts

ipcMain.on('getFiles', (event, arg) => {})

We are following an idea called remote procedure calls (RPC) here by calling the channel like a function we later “call” remotely from our angular application.

Inside of the callback, we then get the required information using the node.js API and send back the response on a different channel called “getFilesResponse”.

TS	electron/main.ts

ipcMain.on('getFiles', (event, arg) => {
  const files = fs.readdirSync(__dirname)
  win.webContents.send('getFilesResponse', files)
})

That’s already it for the main process. Now we have to call our remote function from our angular application.