How to BUILD a DESKTOP app with HTML, CSS & JavaScript using Electron JS!

Подписаться 57 тыс.

Просмотров 47 тыс.

50% 1

Learn how to code a Desktop App with HTML, CSS & JavaScript using Electron! We build a simple note taking app using the file system!
Source code: github.com/TylerPottsDev/elec...
Documentation: www.electronjs.org/docs/latest
Electron Packager: github.com/electron/electron-...
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
ru-vid.comjoin
// MY GEAR FOR CODING AND RU-vid
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

Хобби

Опубликовано:

13 сен 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 43

@imiramikhanirami3624 6 месяцев назад

Incredible tutorial! I rarely comment on coding tutorials but this one worked perfectly and was quick and thorough. Thank you

@sweatypotato248 Год назад

Wow just wow, was looking for it, Thanks my men, cheers

@TylerPotts Год назад

Glad I could help

@sweatypotato248 Год назад

@@TylerPotts Thanks mate,

@MyName-cb1yl 5 дней назад

Love your content. Keep it up .

@jamesdavis3818 11 месяцев назад

Hi everyone I know this is an older video however I poked around for a while and learned a more efficient way of closing the program. currently the way it is on here is that it is still open and running in the background. here is the main.js code - hopefully this helps someone:) const {app, BrowserWindow} = require('electron'); let win = null; function createWindow () { const win = new BrowserWindow({ "title": "Title", "fullscreen": true, "closable": false }); win.setMenu(null) win.loadFile('src/YourHtmlHere.html'); win.on("close", () => { win = null; app.quit(); }); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if(process.platform !== "darwin") app.quit(); });

@dubyIndustries 3 месяца назад

Huge Help. Awesome. Thank you..

@arafatgeneralservices2688 Год назад

How do I pull up those effects slots on the left of the setuper?

@avtar2565 Год назад

hey bro can u recommend a advance css course , i already completed beginner course but that was not near to good look and funcanility

@sorena.shirzad 5 месяцев назад

Thank u for your good training. If we use Jason Server in our program, Is there a way to run Jason's file when we click on .exe file and start pr (without using cmd)?

@sculp_vetrov 6 месяцев назад

What plugins do you have in visual studio?

@dimitmoto1716 Год назад

Cool, thank you!

@TylerPotts Год назад

No problem!

@anykgd Год назад

Can I change the my app icon?

@ejaadhulab8924 Год назад

Your tutorials are great. After reading this lesson, I thought it was a great intriguing subject. Would you please create a lesson on Electron and basic DB? (SQLITE or LocalStorage or IndexDB). God bless you abundantly for your kind donation and assistance to developers like myself.

@TylerPotts Год назад

Great suggestion! I'll look into making more advanced videos on it, including ones with a DB

@kumuthuprabhasha2392 11 месяцев назад

I have a problem.. this app can't read or write files with fs. how can I fix it? help me please...

@audiobookimedyczne 2 месяца назад

How to add a backroud immage? The html, css way doesnt work.

@Coding-and-Panini-Kido Месяц назад

I have an error “electron. Not found”

@sudheerpa6171 2 месяца назад

What I do now is take dealerships of software companies and sell their billing software. I made my own software under my company name and want to sell it, what should I do? I have no clear knowledge of software programming and development. Is it enough to be fully developed by a software developer? Or is it enough to buy the software code and build the software with a developer? Which is better

@vampirejs758 Год назад

Pog!! What's your thoughts on tauri ? Its coming up a lot now a days as an electron competitor

@sweatypotato248 Год назад

Nothing for us to worry about

@TylerPotts Год назад

Oh interesting! I haven't seen it yet!

@vampirejs758 Год назад

@@sweatypotato248 ye, coz finally 95% of the users don't care at all abt how these apps are built, all they want is a good app, but tauri seems a good alternative

@sweatypotato248 Год назад

It is but from developer perspective its different, A developer will built an app with electron because he knows react or angular but as tauri you can build it but need to learn rust so its a no go, Tauri is a great app but only people who know rust will use it else a website is build so soon wanna launch an Desktop app guess what you already build it use electron but for tauri its different

@devindissanayaka8116 4 месяца назад

What is the extension you use that suggests what to type next 😊

@johannesjohnson4696 2 месяца назад

Emmet

@maximeyarns 5 месяцев назад

I have no idea why I'm doing the stuffs, but I'm fairly confident I can now make a simple app based on this all 😂 Thanks!! One issue though, the note title says ${data.title} instead of the actual title, I can't seem to figure out why. Any ideas? Edit: I added the following: const fileName = data.title + '.txt'; And changed: const filePath = path.join(__dirname, 'notes', '$data.title}.text'); to: const filePath = path.join(__dirname, 'notes', fileName); Probably super nooby, but it works

@Duluper 5 месяцев назад

You have to use `` not ''

@saturdaywithaadil 3 месяца назад

hey sir i am too a programmer but not like you i make games but it was incredible challange for me

@techonlyforyou126 Год назад

comnts on these kinds of videos and I know for a fact that guys like Nice tutorialm have gotten strikes from RU-vid for having crack info in their

@Horrordelic Год назад

Exe is 148Mb ?

@RodrigoDAgostino Год назад

By default Electron will include Chromium inside of your app to run it on it, so no matter how simple your app is, it will be huge xP

@Horrordelic Год назад

@@RodrigoDAgostino Ouch that is a lot, i search this now seems the files Electron produce are 50-250mb even for a hello world :)

@RodrigoDAgostino Год назад

@@Horrordelic yeah, exactly! I way around that that I found was to use the locally installed Chrome to run the app while preventing Electron to pack Chromium inside my app. The problem with that is that, if the user has installed Chome in a different directory than the default one, the app won’t run. It is indeed safer to just pack Chromium inside. But there are different alternatives to Electron you could try, like NW.js and Tauru. Those will provide much smaller executables :)

@user-md5lz2xq5i Год назад

Helpline📲📥⬆️ Questions can come in⬆️

@Jose-cf8ps Месяц назад

Good, but 150Mb...

@TheyCallMeFelix Год назад

Its official Javascript just killed C languages lol

@TylerPotts Год назад

Well, if they can sort the file size issue then maybe but currently any file created with Electron will be packaged with 150mb of Chromium which isn't ideal for small apps! - So C is still a winner for performance and size!

@TheyCallMeFelix Год назад

@@TylerPotts until we run it through pied piper lol

@TylerPotts Год назад

😂😂