Development
Web Development
Electron Framework
Electron From Scratch: Build Desktop Apps With JavaScript
4.7 (384 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,900 students enrolled

Electron From Scratch: Build Desktop Apps With JavaScript

Create 3 useful desktop applications with web technologies using Electron
Bestseller
4.7 (384 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,903 students enrolled
Created by Brad Traversy
Last updated 5/2020
English
English [Auto]
Preview this course
Electron From Scratch: Build Desktop Apps With JavaScript
Current price: $62.99 Original price: $89.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 2 articles
  • 8 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn how to build desktop apps with Electron
  • Create and package 3 complete cross-platform applications
  • Use IPC to communicate between Main & Renderer Processes
  • Use Vanilla JS & React with Electron
  • Create custom menu items, system tray apps and more
  • Work with local data as well as MongoDB Atlas database
Course content
Expand all 59 lectures 05:47:47
+ – Project 1 - Image Shrink App & Getting Started With Electron
6 lectures 27:35
Project Intro
Preview 03:18
Setup & BrowserWindow
Preview 06:18
Loading a Window File & Adding an Icon
07:08
Important! Absolute Icon Paths
00:16
Environment & Platform Check
07:21
Using Nodemon With Electron
03:14
+ – Working With The Menu
4 lectures 22:20
Creating a Menu Template
07:21
Menu & Global Shortcuts
05:00
Menu Roles
04:52
Open Window From Menu
05:07
+ – Interface, IPC, ImageMin & Packaging
7 lectures 52:59
Creating The Interface
11:09
Renderer Node Integration
05:11
IPC Communication
07:00
Implementing Imagemin & Plugins
13:24
Send Events To Renderer
03:29
Creating Log Files
05:09
Package & Test Our App
07:37
+ – Project 2 - SysTop App
4 lectures 22:35
Project Intro
Preview 03:15
Boilerplate Setup
03:51
Template Assets Setup
04:41
Creating The Interface
10:48
+ – System Stats & Renderer Process
5 lectures 40:25
Static System Stats
11:07
Interval/Dynamic System Stats
09:11
Progress Bar & CPU Overload
04:38
Notifications API
05:41
Notification Timing
09:48
+ – Storing Local Data
4 lectures 29:30
Creating a Store
10:01
Set Default Settings To Renderer
04:31
Saving Data To Our Store/File
09:25
Use Settings Data In Monitor
05:33
+ – Tray Icon & Wrap Up
6 lectures 29:47
Creating a Tray Icon
06:13
Tray Context Menu
05:26
Nav Toggle Menu Item
04:28
MainWindow Class
04:48
AppTray Class
05:43
Package & Test Our App
03:09
+ – Project 3 - BugLogger App & Creating The React UI
9 lectures 59:39
Project Intro
Preview 02:32
React-Electron Boilerplate Setup
10:18
Log State & Table
08:14
LogItem Component
08:59
Formatting Dates With Moment
03:28
AddLogItem Component
08:46
Adding a Log (UI Only)
06:13
Displaying Alerts
07:12
Deleting a Log (UI Only)
03:57
+ – Main Process, IPC & MongoDB
9 lectures 45:35
Setup MongoDB Atlas
04:18
Connect To Database With Mongoose
04:40
Create Log Model
04:07
Get Logs From Database
08:39
Add Log To Database
04:55
Delete Logs From Database
04:44
Clear Logs Menu Item
08:05
Package & Test Our App
04:41
Custom Icon
01:26
Requirements
  • JavaScript Fundamentals
Description

This is a hands on, project based course on learning how to build and package cross-platform desktop applications using Electron. Many popular apps including VSCode, Slack and Skype are built on Electron.

We will build 3 apps

ImageShrink - An app to optimize images for websites

SystTop - RealTime CPU monitor with notifications and system tray

BugLogger - CRUD app to track logs which uses React and the MongoDB Atlas cloud database


Some stuff you will learn:

  • Create app windows with BrowserWindow

  • Create menus with custom items

  • Menu roles

  • Shell module to open files and folders

  • Create system tray icons with context menus

  • App events

  • Main process & Renderer process

  • Communication between processes with IPCMain & IPCRenderer

  • Packaging Electron apps

  • Creating log files

  • Interact with system hardware

  • Create a data store file with settings data

  • Integrate React with Electron

  • Integrate a MongoDB database with Mongoose

  • Some JavaScript stuff that you may not have known

Who this course is for:
  • Developers that want to build desktop apps with web technologies
Featured review
Fabi
Fabi ( 16 courses, 3 reviews )
2 months ago
Very happy about the course. I have been getting into some new areas lately and I'm super happy every time I see that there is a Video/Udemy-course on that topic by Brad Traversy :) Keep up the good work!