Electron Tutorial - Build a custom text editor app
Ғылым және технология
In this video we are going to build a desktop application with Electron. My focus was creating the app for macOS, but with few adjustments it can be easily adapted for windows or linux.
Git repo: github.com/codepanion/simple-...
You are going to learn:
- how to create a custom title bar,
- how to make a communication between renderer and main process with ipcRenderer and ipcMain modules,
- how to secure your app with Content Security Policy meta tag,
- how to use dialogs and file system to create, open and update the content of textual files,
- how to use notification module,
- how to create a custom menu bar,
- how to open recent documents,
- how to build the installable files,
- how to use electron-reloader,
- how to use electron-builder,
- and probably something more :)
Timestamps:
0:00 - Intro
1:08 - Initializing the project with npm
1:42 - creating a BrowserWindow with html page
3:32 - adding electron-reloader
4:47 - set dev tools opened by default
5:19 - html and css (with custom title bar)
15:12 - adding the renderer.js
18:15 - creating a file
28:25 - openning a file
35:07 - updating a file's content
38:21 - adding a notification for error cases
40:30 - creating a custom menu
44:03 - recent documents
48:11 - adding electron-builder and env variable
Пікірлер: 14
This was an extremely educative tutorial. I learned so much. Thank you for doing this!
Very awesome tutorial! I like how it also teaches how to find information.
@codepanion
2 жыл бұрын
Glad it was helpful!
Thanks for this one mate, much aprecciated
REALLY REALLY USEFUL. THANKS
Nice Tutorial for Beginners 🙂 i'm an Electron user/builder for several years and was looking for a sample / simple beginners tutorial for a friend of mine. So maybe i can trigger / motivate him to start using Electron. Thanks for this video, i'm not patient enough to make this kind of video's.
really good, keep going
its kinda funny how you made n Electron Text editor in an Electron IDE
Thank you very much. Very nice tutorial. Appreciate it so much. I subscribed to your channel by the way.
@codepanion
2 жыл бұрын
Awesome, thank you!
thank you for this!
Thank you for this awesome video! Is there any way to add syntax highlighting? I am not sure how to add different colors.
thanks UwU
I don't know if it's outdated but I typed the exact code and halfway, when you started the part about opening a file (35:00), I started getting this error that said module not found: path, and referencing renderer.js. So I downloaded your repo, did npm install and etc., and your repo doesn't work either but no errors are console logged.