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

Тәжірибелік нұсқаулар және стиль

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!
kzread.infojoin
// MY GEAR FOR CODING AND KZread
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

Пікірлер: 45

  • @imiramikhanirami3624
    @imiramikhanirami36248 ай бұрын

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

  • @user-ox6yh6mp6g
    @user-ox6yh6mp6g6 күн бұрын

    This easy and accurate explanation of the lecture It's amazing what I can see in my room in Korea! Thank you for your easy and concise explanation! It will be very helpful for studying

  • @dubyIndustries
    @dubyIndustries5 ай бұрын

    Huge Help. Awesome. Thank you..

  • @sweatypotato248
    @sweatypotato248 Жыл бұрын

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

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Glad I could help

  • @sweatypotato248

    @sweatypotato248

    Жыл бұрын

    @@TylerPotts Thanks mate,

  • @MyName-cb1yl
    @MyName-cb1yl2 ай бұрын

    Love your content. Keep it up .

  • @dimitmoto1716
    @dimitmoto1716 Жыл бұрын

    Cool, thank you!

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    No problem!

  • @IngridKen
    @IngridKenАй бұрын

    if your wondering about his vscode theme i think it's the SynthWave 84'

  • @jamesdavis3818
    @jamesdavis3818 Жыл бұрын

    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(); });

  • @arafatgeneralservices2688
    @arafatgeneralservices2688 Жыл бұрын

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

  • @ejaadhulab8924
    @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

    @TylerPotts

    Жыл бұрын

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

  • @sorentoino
    @sorentoino7 ай бұрын

    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)?

  • @avtar2565
    @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

  • @anykgd
    @anykgd Жыл бұрын

    Can I change the my app icon?

  • @sculp_vetrov
    @sculp_vetrov8 ай бұрын

    What plugins do you have in visual studio?

  • @kumuthuprabhasha2392
    @kumuthuprabhasha2392 Жыл бұрын

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

  • @audiobookimedyczne
    @audiobookimedyczne4 ай бұрын

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

  • @Panini-Kido
    @Panini-Kido3 ай бұрын

    I have an error “electron. Not found”

  • @saturdaywithaadil
    @saturdaywithaadil5 ай бұрын

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

  • @maximeyarns
    @maximeyarns7 ай бұрын

    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

    @Duluper

    7 ай бұрын

    You have to use `` not ''

  • @vampirejs758
    @vampirejs758 Жыл бұрын

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

  • @sweatypotato248

    @sweatypotato248

    Жыл бұрын

    Nothing for us to worry about

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    Oh interesting! I haven't seen it yet!

  • @vampirejs758

    @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

    @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
    @devindissanayaka81166 ай бұрын

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

  • @johannesjohnson4696

    @johannesjohnson4696

    4 ай бұрын

    Emmet

  • @sudheerpa6171
    @sudheerpa61714 ай бұрын

    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

  • @techonlyforyou126
    @techonlyforyou126 Жыл бұрын

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

  • @Horrordelic
    @Horrordelic Жыл бұрын

    Exe is 148Mb ?

  • @RodrigoDAgostino

    @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

    @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

    @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

    @user-md5lz2xq5i

    Жыл бұрын

    Helpline📲📥⬆️ Questions can come in⬆️

  • @Jose-cf8ps
    @Jose-cf8ps3 ай бұрын

    Good, but 150Mb...

  • @TheyCallMeFelix
    @TheyCallMeFelix Жыл бұрын

    Its official Javascript just killed C languages lol

  • @TylerPotts

    @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

    @TheyCallMeFelix

    Жыл бұрын

    @@TylerPotts until we run it through pied piper lol

  • @TylerPotts

    @TylerPotts

    Жыл бұрын

    😂😂

  • @AAAAAA-n9f
    @AAAAAA-n9f7 ай бұрын

    Pretty annoying how fast you’re going without stopping to explain what you’re doing.

  • @timehash

    @timehash

    4 ай бұрын

    nah you’re just slow he explained everything very well

Келесі