How to make an electron react app, which has 2 windows - a general one and one for the Tray

Question

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.

Answer 1

I recently researched methods of integrating Election + React & I highly recommend using electron-forge & adding React like this: https://blog.logrocket.com/electron-forge-vs-electron-react-boilerplate/

That article gives you good context from an experienced Slack engineer, but essentially reccommends you follow this in the electron-forge docs: https://www.electronforge.io/guides/framework-integration/react-with-typescript

That is the simplest integration possible & you'll be on solid footing with electron-forge, instead of a GitHub boilerplate.

I however started with a create-react-app project. When combining 2 frameworks, each with large package.json & lots of build tooling I do not like to merge their package.json in a single project. Instead I nested a CRA project inside of electron-forge, & I tell electron to load the /build folder out of CRA. This works for packaging the app, but during development I use electron-is-dev to load the CRA dev server on port 3001 instead. Use a.env config to change the port the CRA dev server uses to 3001, because both electron-forge & CRA want to use 3000 by default.

To connect actions from your tray window with the main app window, use IPC messages to communicate between those 2 Renderers, with the Main process in between to relay the messages.

Answer 2

Your best solution given the existing parameters, would probably be to have a separate route in your application (since you don't want a separate html page), and when the tray icon is clicked, wire it to something like

const window = new BrowserWindow();
window.loadUrl('path/to/app/special/route');

Answer 3

You can use Tray in electron for this

Quote from the tray docuentation

Add icons and context menus to the system's notification area.

Example code:

const { app, Menu, Tray } = require('electron')

let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/my/icon')
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', type: 'radio', checked: true },
    { label: 'Item4', type: 'radio' }
  ])
  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)
})