How to BUILD a DESKTOP app with HTML, CSS & JavaScript using Electron JS!
HTML-код
- Опубликовано: 13 сен 2022
- 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!
ruclips.net/user/tylerpottsjoin
// MY GEAR FOR CODING AND RUclips
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 
Хобби
Incredible tutorial! I rarely comment on coding tutorials but this one worked perfectly and was quick and thorough. Thank you
Huge Help.
Awesome.
Thank you..
Wow just wow, was looking for it, Thanks my men, cheers
Glad I could help
@@TylerPotts Thanks mate,
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();
});
How do I pull up those effects slots on the left of the setuper?
hey bro can u recommend a advance css course , i already completed beginner course but that was not near to good look and funcanility
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)?
What plugins do you have in visual studio?
Cool, thank you!
No problem!
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.
Great suggestion! I'll look into making more advanced videos on it, including ones with a DB
Can I change the my app icon?
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
I have a problem.. this app can't read or write files with fs. how can I fix it?
help me please...
How to add a backroud immage? The html, css way doesnt work.
I have an error “electron. Not found”
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
You have to use `` not ''
What is the extension you use that suggests what to type next 😊
Emmet
Pog!! What's your thoughts on tauri ? Its coming up a lot now a days as an electron competitor
Nothing for us to worry about
Oh interesting! I haven't seen it yet!
@@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
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
hey sir i am too a programmer but not like you i make games but it was incredible challange for me
comnts on these kinds of videos and I know for a fact that guys like Nice tutorialm have gotten strikes from RUclips for having crack info in their
Exe is 148Mb ?
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
@@RodrigoDAgostino Ouch that is a lot, i search this now seems the files Electron produce are 50-250mb even for a hello world :)
@@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 :)
Helpline📲📥⬆️
Questions can come in⬆️
Good, but 150Mb...
Its official Javascript just killed C languages lol
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!
@@TylerPotts until we run it through pied piper lol
😂😂
Pretty annoying how fast you’re going without stopping to explain what you’re doing.
nah you’re just slow he explained everything very well