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

[@bugraotken]

I really love using Electron at my own projects and using it with react + vite + ts for a long time. But in this video I have seen that I got so many things I haven't used or seen or heard before. It was the best Electron tutorial I have ever seen on the internet so far. Thank you Niklas!

[@red_dog_]

i liked how he showed us the final app size so we already know where we're going and what we're building before we dive into the tutorial 😁👌👌

[@Avinashjoshi1003]

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

[@BennyTwinny]

Basically thank you for the video. basically covered good topics. basically, it will just get better from here. so basically, in the beginning I enjoyed the video but after a while it became a waiting game for basically.

[@kashishkavi8416]

Finally, exactly what I was waiting for

[@srineeshsalur524]

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

[@hamtaroyt]

Hey, would you know what I should do when I get an error with running the `dev:electron`? I am getting an error saying the script `transpile:electron` is not does not exist and if I was supposed to run the script with the exact same name. I am not sure how I can fix this as it doesn't seem to be running.

[@alexeyfilippov42]

@@hamtaroyt transpile:electron это кастомный скрипт. его надо написать руками в package.json

[@theomcmullien]

@@hamtaroyt I had an issue where it would say `Missing script: "transpile:electron;"`. A fix for this was to replace ; with && in the following line: "dev:electron": "npm run transpile:electron && cross-env NODE_ENV=development electron .",

[@KamasahDickson]

Thank you🎉. I thought electron js is another library i meeded to learn. I just became a desktop app developer just from the intro😂. Guys if you are a front-end dev you just need to learn how to config and co 21:25 mpile. I love react❤❤❤

[@wdw781]

salute for making this great course!

[@steelinyt5516]

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.

[@alexeyfilippov42]

это не очень продуктивно. полезнее самому изучать тему с помощью документации. начало видео уже оставляет миллион спорных моментов с тайпскриптом. посмотрел конечный код. организация кода показывает плохие практики

[@2teaspoon]

Think of these courses as you are a junior chef and the head chef first shows you the ingredients (electron js, vite etc) then the head chef uses them to create a base dish. These course aim to teach you the base dish for any topics. Then its always on you to introduce new ingredients and invent different variety of dishes. If you cant invent new things straight away you can refer other examples on the internet. You can then skip similar type of courses related to this topic on internet and focus on inventing new dishes. Good luck!

[@Avinashjoshi1003]

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

[@littlenightmareshahahahaha3093]

finally arrived, thank you so much

[@ravindusha]

Great tutorial. Thank you!

[@RiggsBoson]

Hum first, hum first! 🥇

[@xavierdupont5772]

On windows: dev.bat start cmd /C npm run dev:react start cmd /C npm run dev:electron On Linux, similar with your favorite terminal or screen. This keeps the I/O control on dev:react .

[@6r31v1nZ]

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

[@shis10]

Moast awaited video ♥️🔥🙌🏻

[@duxiao5121]

非常不错的教程

[@playinhertz]

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

[@GrimBit19]

no need to remember , just start building the projects and you will get hand practice for the concepts

[@alexeyfilippov42]

в электрон не надо использовать next js

[@playinhertz]

@@alexeyfilippov42 yes but I am learning to diversify myself but I keep forgetting the old stuff, that's the issue with me .

[@KamasahDickson]

​@@playinhertz learn one thing at a time. Do you forget your name? No because you have familiarized yourself with it. Don't rush learn one thing at a time

[@Rasty-nl7qn]

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

[@phat80]

I think the best way to build cross platform desktop apps is still QT and the easiest one is Pyside which is also QT.

[@sumitsingh-CANDY]

@@phat80 yea i think pyside is better

[@ravikrpranavam]

Thanks for this

[@cookingwithmycomrades8619]

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?

[@hashimanshad1041]

Thank you

[@Sean_T_Casual]

hey @NiklasZiermann first of all, thnx for the great course, but I run into an error. at 27:00 in the video when I try "npm run dist:win" I get the an error saying "missing script electron-builder", even though my electron-builder.json is spelled right and at the right place in the root folder.

[@Chaylak22]

Try running the command in administrator mode maybe this will fix your problem.

[@Sean_T_Casual]

