I know I need to add import { app } from "electron"; some where but Iam unsure where to place it.
The app module is always (in my experience) imported in your main process so you can control the applications lifecycle. However, if you want to use some of the app module functionality in your renderer process, you can import it there through the remote module ( as shown in the accepted answer to this question: How to use electron's app.getPath() to store data? )
const remote = require('electron').remote;const app = remote.app;console.log(app.getPath('userData'));The main and renderer processes are key concepts in Electron so I'd suggest reading up on those. The gist is that you have one main process – it has no visual representation and it is involved with the lifecycle of your app, creating and destroying renderer processes (like BrowserWindows), communication between renderer processes, etc. – and you can have as many renderer processes as you need.
So if you want to read and write files you can do it in the renderer process as shown above – or you can do it in the main process. In the latter case, if a renderer process wants to save a file, it can message the main process through IPC, sending the data to be saved.
Which way you do it is an architectural choice.