use an extra folder for all electron related source files

I have been trying to have the main.ts file for electron in another folder,
for example in the src folder as electron.main.ts or in an electron subfolder.

With the following changes:

  • moving the main.ts to src/electron/main.ts
  • in tsconfig.serve.json:
    • change the “main.ts” to “src/electron/main.ts” (for the “files” key)
    • add “outDir”: “dist” to compiler options
  • change main in package.json to “dist/electron/main.js”

On ‘npm run start’ the electron window I get an error: “Cannot find module ‘(……)/<project_folder>/dist/electron/node_modules/electron'”. So the imports from electron in the main.ts resolve to a wrong path, it does not find the node_modules in the top folder. But in my understanding it should because of the “node” module resolution compiler option in the tsconfig.serve.json. I have been trying many different things but I just can’t make this work. It would be really nice if you could help out. Besides, I think it would be an improvement to the template to have a separate folder for the electron related source files:)

1 possible answer(s) on “use an extra folder for all electron related source files

  1. ok i actually found the reason for not being able to be the electron main.ts anywhere else than in the top folder:

    require('electron-reload')(__dirname, {
          electron: require(
            `${__dirname}/node_modules/electron`  
          )  
        });  
    

    this code assumes the main.js file is in the top folder. so this has to be changes to the according path the main.js will be in.
    in my case it resides in dist, so i changed the path to ${__dirname}/../node_modules/electron

    i still having an extra folder for all electron related files would be good for the template, it avoids cluttering the top folder, especially with all the js files generated. what do you think?:)