main.js

// Main Process
const {
    app,
    BrowserWindow,
    ipcMain,
    Notification,
    Menu,
    Tray,
} = require("electron");
const path = require("path");
const isDev = !app.isPackaged;

const dockIcon = path.join(__dirname, "assets", "images", "react_app_logo.png");
const trayIcon = path.join(__dirname, "assets", "images", "react_icon.png");

// This is a window for our splash screen. Not a bad idea to have one before the app is ready.
function createSplashWindow() {
    const win = new BrowserWindow({
        width: 400,
        height: 200,
        frame: false,
        transparent: true,
        webPreferences: {
            nodeIntegration: false,
            worldSafeExecuteJavaScript: true,
            contextIsolation: true,
        },
    });

    win.loadFile("splash.html");
    return win;
}

function createWindow() {
    const win = new BrowserWindow({
        width: 1200,
        height: 800,
        backgroundColor: "#6e707e",
        show: false,
        webPreferences: {
            nodeIntegration: false,
            worldSafeExecuteJavaScript: true,
            contextIsolation: true,
            preload: path.join(__dirname, "preload.js"),
        },
    });

    win.loadFile("index.html");
    isDev && win.webContents.openDevTools();
    return win;
}

if (isDev) {
    require("electron-reload")(__dirname, {
        electron: path.join(__dirname, "node_modules", ".bin", "electron"),
    });
}

if (process.platform === "darwin") {
    app.dock.setIcon(dockIcon);
}

let tray = null;
app.whenReady().then(() => {
    const template = require("./utils/Menu").createTemplate(app);
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);

    tray = new Tray(trayIcon);
    tray.setContextMenu(menu);

    const splash = createSplashWindow();
    const mainApp = createWindow();

    mainApp.once("ready-to-show", () => {
        // splash.destroy();
        // mainApp.show();

        // Should we get it out of the timeout probably?
        setTimeout(() => {
            splash.destroy();
            mainApp.show();
        }, 2000);
    });
});

ipcMain.on("notify", (_, message) => {
    new Notification({ title: "Notification", body: message }).show();
});

ipcMain.on("app-quit", () => {
    app.quit();
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// Chromium -> web eingine for rendering the UI, full Chrome-like web browser
// V8 -> engine that provides capabilities to execute, run, JS code in the browser
// Node JS(V8) -> we are able to run JS code + provides more features

// Webpack -> is a module builder, main purpose is to bundle JS files for usage in the browsert
// Babel -> js a JS compiler