Electron Course - Code Desktop Applications (inc. React and Typescript) – YouTube Dictation Transcript & Vocabulary

1.welcome to this comprehensive course on building robust desktop applications using electron react and typescript throughout this course you'll learn everything from setting up your development environment to implementing Advanced features like data visualization secure communication and custom window frames all while ensuring a seamless user experience Nicholas Zimmerman developed this course hey there I'm Nicholas siman I'm a full-time software engineer from Germany and I absolutely love web development which is why I'm so excited that there stuff like electron that allows me to combine my web Def and my Nots skills into One Singular crossplatform app that will run on Windows Mac and Linux and we're going to build an app like this right here today which is going to be a resource manager inspired by the Windows Task Manager performance tab so basically some pretty graphs about your CPU RAM and storage usage but before we'll do that let's take a look at how electron actually works and why you might want to use it all right so what actually is electron well as I already mentioned it's a tool to build crossplatform desktop apps with JavaScript HTML and CSS or alternatively something like react to replace these three things and some popular apps that already use electron are for example Discord or Visual Studio code which you probably already know that it exists all right so how does electron actually do all of this well let's try to visualize an electron so this big blue box is going to be our app and we of course going to need to have some way to open up a window so electron calls these things browser windows so actually a window of an bundled browser that can display our HTML CSS and JavaScript and electron creates this window because it actually bundles a whole version of chromium so basically every time you download discorde vs code or whatever electron app you will actually download a whole chroman browser that electron controls under the hood to display and hide windows and interact with them so basically what this browser window does is just one window of a Chromium browser that you downloaded with your electron app but of course rendering isn't enough we also want some information about the system like for example how much RAM we using and the way we can do that is using the main electron process and this main process is basically just a nodejs app so you can imagine that when you start your electron app this main process will boot up and it will do some of the tasks that it's designed to do the main task of course in the beginning is creating Windows slash interacting with electron so basically interacting with the electron Life Time opening Windows reacting to Windows being closed closing windows itself whatever you need to do all of this can be done and you can even create multiple windows so you could also have like three of these if you needed in our case we just need one but it is possible then again electron can of course do much more for example it can interact with system apis so system apis could be something like the system tray to create icons like the ones you see up here on the right on mecos or down on the bottom right in the taskbar of Windows systems and the most important part for our use case it is of course just a node app so it can use node modules so basically most of the things hosted on npm and of course the buil-in node stuff as well so the fs module the OS module or even something like Express if you wanted your electron app to also host the web server for whatever reason or whatever in our case we're going to use some helper libraries to get more information about our system like the memory usage for example but most of this could also be used using node standard libraries but what's important right here is these are separate processes so you can imagine that there's basically a thin line between the two that separates them from each other so this guy can't use code from this guy and vice versa so how can I actually get data from and to the electron app using the browser window well there's actually one thing in between these two or multiple things but mainly one thing and this is the IPC event bus which is basically a third really really tiny process that allows both the main process and the window processes to publish events under a certain name with some data and then listen to these events to basically get some data back so you could imagine that maybe the window Publishers hey I want to delete object number 42 and then the main process tells every window hey entty 42 was deleted please update your UI so that it isn't displayed anymore stuff like that and this is inherently how these two different processes can communicate with each other and now that we understand how electron does all of this let's now get into what technologies we're actually going to be using to first of all develop our app and then actually turn it into an exe because electron actually can't turn stuff into exe dmgs msis app images whatever you need an extra tool for that so let's try to visualize our text tag so down on the bottom both for the front end and for the back end we're going to be using typescript then we'll separate the back end and the front end into two separate Stacks basically so right here we've of course got Elon and on the other side we've got react now the question is how are we actually going to turn all of this into a fully fletched electron app well first of all we need to bundle our react app to actually have HTML files in the end and for that we're going to be using V which is just a bundler that allows us to really easily and effectively create HTML out of our react that is fast and small which is really helpful for our use case and then we have of course also need to bundle basically all of this into a finished electron app and for that we actually going to use electron Builder which is one of many tools that can be used to basically convert your normally node.js electron app into a fully fledged exe app image whatever you need for your specific system needs so you could create an installer you could create an a portable app whatever your users want to use and this is what electron Builder does so basically we can write our electron and react app in typescript we can take the react app turn it into HTML using V embed that into electron and then build all of that using electron Builder to in the end have a runnable project and honestly don't worry if you don't understand all of this yet our next step will be building this little Foundation right here that will basically set up our react app build it into HTML embed it into our electron process and then building this electron process into an app that can run on your system so an exe a DMG or an app image depending on what system you're using and once we've built this all of this should be a lot clearer and of course you can just jump back after building this to this part of the course if you still don't understand everything and want to try to understand it better using your new knowledge that you've gained by developing the actual thing and after we've developed this Foundation we will of course get into actually developing the stuff we need for the resource manager and also doing some developer experience improvements but before before we start I would like to add one little disclaimer right here which is that your operating system will most likely show you one of these warnings when you try to open the build app we're going to create now which basically tells you that the app wasn't created by a trusted developer and that is the case because for the operating to actually trust you as the developer you would need to add a code signing certificate to your app and this is something you would need to purchase your app will still open just fine when the user just clicks yeah I trust this app I accept this and many production especially open source ones actually do that but I just wanted to mention this because I don't want to add anything into this course that you need to pay for so we will not go into code signing certificates because those can only be obtained with money which is something that I just don't want to add into this course because depending on how you get it and what operating system you're targeting the process would differ anyways so just look up the process that you need for your users if you want this warning to disappear and yeah if you just don't care then that's even better then you can just follow this course and everything will be just fine and now that we're in our IDE we can actually start by creating our UI first so let's run npm create V Dot in an empty directory so the dot just says I want to create our V project right in the directory I'm currently in and then we'll choose react because we of course want the react project in typescript and now we just npm install this shouldn't take up much time so let's just talk over it real quick as you can see the files were already created right here and now we've got our note mod modules and we can hit npm run def to actually start our project now if we just control click onto this link right here we can see here is our re and react project but we might want to optimize this a bit because right now everything is directly in the source directory but of course we'll also have some electron code which will also live in the source directory so let's try to split this up a bit by creating a UI folder in here and basically moving everything that's currently in the first directory into that UI folder now just doing this will of course not work yet because V needs to know where our code is now so let's just head into the index.html which is basically the entry point for V to know where all your files are and here we can see we've got a script tag that references Source main

