Electron From Scratch: Build Desktop Apps With JavaScript

Open the image shrink app, browse a file, and set quality to optimize size using Image Min plugins for JPEG, PNG, and GIF, with outputs saved to the home directory.

Learn to build an Electron app from scratch by creating a main window with BrowserWindow, configuring package.json, and running the image shrink project.

Configure the Electron main window to load a local index.html via load file or load URL. Add a custom icon from assets/icons to customize the app on Windows.

Learn to detect environment and platform in Electron with process.env and process.platform, implement an isDev flag, and adjust window behavior and dev-tools access for production across macOS, Windows, and Linux.

Install nodemon to auto reload the main process and learn how to reload the renderer with command+R, compare with Electron reload on Mac, and set up a dev script.

Define a file menu item and a quit action, build the menu from a template, and apply it as the application menu, with mac and windows adjustments.

Learn to implement menu shortcuts and global shortcuts in Electron, using accelerators for command W and ctrl W, and register reload and dev tools shortcuts across mac, Windows, and Linux.

Build a development-only developer menu in Electron using roles like file menu, reload, force reload, and toggle dev tools, including a separator and conditional display.

Open an about window from the app menu in Electron, load about.html in a 300 by 300 window, and tailor the mac and windows menus with app.name and submenu actions.

Build the Electron app interface with Materialize and Font Awesome, using local assets, including a file input, quality slider, and an output path display.

Build the renderer logic in an Electron app, wire a form to the main process via ipc, and use node integration with path and os to display the output path.

Capture form data and send the image path and quality from the renderer to the main process via IPC renderer and IPC main, then log and handle the options.

Implement a desktop image optimizer using imagemin with mozjpeg and png quant plugins, manage Windows paths with slash, set quality and destination in options, and auto open the output folder.

Send events from the main process to the renderer using main window's webContents.send, then listen with IPC renderer on image done. Display a toast showing image resized to 50% quality.

Learn to add log files to your Electron app with electron-log, log info and errors, and verify outputs in Mac and Windows log paths before packaging.

Package and test our electron app as a desktop executable using electron packager; configure icons, platform-specific options, and npm scripts to produce release builds for Mac, Windows, and Linux.

Build a desktop app with electron that uses a tray icon and notifications to monitor cpu usage, with a configurable overload threshold and local storage for settings.

Copy the electron starter boilerplate into your top project, replace icons, install dependencies, and run npm run dev to launch the main window and menus to monitor your CPU.

Set up the interface using the Underscore template and assets, preview the Electron app with custom CSS and fonts, and plan CPU, system info, and alert settings.

Build a three-tab interface with HTML, CSS, and tabs.js, featuring a CPU panel, system info, and settings form, including a dynamic progress bar, CPU usage, memory, uptime, and alerts.

Learn to fetch CPU percentage and total memory in an Electron renderer using Node OS utils and the OS module, with live updates via setInterval.

Implement dynamic system stats in an Electron app by polling CPU usage, CPU free, and uptime every two seconds, and update the UI with converted days, hours, minutes, and seconds.

Create a progress bar that reflects CPU usage and turns red at overload, with plans to trigger HTML5 desktop notifications.

Create a function to notify the user using the HTML5 notifications API in Electron, passing a title, body, and icon to create a cross-platform desktop notification.

Set up alert frequency to control notification timing in an Electron app by storing last notification timestamps in local storage and checking CPU overload before notifying.

Build a custom Electron store from scratch to persist settings in a JSON file, exploring options like local storage, IndexedDB, flat files, and databases, with get, set, and parse data.

Configure the main process to send default settings to the renderer via web contents on the dom ready event, and display cpu overload and alert frequency in the form.

Learn to save settings in an Electron app by capturing form input, sending it via IPC renderer to the main process, and persisting to a user settings.json file.

Hook into settings with ipc renderer to replace hardcoded monitor values, enabling cpu overload and alert frequency controls; the app shows cpu usage and stores last alert in local storage.

Create a tray icon from assets/icons and join the path correctly, then toggle the main window with tray clicks, keeping the window hidden by default with 0.9 opacity.

Create a tray context menu in electron to quit from right-click, and hide the main window on close unless a quitting flag is set.

Learn how to add a view menu item in an Electron app to toggle navigation using IPC between main and renderer, hiding or showing the nav element.

Learn to refactor an Electron app by introducing a MainWindow class that extends BrowserWindow and centralizes loadFile and dev handling. Plan an AppTray class next.

Create an app tray class that extends Tray, accepts an icon and a main window, binds click and right-click handlers, and adds a tooltip to the tray icon.

Package and test an electron app by setting production in package.json, packaging for mac, building the release executable, and validating settings and icons before moving to a React-based frontend.

Build a bug logger app by transitioning from vanilla JavaScript to React, using a MongoDB Atlas database for persistent logs with crud, user and priority, and React Bootstrap components.

Clone a simple electron react boilerplate to rapidly scaffold a bug logger app, and configure webpack, electron packager, and dev server for development and production.

Build a React and bootstrap-based electron renderer interface, render logs in a table with useState, and set up IPC communication with the main process for future database integration.

Pass log data into a LogItem component, destructure fields including _id, priority, text, user, and created, use _id as the key, render priority with a badge, and add delete button.

Learn to format dates in a React Electron app using moment.js, install moment and react-moment, and apply custom date formats in your components.

Create an add log item component that renders a bootstrap-styled form inside a card, using useState to manage text, user, and priority with a select input and submit button.

Learn to display a log in the user interface by passing an add item prop, updating the logs state with a spread array, and preparing id and created date.

Implement alert functionality in an electron app using bootstrap alert and React useState, to show, auto-dismiss, and render success, danger, and log actions like add or delete.

Add a UI delete button in the log item, pass a delete function from app.js with the item ID, filter logs to remove it, and show a log removed alert.

Set up a cloud MongoDB Atlas cluster, create a bug logger database with a logs collection, configure a read-write user, and model data with a Mongoose schema for CRUD operations.

Connect to MongoDB using Mongoose in an Electron app by creating a config/db module, using async/await with error handling, exporting a connect function, and wiring it into main.js.

Create a log model with a mongoose schema in models/Log.js. Define fields text, priority, user, and created with defaults and validation, then export the model and import it in main.js.

Fetch logs from the database via Electron IPC, send them to the renderer, and update the app's logs state for display.

Add logs to a database in an Electron app by sending logs from the UI to the main process via IPC, persisting with Mongoose, and updating the UI after save.

Delete logs from the database by switching to the bug logger in db.js, deleting by id via IPC, refreshing the UI, and adding a clear logs menu item.

Add a clear logs menu item in an electron app, with mac menus and a logs submenu that clears the database via mongoose and updates the UI via IPC.

Package and test a React Electron app by replacing the icon, building release builds with npm run package and electron packager, and validating log creation, deletion, and clearing in production.

Learn to set a custom icon for the bug logger app by adding an icon flag in package.json, using Mac icns, Windows ico, and Linux png assets for packaging.