Preload Info.

[loriswave]

Hi,
first of all, thanks to having shared your template, seems simple and easy to use.
Inside your template there is the preload file :
\src\Main\preload
that is in theory is used by Electron Framework to utilize node functionality inside the render.

Then there is the file:
\src\renderer\Electron

Please can you explain a bit or add a link to the documentation of how to use this file?
I'm a newbie and have not understood very well some topics of Electron and how to work under the hood of your template.

Thanks you very much in advance

[Deluze]

No worries. My bad that is caused confusion in the first place!

The electron.ts module was personal preference. I've added electron.ts in the renderer so I could import Electron modules directly instead of having to access the electron object on the window object.

import { ipcRenderer } from 'electron';

ipcRenderer.send(...);

instead of

window.electron.ipcRenderer.send(...);

You can choose to not use the electron module at all as both snippets are completely valid, in that case you can remove the file completely as it becomes obsolete.

Hopefully this clears up some of the confusion!

Since I want this template to be as simple as possible, I'm considering to remove this electron.ts module from the renderer entirely.

[loriswave]

Hi, my issue is that If I import a module in preload.ts there is a problem, if I import in a electron ts it works well.

So if in the electron.ts I wrote:

import { IpcRenderer } from 'electron'
import { getUUID } from '../library/uuid'

const ipcRenderer = window.electron.ipcRenderer as IpcRenderer

export {
  ipcRenderer,
  getUUID,
}

this App.vue work

<script setup lang="ts">
  import Hello from './components/Hello.vue'
  import { ipcRenderer, getUUID } from './electron' //, getUUID
  
  ipcRenderer.send('message', 'Hello from App.vue!');
  console.log(getUUID())
</script>

if in the preload.ts I write:

import {contextBridge, ipcRenderer} from 'electron';
import { getUUID } from '../library/uuid'

contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: ipcRenderer,
  getUUID
})

this App.vue not works:

<script setup lang="ts">
  import Hello from './components/Hello.vue'
  import { ipcRenderer } from './electron' //, getUUID
  
  ipcRenderer.send('message', 'Hello from App.vue!');
  console.log(window.electron.getUUID())
</script>

the error is that gettUUID is not a function.

Any idea of the issue?

[Deluze]

Looks like import { getUUID } from '../library/uuid' is a valid module in the front-end process, but not in NodeJS. If getUUID is working in the front-end by directly importing it, there's no reason to add it to preload.ts and electron.ts in this case. The preload in Electron should only be used to expose NodeJS modules to the front-end.

If you want your library directory to be present in the electron build, make sure that the directory is being copied over to the build directory, and add it to files in electron-builder.json for your final build.