Convert electron.js main process file to TypeScript and break it to smaller files

[nop33]

• [ ] update electron version to a supported one
• [ ] create proper folder structure for main process files and convert to TS
• [ ] improve debugging experience

[nop33]

I spent a few hours today working on this. I converted the electron.js to a TypeScript and split it into multiple files. Now the conversion from TS to JS needs to be done properly.

Progress branch: https://github.com/alephium/alephium-frontend/tree/convert-electron.js

Useful resources:

• https://medium.com/@selfint/build-an-electron-app-using-vite-typescript-and-react-e98f7fc1babd
• https://electron-vite.org/
• https://github.com/hellosoftware-io/electron-typescript-react-mui/tree/main
• https://dev.to/dnsmnds/first-steps-building-an-app-using-electron-with-typescript-2a5k
• https://www.electronjs.org/blog/typescript
• https://davembush.medium.com/typescript-and-electron-the-right-way-141c2e15e4e1

[nop33]

@mvaivre Yesterday, while researching the convertion of our electron.js main process file into TS, I fell into the rabbit hole of checking out other projects to see how they structure their main and render process of their electron apps. The consensus appears to be to have these 2 subfolders:

src/main
src/render

where all files related to the Node.js part of the application (aka, main process, aka electron.js) is under src/main and everything related to the render process (aka React) in the src/render.

Lastly, I've been trying to figure out whether they use separate tsconfig for compiling JS to TS for the main process files and the render process files. Some projects do, others don't. More investigation needed.

[nop33]

Build tools:

• electron-forge (npm) (recommended by official Electron docs)
  • It used to be hosted under the electron-userland GitHub org but now it's moved under the electron GitHub org
  • Based on the docs, windows signing looks much simpler than in electron-builder
• electron-builder (npm)
  • hosted under the electron-userland GitHub org

Vite related tools:

• vite-electron-builder
  • uses vite & electron-builder
• electron-vite?

Resources:

• https://github.com/electron-userland/electron-builder/issues/1193
• https://www.reddit.com/r/electronjs/comments/pek7d5/electronbuilder_vs_electronforge/
• https://stackoverflow.com/questions/68337978/huge-difference-in-build-size-of-electron-forge-and-electron-builder