Electron project configuration (multiple questions)


Hello everyone,

I apologize in advance if some questions were asked. I did extensive google search but still left confused in certain aspects when developing electron applications, I hope you can help me resolve them :slight_smile:

  1. Electron has main and renderer files. I use typescript but still create 2 separate files main.ts and renderer.ts and I require renderer in HTML script tag at the bottom. Is it really the best way to call for script file? can I do it inside main.ts by importing it or?
  2. Is it possible to bundle all electron js files into one? Or renderer and the main process should be separated? I was thinking of using angular 2 + webpack and thought is “electron ok” with me bundling all into one file or chunks if the code is too big.

Thanks a lot o/


The renderer and the main process are exactly that, separate OS-level processes. Not only that, but the Chromium stuff, the DOM, and other libraries aren’t available in the main process. This is why the best practices generally recommend keeping the code that runs in the main process separate from the code that runs in the renderer process. Theoretically could you mash them up into one big file? I suppose you could … but I don’t see why that would be more desirable than say two big files.

You can find out more about the main process and renderer process in the Electron documentation.


Thanks, yea I went through that documentation. The reason why I am asking is because I know for example how to use webpack to bundle everything into bundle.js or multiple bundle.js chunks if the file size is too big. However, I fail to create a config (or adapt the angular-cli config) to output 2 files instead. Main and renderer files, thus the question can you bundle it all :slight_smile:

Any idea about the first question? What are the best practices of requiring renderer file? in HTML file or could you require it inside main.js?


If you require it in main.js (or whatever file is referenced by the main property of your package.json) then it will be loaded inside the main process, not the renderer process. Because they are two separate OS-level processes, they have two completely separate memory spaces. So if you mean require it only inside main.js, then the answer would be no because there’s then no code running in the renderer process to control the DOM, draw the UI, respond directly to the user’s actions in the browser window, etc.


So the best place then is inside html file like this
<script> require(renderer.js) </script> ?


I tend to follow the way Atom does it and use <script src="index.js"></script>, but yes.


Sorry to bother you again, got a few more questions. Is it ok if I create an IpcChannel class where I define all the methods used when communicating with ipcRenderer as a separate file and then import it in main.js file? is that being executed as a part of main process?


It sounds like what you’re suggesting would work, but to be honest … I haven’t done much work with the IPC stuff. Perhaps someone else around here can give a more reliable and detailed answer :slight_smile:


I’ve bundled my electron app with webpack/rollup/browserify many times.

Don’t bother to bundle main.js There’s no reason to. There has to be two files because Electron works with two processes but there’s no reason to fight it. Just bundle your app and load it from index.html