This is my first dive into Electron and writing desktop apps. I chose Electron due to my existing familiarity with JS and React.js. The documentation is excellent but I found most things required trial and error to get working, especially around the menu. Getting started is fast and if you know React, it's pretty easy to build electron apps.
I followed this excellent guide to get started - https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/.
The only real dependencies were SASS, fontawesome and React.js (and Electron of course). The main application logic was in a single file.
The app, while written in React, uses a lot of vanilla DOM manipulation for the SVG part. Due to the nature of rendering SVGs, I had to use an <object> element, which actually caused me a lot of issues.
Some of <object>'s gotchas include not being able to setup event listeners (meaning when you clicked the SVG, the object got focus and you're window listeners would never fire), how to export the SVG structure in a nested document hierarchy and global shortcut communication between the main and renderer threads in electron.
Happy to discuss anything I've learned, the build or the code in general. It's not open source but will always remain free.
Feel free to leave some feedback.
Top comments (0)