electron-react-boilerplate | electron application with react in a simple manner | Frontend Framework library

I want to make an Electronjs app with some of the react boilerplates. I guess the best one is the one with the most stars in github, but I am open to suggestions. My goal is to have one window, which is going to be the main one and another one that will be displayed only when the user clicks the Tray(https://github.com/sfatihk/electron-tray-window). What is the best solution, without using a second html and if possible without ejecting.

I have cloned electron-react-boilerplate from GitHub, which comes with Electron 11.0.1:

I'm trying to use IPC to communicate between my react component and main electron process. In component :

In the Electron Performance docs, the following is said:

In traditional Node.js development, we're used to putting all our require() statements at the top. If you're currently writing your Electron application using the same strategy and are using sizable modules that you do not immediately need, apply the same strategy and defer loading to a more opportune time.

So it recommends to allocate resources "just in time" calling require() just when it is needed. The problem is that I'm trying to use electron-react-boilerplate and TypeScript doesn't seem to support well this kind of code. Here is an example:

src/main.dev.ts:

I am using the electron-react-boilerplate and want to open a component in a new BrowserWindow. There are multiple questions and answers on how to do this, but none of them are working after packaging the app.

Questions / Answers I've Found:

• How to handle multiple windows in Electron application with React.JS?
• electron-react-boilerplate :sub window on clicking a button
• https://stackoverflow.com/a/47926513/3822043

In my component I have tried to use the following lines to open a new window to a different route.

I'm trying to use components from dependencies in a project mostly freshly forked from electron-react-boilerplate. The layout is messed up (see pic below). Tried react-chat-window, react-chat-widget, and react-datepicker, so it's across the board. Sorry if this is vague, but I don't know what else to say, and I'm hopefully missing something really basic. Anyone know?

I've also read the electron-react-boilerplate docs. My deps are in ./package.json as suggested, but I also tried putting them into ./app/package.json, which breaks it entirely. This SO answer about material-ui didn't help this either.

Here's the relevant part of my page component, pretty much the same as in the example for react-chat-window:

I'm using electron-react-boilerplate. It instructs installing by cloning the repo:

I'm having issues with material-ui (v4.9.5) library running with electron-react-boilerplate. To reproduce:

1. follow the installation tutorial
2. yarn add @material-ui/core
3. add some widgets from the library:

Context

New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate

Now I want to use Material-UI. So I thought I just follow the instructions here:

https://material-ui.com/getting-started/installation/

After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.

So I found out that there is another package.json in the folder /app/package.json I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).

Here is a screenshot:

Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.

How can one set up Material-UI with Electron or rather this specific boilerplate?

I couldn't find anything up to date for this question.