[Electron][TypeScript] output/input files

Intro

This time, I will try outputting logs, loading external settings files.

Environments

Node.js ver.16.1.0
TypeScript ver.4.2.4
Electron ver.12.0.2
electron-log ver.4.3.5
electron-store ver.8.0.0

Outputting logs

For outputting logs on Electron applications, I choosed "electron-log".

GitHub - megahertz/electron-log: Just a simple logging module for your Electron application

From Electron side

I can output logs like below.

main.ts

...
import * as log from 'electron-log';
...
log.debug('hello');

function createWindow (filePath: string): BrowserWindow {
  log.error('create window');
...
}

Result

Console

08:09:23.097 > hello
08:09:23.160 > create window

main.log

[2021-05-16 08:09:23.097] [debug] hello
[2021-05-16 08:09:23.160] [error] create window

By default, the log files are saved in "C:/Users/example/AppData/Roaming/{ApplicationName}/logs".

And they are divided in "main.log" and "renderer.log".

So if I call "log.debug('hello')" from "preload.ts", the logs are written in "renderer.log".

Change saving directory and file names

I can change the saving directory and the file names.

log.debug('before');
log.transports.file.resolvePath = () => 'C:/Users/example/OneDrive/Documents/sample.log';
log.debug('after');

Of cource, before changing the path, the logs are saved at default path.
And "log.transports.file.resolvePath" is only affected in the same file.

So if I execute "log.transports.file.resolvePath" only in "main.ts", the logs of "preload.ts" are saved in "C:/Users/example/AppData/Roaming/{ApplicationName}/logs/renderer.log".

Client side

"electron-log" only can be used in Node.js applications.
So I can't use it in client side.

So I add outputting log functions in the contextBridge.

global.d.ts

declare global {
    interface Window {
        myapi: Sandbox
    };
}
export interface Sandbox {
    greet: (message: string) => void,
    saveFile: (name: string, data: Uint8Array) => void,
    logDebug: (callFrom: string, message: string) => void,
    logError: (callFrom: string, message: string) => void,
};

preload.ts

import { ipcRenderer, contextBridge } from 'electron';
import * as log from 'electron-log';

window.addEventListener('DOMContentLoaded', () => {
    log.warn('Loaded');
});
contextBridge.exposeInMainWorld('myapi', {
    greet: async (data: any) => await ipcRenderer.invoke('greet', data),
    saveFile: async (name: string, data: Uint8Array) => await ipcRenderer.invoke('saveFile', name, data),
    logDebug: (callFrom: string, message: string) => log.debug(`[${callFrom}] ${message}`),
    logError: (callFrom: string, message: string) => log.error(`[${callFrom}] ${message}`)
  }
);

main.page.ts

...
export async function load(filePath: string) {
    window.myapi.logDebug('main', 'call from client');
...
}

Result

[2021-05-16 08:59:06.969] [warn]  Loaded
[2021-05-16 08:59:06.978] [debug] [main] call from client

Loading external settings files

When I searched how to load config files in Electron applications, I found "electron-store".

GitHub - sindresorhus/electron-store: Simple data persistence for your Electron app or module - Save and load user preferences, app state, cache, etc

I can save user settings in "config.json".

main.ts

...
import ElectronStore from 'electron-store';

const settings = new ElectronStore();
settings.set({
  filePath: 'example'
});
...

The file is saved at "C:/Users/example/AppData/Roaming/{ApplicationName}".

config.json

{
    "filePath": "example"
}

But in this time, I want to load external settings file like "appsettings.json" in ASP.NET Core.

So I just load JSON file by fs.

settingsLoader.ts

import * as fs from 'fs';
import { AppSettings } from "print.type";

export async function load(): Promise<AppSettings> {
    const fileData = await fs.promises.readFile('./appsettings.json', {
        encoding: 'utf-8'
    });
    return JSON.parse(fileData);
}

appsettings.json

{
    "filePath": "sample.pdf"
}

Blog

[Electron][TypeScript] output/input files

Masui Masanori

Intro

Environments

Outputting logs

From Electron side

main.ts

Result

Console

main.log

Change saving directory and file names

Client side

global.d.ts

preload.ts

main.page.ts

Result

Loading external settings files

config.json

settingsLoader.ts

appsettings.json

Join Our Newsletter. No Spam, Only the good stuff.

Related