@@Chaylak22 thnx for the recommendation. but that didn't work either

[@ashendeimos1039]

Just a sanity check, you did the npm install for the electron builder package yeah?

[@lookingforbino]

53:11, why we start writing common js all of sudden?

[@amaanshaikh4355]

dev to dev .. bro describing things like hot knife on butter

[@tootyrnt5533]

Let say I want to build an app for a raspberry pi, what flags would I use for the electron-builder commands?

[@MohammedAhmed-y7v]

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.

[@s-soumyakanta]

FreeCodeCamp - 100 lakh subscribers 🎉

[@kasper369]

Tauri next

[@red_boum]

Realistically No one is going to learn Rust to make desktop apps.. Tauri is dead they just don't know it yet.

[@rstuv-0]

@@red_boum Thats why I thinking about this. If they just juse go instead of rust it would be best

[@ban_droid]

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

[@markobi2602]

Nice tutorial, but I need help getting the icon to show on windows11

[@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?

[@areebhussainqureshi5400]

BRO DO NOT SHARE THE SEED PHRASE

[@rishiraj2548]

😎👍🏻

[@codykrist5625]

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

[@rstuv-0]

Do you expect js developers to learn rust just for desktop applications

[@codykrist5625]

@@rstuv-0 No, but you don't have to write rust to use Tauri. They have the JS APIs for a reason. You may need to install rust and you'll see rust files, but there's seldom a reason to write rust code unless you're trying to do something *Very* custom.

[@UnpopularOpinionGames]

For my Windows peeps! Don't forget to enable DEVELOPER MODE when running electron builder. Windows will not allow it otherwise.

[@UnpopularOpinionGames]

And If you're using the default windows terminal, don't forget to use '&&' instead of ';' when separating commands in the scripts. Like this: "dev:electron": "npm run transpile:electron && cross-env NODE_ENV=development electron .", Instead of this: "dev:electron": "npm run transpile:electron; cross-env NODE_ENV=development electron .",

[@AGAMA-w5r]

After closing the app started as .exe, in the Task Manager you can still see the process in background. How to fix it?

[@Imaginativeone_DF]

Is SQLite automatically included with Node now?

[@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?

[@NiklasZiermann]

The dev:electron script will not allow hot module reloading on its own. There's a section later on in the course where the "npm run dev" script is added that combines "npm run dev:electron" and "npm run dev:react" to enable hmr

[@RahulRaj-rs8zh]

can anyone help with how to deploy/distribute these kind of apps, react can be deployed. how to make sure the build changes and updates with the new one everytime I push new react update?

[@miguelcamguse]

Is there any in vanilla js? 😥

[@sivaprakas2830]

Hi , possible to invoke a exe from electron ????, I need to execute a dialer app from electron app

[@ashendeimos1039]

In Node, look into the child_process module. It can let you execute exe files

[@selvakumar.s9673]

WPF framework also good option?

[@sumitsingh-CANDY]

no go for pyside

[@yoskokleng3658]

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

[@Lilly_PK]

why does the code work. what kind of wizard are you?

[@sanjays7255]

Viewers before learning this, please consider tauri

[@code-thrills]

why?

[@rstuv-0]

You are expecting us to learn rust.

[@tootyrnt5533]

No

[@Gamer2Language]

I am considering learning tauri. Any tips/suggestions?

[@fraidoonhu9284]

In this video he is making the preparation for development a bit more complicated. It is not that difficult. Just install electron and begin developing your app.

[@Bright-Great]

Add how to upload images

[@nesa6582]

Super complicated setup process. 35minutes to setup!?!?!!??😅

[@teknolovedigital]

Tauri please..

[@jackymarcel4108]

Jackson Amy Robinson James Thompson Steven

[@fakedevdutt]

Damn third comment

[@salonsospain]

327

[@salonsospain]

33320

[@datadreamsit8514]

wow you talk fast. had to drop speed to 0.75

[@soner8780]

german pastes everything ugh

[@l4n1skyy]

npm create vite . doesnt work for me, i get this error failed to load config from /vite.config.js when running npm run dev edit: run npm i -D esbuild@0.24.0

[@just5559]

Use Tauri

[@ravalik2103]

Thank you