Electron Course - Code Desktop Applications (inc. React and Typescript)

Learn how to use Electron, React, and TypeScript to build desktop applications. Throughout this course, you'll learn everything from setting up your development environment to implementing advanced features like data visualization, secure communication, and custom window frames, all while ensuring a seamless user experience.

Course developed by @NiklasZiermann

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro & How electron works
⌨️ (0:08:31) Setting up React
⌨️ (0:11:45) Setting up Electron
⌨️ (0:17:41) Adding TypeScript
⌨️ (0:22:47) Configuring Electron-Builder
⌨️ (0:29:07) DX Improvements
⌨️ (0:35:16) Reading System Resources
⌨️ (0:46:25) Communicating with the UI
⌨️ (1:09:34) Making IPC Typesafe
⌨️ (1:32:10) Event Validation
⌨️ (1:39:55) Unsubscribing from Events
⌨️ (1:43:55) Data Visualisation
⌨️ (2:00:24) Securing the App
⌨️ (2:06:53) Creating Tray Elements
⌨️ (2:14:40) Hiding to the Tray
⌨️ (2:27:31) Customising the Menu Bar
⌨️ (2:35:01) Enable View Switching
⌨️ (2:40:02) Custom Window Frames
⌨️ (2:51:00) Testing Theory
⌨️ (2:53:26) E2E Tests
⌨️ (3:06:27) Unit Tests
⌨️ (3:19:19) Finalising the UI
⌨️ (3:33:03) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual

--

[NiklasZiermann]

Thanks to the FreeCodeCamp team for giving me the opportunity to post another course to this channel!
I hope it'll be helpful to many of you :)
If any of you run into technical issues with following along feel free to post an issue to the GitHub-Repo in the courses video description or leave a reply to this comment.

[steelinyt]

To me, no matter how many courses I take there's no end to learning.
It seems that there's a lot of new things being uploaded than what I can learn.
Thanks FCC.

[Avinashjoshi]

Thanks, FreeCodeCamp Team, that I want from long back. ❤

[Avinashjoshi]

Thanks, FreeCodeCamp Team, that I want from long back.

[kashishkavi]

Finally, exactly what I was waiting for

[rvnZ]

love this stuff. Would love it more if it included the code for Windows users.

[srineeshsalur]

For anyone facing issues in DX improvements section 31:29 for me with setting up dev section after the setup run the command: npm install --save-dev cross-env and then run npm run transpile:electron

[Rasty-nlqn]

Is electron the best way to build cross platform desktop apps??
What about Wails, Tauri, and other alternatives?
Best in terms of customizations not simplicity

[sanjays]

Viewers before learning this, please consider tauri

[playinhertz]

How to keep remembered all the stuff of, next, react, electron dsa etc etc.. i always keep forgetting. Please help

[ban_droid]

there's jetpack compose already, why y'all never made tutorial on it?

[ManfredoCowell]

I really appreciate your efforts! Just a quick off-topic question: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?

[codykrist]

In 2024, using Tauri is significantly superior to electron while providing a similar learning curve.

Electron bundles a browser, which means that browser will need to be updated regularly to keep up with web security. It also has implications on bloat and (as shown by discord and slack) can be difficult to keep up to date with

Tauri uses web view, which means when you update your OS your app updates with it. This does mean that as web standards change, your app will need to be updated to keep up with the changes in most cases, but you’ll also have direct access to system resources which should provide a superior, more native feel. Tauri also has mobile support in their 2.0 release

Tauri -> better performance, more secure, more cross platform, may have to write rust for more complicated applications
Electron -> more stable, bloated, slower, desktop platforms only, 100% JS/ts

Love electron, was my first framework when developing desktop apps, but the bloat and slowdowns were detrimental later in my career

[MohammedAhmed-yv]

I ran into an error when running "npm run transplite:electron". I had to install typescript globally using
npm i -g typescript
That fixed the error.

[cookingwithmycomrades]

For creating the dist package, what do we do if we're building this project within WSL? Running npm run dist:win doesn't work, but npm run dist:linux does. But how I can open the project within my Windows computer like you did on your Mac at 28:00?

[jsimmonstx]

Hot reload stopped working form me after I changed the base path in vite.config.js, and ran "npm run build". if I use "npm run dev:electron", the app loads/displays as expected, but hot reload does NOT work, if i use "npm dev:react", hot reload works fine. What am I doing wrong?

[Imaginativeone_DF]

Is SQLite automatically included with Node now?

[yoskokleng]

please help find someone can share like this video but with vue js or nuxt js. it is so rare in youtube video :))).

[jackymarcel]

Jackson Amy Robinson James Thompson Steven