Electron From Scratch: Build Desktop Apps With JavaScript

5h 48m 24s
English
Paid
Create 3 useful desktop applications with web technologies using Electron. 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.
Read more about the course

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

Requirements:
  • JavaScript Fundamentals
Who this course is for:
  • Developers that want to build desktop apps with web technologies

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

Watch Online Electron From Scratch: Build Desktop Apps With JavaScript

Join premium to watch
Go to premium
# Title Duration
1 Welcome To The Course 04:19
2 Electron: What & Why? 04:35
3 How Electron Works 03:12
4 Environment & Code Repo 05:16
5 Project Intro 03:19
6 Setup & BrowserWindow 06:19
7 Loading a Window File & Adding an Icon 07:09
8 Environment & Platform Check 07:22
9 Using Nodemon With Electron 03:15
10 Creating a Menu Template 07:22
11 Menu & Global Shortcuts 05:01
12 Menu Roles 04:53
13 Open Window From Menu 05:08
14 Creating The Interface 11:10
15 Renderer Node Integration 05:12
16 IPC Communication 07:01
17 Implementing Imagemin & Plugins 13:25
18 Send Events To Renderer 03:30
19 Creating Log Files 05:10
20 Package & Test Our App 07:38
21 Project Intro 03:16
22 Boilerplate Setup 03:52
23 Template Assets Setup 04:42
24 Creating The Interface 10:49
25 Static System Stats 11:08
26 Interval/Dynamic System Stats 09:12
27 Progress Bar & CPU Overload 04:39
28 Notifications API 05:42
29 Notification Timing 09:49
30 Creating a Store 10:02
31 Set Default Settings To Renderer 04:32
32 Saving Data To Our Store/File 09:26
33 Use Settings Data In Monitor 05:34
34 Creating a Tray Icon 06:14
35 Tray Context Menu 05:27
36 Nav Toggle Menu Item 04:29
37 MainWindow Class 04:49
38 AppTray Class 05:44
39 Package & Test Our App 03:10
40 Project Intro 02:33
41 React-Electron Boilerplate Setup 10:19
42 Log State & Table 08:15
43 LogItem Component 09:00
44 Formatting Dates With Moment 03:29
45 AddLogItem Component 08:47
46 Adding a Log (UI Only) 06:14
47 Displaying Alerts 07:13
48 Deleting a Log (UI Only) 03:58
49 Setup MongoDB Atlas 04:19
50 Connect To Database With Mongoose 04:41
51 Create Log Model 04:08
52 Get Logs From Database 08:40
53 Add Log To Database 04:56
54 Delete Logs From Database 04:45
55 Clear Logs Menu Item 08:06
56 Package & Test Our App 04:42
57 Custom Icon 01:27

Similar courses to Electron From Scratch: Build Desktop Apps With JavaScript

Node.js, Express, MongoDB & More The Complete Bootcamp 2024

Node.js, Express, MongoDB & More The Complete Bootcamp 2024udemy

Category: Node.js, MongoDB
Duration 42 hours 15 minutes 4 seconds
Django 2.1 & Python | The Ultimate Web Development Bootcamp

Django 2.1 & Python | The Ultimate Web Development Bootcampudemy

Category: Python, MongoDB
Duration 9 hours 52 minutes 1 second
The Complete 2023 Web Development Bootcamp

The Complete 2023 Web Development Bootcampudemy

Category: MongoDB, Other (Backend), Other (Frontend)
Duration 62 hours 32 minutes 23 seconds
MongoDB

MongoDBamigoscode (Nelson Djalo)

Category: MongoDB
Duration 3 hours 3 minutes 57 seconds
Web Development with Google’s Go (golang) Programming Language

Web Development with Google’s Go (golang) Programming Languagegreatercommons.com

Category: Golang (Google Go), MongoDB
Duration 18 hours 59 minutes 31 seconds
Advanced Projects in Electron 4, React, and Redux

Advanced Projects in Electron 4, React, and Reduxudemy

Category: Electron, Redux
Duration 3 hours 1 minute 11 seconds
The React practice course, learn by building projects.

The React practice course, learn by building projects.udemy

Category: React.js, MongoDB
Duration 43 hours 45 minutes 48 seconds
MERN Stack - React Node from Scratch Building Social Network

MERN Stack - React Node from Scratch Building Social Networkudemy

Category: React.js, Node.js, MongoDB
Duration 20 hours 49 minutes 20 seconds
Desktop apps with Angular, Firestore and Electron

Desktop apps with Angular, Firestore and Electronudemy

Category: Angular, Electron, Firebase
Duration 11 hours 28 minutes 39 seconds