Beginners Guide to Electron Framework

Explore the electron framework overview, its components, and how to build, package, distribute, and maintain a hello world app using code editors and command line.

Explore electron with popular code editors like atom and visual studio code; learn to launch apps via npm in an integrated terminal and build your first hello world electron project.

Learn to build a hello world electron app by initializing npm, installing electron, and wiring a main process with a browser window that loads an HTML file.

discover how to modularize an electron app by organizing code into a source folder, renaming the main file to bootstrap, and updating package.json and load paths for a clean architecture.

Add a menu to the Electron app by extending the default application menu with a root and submenu items like preferences and log, using build from template and click handlers.

Add a close button in the related js file, grab electron with require, attach a click listener, and call remote.getCurrentWindow().close() to close the window and shut down the app.

Learn to establish inter-process communication between Electron's render and main processes, open a second window, and exchange messages via ipc channels and web contents events.

Discover how to package an electron app for Mac, Windows, and Linux by creating icons, converting formats (icns, ico), and building with electron-packager using npm scripts.

Explore the basics of electron by reviewing app components, inter-process communication between windows, and packaging and debugging for distribution with Visual Studio Code and package management.

Extend the electron base package with popular frameworks to create dynamic user interfaces. Learn angular integration via a package manager and use fall time or bootstrap for layouts.

integrate angular into an electron application by configuring main files, tsconfig, and angular views, then install angular, electron angular, and compile with tsc to run.

Learn to build attractive Electron app interfaces quickly with Photon, wire Photon CSS, select layouts, and implement a three-pane layout with padding for a native look.

Continue building a simple database driven app with Electron, setting up bootstrap index, installing dependencies, and wiring the UI to display database data in a result element.

Finish a simple database driven app by displaying city data (name and state) from a database in an Electron app, using IPC renderer communication, and rendering results in the UI.

Learn to build an advanced database driven app in Electron, implementing insert, update, and delete operations, handling UI with JavaScript and IPC, and evolving from front-end to HTML pages.

Parse the current page from the URL, extract update parameters, and populate form fields from the database; build a get parameter by name function with regex.

We implement the get data function, wire up the database query results to the page, and build dynamic list items with update and delete buttons.

learn to build a database driven Electron app by handling form submissions for insert and update, clearing results, collecting city and state values, and routing via insert and update functions.

Split a monolithic database-driven Electron app into modular responsibilities by moving insert, update, and delete logic into separate HTML and JavaScript files, with routing and redirects.

Split responsibilities by moving update data and date functions into separate modules, exposing date data via module exports, and using a dom content loaded listener.

Fetch data from the internet into an Electron app, insert into a local RSS feed database from cnn.com, and display it back; create the feed table (id, date, description, title).

Fetch data from the internet, drop it into a database, and display it in your Electron web application. Tune the loading icon and CSS for alignment as data loads.

Explore building a web view based app using the webview tag to render web pages, then customize and rebuild a calculator capstone project locally.

Create and update a calculator application using Electron as part of a capstone project. Explain why each feature exists and how the pieces fit together, building from earlier versions.

Explore building a calculator app with the electron framework by reworking an older app using modern techniques, bootstrap setup, and plain CSS to remove coloring while adding basic functionality.

Learn to build a calculator app with electron by debugging input handling, display updates, and equal and operator logic, fix reference errors, and adapt boilerplate code for a capstone project.

Explore how a calculator app is built in Electron, updating an earlier framework with recent techniques and building from scratch, while examining file structure, functionality, and an advanced user interface.

Explore how electron powers real-world apps, from hello world to packaging for distribution, and integrate frameworks like angular and bootstrap to fetch data from the internet and build database-driven projects.