Reading and writing files.

[ENNA-Egor]

Good afternoon. Could you tell me how to read and write files using this template? If it's possible, of course. Thank you.

[guasam]

Hey @ENNA-Egor! it could be easily done via creating a new conveyor FileApi - just define its schema, api, and handlers.

There are some related examples in the conveyor README, see if that helps.

[ENNA-Egor]

Thank you.

[ENNA-Egor]

I built the application according to the README recommendations. app-api.ts looks like this:

import { ConveyorApi } from '@/lib/preload/shared'

export class AppApi extends ConveyorApi {
  getAppInfo = () => this.invoke('get-app-info')
  saveUserPreference = (key: string, value: string) => this.invoke('save-user-preference', { key, value })
}

export class FileApi extends ConveyorApi {
  readFile = (path: string) => this.invoke('file-read', path)
  writeFile = (path: string, content: string) => this.invoke('file-write', path, content)
  deleteFile = (path: string) => this.invoke('file-delete', path)
}

I connected the Conveyor to the element like this:

import React, {useState, useEffect} from 'react'
import { useConveyor } from '@/app/hooks/use-conveyor'

export function SettingsComponent() {
  const conveyor = useConveyor()
  const [appInfo, setAppInfo] = useState(null)

  useEffect(() => {
    // Get app information
   // @ts-ignore
    conveyor.app.getAppInfo().then(setAppInfo)
  }, [])

  const saveTheme = (theme: string) => {
    conveyor.app.saveUserPreference('theme', theme)
  }
  const fileTxtRead = (path: string) => {
    conveyor.app.readFile(path)
  }

  return (
      
    <div>
      <h2>App Info</h2>
      {appInfo && (
        <p>
          {(appInfo as any).name} v{(appInfo as any).version} on {(appInfo as any).platform}
        </p>
      )}

      <button className='btn' onClick={() => saveTheme('dark')}>Set Dark Theme</button>
      <button className='btn' onClick={() => fileTxtRead('Test.txt')}>readFile</button>
    </div>
  )
}

But I get an error: Property 'readFile' does not exist on type 'AppApi'.
Apparently I connected something incorrectly.
Thanks.

[ENNA-Egor]

I found the error. But I still have one question. How do I redirect __dirname from the Conveyor level to the application level? That is, how do I pass data from the conveyor level to the APP level?
Thanks.

[guasam]

Not really sure about why you’d use __dirname in the renderer process - it won’t work by default since nodeIntegration and contextIsolation prevent Node modules from being exposed there (for security reasons).

If you need the project’s root directory path in both dev and production (bundled) environments under the renderer process (app), you’ll have to expose it through a Conveyor API + handler or IPC call.

import { app } from 'electron';

// it can be used in some Conveyor API handler which lets you write the file in the project root
const appRootPath = app.getAppPath();

[ENNA-Egor]

Thank you very much. Everything worked out.