Electron From Scratch: Build Desktop Apps With JavaScript

5h 48m 24s
English
Paid

Course description

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 57 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course

All Course Lessons (57)

#Lesson TitleDurationAccess
1
Welcome To The Course Demo
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

Unlock unlimited learning

Get instant access to all 56 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

MongoDB Fundamentals

MongoDB Fundamentals

Sources: Andreas Kretz
Document-oriented databases are rapidly gaining popularity among NoSQL solutions. Working with JSON documents in MongoDB is convenient, flexible, and...
1 hour 23 minutes 19 seconds
Eve: Building RESTful APIs with MongoDB and Flask

Eve: Building RESTful APIs with MongoDB and Flask

Sources: Talkpython
Eve is an open source Python REST API framework designed for human beings. It allows you to effortlessly build and deploy highly customizable, fully featured RE
5 hours 6 minutes 34 seconds
Complete Ansible Bootcamp: Go from zero to hero in Ansible

Complete Ansible Bootcamp: Go from zero to hero in Ansible

Sources: udemy
Whether you have never learn about Ansible, or want to learn about the advanced features of Ansible, this course is for you! Whether you want to get theories of Ansible only, o...
3 hours 37 minutes 45 seconds
MERN Stack Front To Back: Full Stack React, Redux & Node.js.

MERN Stack Front To Back: Full Stack React, Redux & Node.js.

Sources: udemy, Brad Traversy
Welcome to "MERN Stack Front To Back". In this course we will build an in depth full stack social network application using Node.js, Express, React, Redux and MongoDB along with...
11 hours 52 minutes 29 seconds
Node with React: Fullstack Web Development

Node with React: Fullstack Web Development

Sources: udemy, Stephen Grider
Go beyond the basics of React and Redux! This course will teach you to combine the ultra-popular React, Redux, Express, and MongoDB technologies to build a fullstack web applic...
25 hours 36 minutes 19 seconds