DEV Community

Masui Masanori
Masui Masanori

Posted on

[Electron][TypeScript] output/input files

#electron #typescript

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".

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'); ... }
Enter fullscreen mode Exit fullscreen mode

Result

Console 
08:09:23.097 > hello 08:09:23.160 > create window
Enter fullscreen mode Exit fullscreen mode

main.log 

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

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');
Enter fullscreen mode Exit fullscreen mode

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, };
Enter fullscreen mode Exit fullscreen mode

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}`) } );
Enter fullscreen mode Exit fullscreen mode

main.page.ts 

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

Result 

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

Loading external settings files

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

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

main.ts

... import ElectronStore from 'electron-store'; const settings = new ElectronStore(); settings.set({ filePath: 'example' }); ...
Enter fullscreen mode Exit fullscreen mode

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

config.json 

{ "filePath": "example" }
Enter fullscreen mode Exit fullscreen mode

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); }
Enter fullscreen mode Exit fullscreen mode

appsettings.json 

{ "filePath": "sample.pdf" }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)