2.TSX and of course this needs to be Source /i/ main

3.TSX now and now if you just hit npm run def again we should be able to see see that everything is still working just fine but of course we've also got this public folder right here which we don't really need right now either because we're not going to have a FV icon or whatever if we basically embed our app inside of a desktop app so let's just get rid of this thing right now by removing it and also heading into the app

4.TSX right now because it also references it removing this a inside of this and now if we just look into a w again we should be able to see that our VAP is still fully functional even though we of course removed the FV icon and this icon right here now let's also change some stuff about the build because if I just run mpm run build right now we should be able to see that it creates a this directory that contains all of our output so basically the finished HTML and JavaScript this is good in some ways but for our use case it isn't as good because electron Builder will also create a this directory so these will conflict which we don't really want so let's just change the V config a bit more by saying build and our build will have an out deer so basically where do I want to put my finished output and this will just be this- react just so we know where our code is and now let's just quickly remove the current disc directory run npm run build again and now we should be able to see that this react is created and it's still contains all of this normal code right here of course right now it's actually tracked by git which you don't really want so let's also head into the git ignore and add this react into the ignored folders just so you never commit it because that wouldn't really make sense and to now combine this UI with our electron app we of course need to first of all install electron so let's just run mpm install D- save def electron we can actually install electron as a def dependency because it isn't needed in the final bundle of our app so the exe or whatever it is only needed to build it so even though we will be importing stuff from electron it isn't actually required to install it as a normal dependency a dep dependency is plenty and do also make sure that you set type module in your package Jason this should be set automatically by V but sometimes it isn't for specific V versions so just make sure that it is set because otherwise we can't use es module syntax instead of our electron code which we will need to do and now let's actually get into configuring our electron app so let's create a new folder inside of our source directory called electron and in here we'll add a new file called main.js we will turn this into typescript later on but for now JavaScript is easier and here we can just import from electron and we'll need two things first of all the app and the browser window and here what we can do is basically interact with the app so as soon as we import it electron will do all of its magic to basically create an app that we can interact with and here we can say app.on SO waiting for an event on the app and we'll say once the app is ready we want to run this Arrow function and then here we can say okay the app is ready now let's create a window and that window will be our main window and it is a new browser window this browser window can be configured in many many ways so we can set stuff like withd or whatever all of this isn't required for now we'll get into it later so for now we'll just add an empty config object in here and leave it at that and then we can just say main window

5.load file and the file that we are going to load is of course our index.html file inside of the dist react directory so you can imagine that people will have this project in different directories on their computer because once you distribute it you can't be sure that it's under whatever directory your code is under it definitely won't be so people could have it under program files on Windows or applications on a Mac or maybe even in the downloads folder if you distribute it using an exe with nothing else so you need some way to know where your project is currently running from and the app object actually gives you a helper for that which is called app.get app path and now we of course just need to append slist react SL index.html to this and everything is fine right well not actually because these slashes only work on Mac and Linux while Windows requires back/ sport paths but we don't need to do this ourselves because node actually includes a nice module called path so you don't need to install this because it's already included in the standard Library set and what it can do is do all of this magic for you so you can just run pa