How to create a basic Electron app with Vite and React

Welcome Back YouTube we are creating another video for you guys on electron bite um so in this video we'll be going over setting up electron bite I'm kind of talking about the differences between electron Vite and using electron with webpack um as well as just kind of like What electron really is um if you've never used it before um so we're going to start by talking more or less about What electron is for those people that haven't used it so electron allows you to build modular websites uh or modular desktop applications um using the electron framework so all these like super nice looking applications you see like vs code here right here this uses electron this is built upon the electron framework which is a free open source framework for anyone to use um there's tons of apps that use it like slack is built upon electron it's a very very good framework um so basically how electron works as a back end with node.js that allows for like file system access and stuff like that and then you have a render side which runs purely on HTML and JavaScript um there is intermediaries there like middleware that uh is called IPC which allows you to communicate from the front end to the back end um through IPC communication so what we're going to go ahead and start by doing is we're going to init this package so if we run npm create electron techvite right this will create our electron bike thing and we have three options here so we can choose view react or vanilla I'm a react developer so I'm going to choose react I'm going to hit enter uh what we're going to do now is we're going to CD into electron the Vite which I'm just going to do elec with a star um just to type as much um and then we're going to go ahead and run the command npmi this will download all of our node modules it'll populate our package lock file based on everything that we are going to add in a couple of different ones here too um so what we're going to start with we're going to do npmi by Tech tsconfig deck pads all right so now we have that so what we want to do is we want to go to viteconfig and so we have all these plugins here uh what we're gonna do is we're going to import um byte or TS config paths equals are from um by PS content paths and then right here after react we are going to do TS conflict paths as our plugin and we are going to run that we're going to put this in here and then we'll end up running the application um so what I love about Vite is you can do npm run Dev that way you know perfect you're running in a Dev environment for one and it looks like everything is loading this time so yeah so once you run that you're greeted with this window if you're familiar with webpack you can already determine that this is I mean marginally faster um there was hardly any bundling time um and then all this is streamed to a server so only way you update is actually sent back to you and updated um which in my opinion is really good takes a lot less load um now there probably won't be much difference between the development environments of fight to webpack but for development um it is much faster which is typically what you end up noticing more because when you develop you're constantly reloading the app uh restarting the app depending on what you're doing uh and in my opinion this is just much faster um so we're gonna go ahead and close this window uh now that we've got TS config paths set up we have a source directory which is basically where all of our um stuff is set up which is where all of our react stuff is going to go um so we have some Vite stuff we want to leave that there we have a main TSX which we use the react on client to create the root and then we render the uh root element and this is our app file this is where everything we saw there was working so what I like to do uh when creating react things is I like to create some folders in here I like to do like components you know and then uh we can drag say like app in there uh then if we go to main we should be able to get already automatically updated it that's fine inside of app we are going to want to do T dot slash app.s CSS um we should probably do npm ad uh less or Tech DLS so we can support the less uh pre-processor clear the console now we can support less files instead of scss files because I don't really code with scss at all um so we'll be using less uh yeah so now our project is completely set up for components scss if you or less and scss if you'd like to use either of those we can go ahead and create a data folder here and I like to create something inside of here for interfaces I like to create another folder for objects which are like enums classes and stuff like that that are not components um we can probably create a utilities folder and yeah we can leave samples probably I don't see why we just takes care of Ip stuff it looks like okay um so yeah now we have the utilities data and components right so our components again this is strictly just components react components this is what will go here you can do functional or class components that's fine um we can talk more about those in a different video and what different components do and creating different components um as well as just react in general there will be a video up on that soon so let's go ahead and go to our TS config so we have some paths here which it looks like at is a base directory so let's create another one and let's just do this component start and components will have all of them we'll just do s or dot slash Sr SRP slash components and we include all of those let's do one called interfaces and we don't do the star here because in our interfaces we're going to have an index so what we'll do is we'll do dot slash SRC slash um data interfaces um we do that and then we do dot slash SRC slash data slash interfaces and all uh we can do objects we can do one for those oh this one will star out because I don't like to do index files for those um data objects and there we go then we can do one for utilities or C slash YouTube um and then if you wanted to you could create your own folder for Styles as well I normally end up doing that in a lot of my projects uh so yeah this takes care of our TS config paths now we have different paths that we can reference these things from um which makes things a lot easier and makes it look way cleaner um so if I were to use this say in main I would just do import app from and then I would just do components slash app like that and I would uh VR components class so then if I were to do npm run Dev all right components path not class um we should have the app uh notice VG okay so we just have to resolve a thing from the app here opponents because it just didn't uh that does there we go um like I said if I do that um so this is what I currently see is this electron byte window um so yeah if we were to make say a change um let's say we changed this guy to using like uh 2 or 20 yeah we'll start it out at 2. um then we go up to here now our accounts two and we can see just how fast that renders in um so let's do this uh open this up go and throw that there throw that there um let's change this guy to 20 we hit Ctrl s and we see how fast it loads now normally if you're using webpack it would rebundle the entire render um if you're using a react hot loader um it would completely rebundle whereas Vite doesn't do that it just sends you the file based on what was saved and what was edited so when your server requests um through Vite the resource it takes a look to see what bios are edited and only sends back those sources in the Dom there's other one other thing you have the electron you have the electron environment which is just extra typescript stuff then you have a preload which has an index which is where most of your uh event listeners are going to go for IPC like your IPC handlers then you have the main file which is where your windows created so we should be able to add a tag here for best web preferences um full screen then we can do true so what will happen or I think maximize is what we want right there is maximized that we'll do full screen uh and then if we do npm run Dev you should see that take effect and our application should full screen yep so our application immediately launches full screen um and yeah that's how you would change stuff like that so if we wanted to hit f11 we could make it go out of full screen then there's I know there's another one that's like is maximized um that you can do we can change our title to this is a byte application uh and then we can just do empty armor and Dev any time you make changes in electron you have to restart um the application because the main process code is compiled differently whereas your renderer code is compiled completely within byte obviously um so now we have a full screen window application just by doing some electron changes but anything um to do with electron IPC uh you can do in here um and add all that code there for yourself so it also gives you kind of like a directory structure on how things are supposed to be layered but you have dist electron here with the main which is the index.js which is basically that file compiled into one and then you have the map and then we have the preload which is the preload file compiled down to JS and then we have that which is the map for the resources okay um so that's going to do it for this video let me know in the comments below what you guys think um what I can do to better these videos for you and I will see you guys in the next video

Channel: Ehren Grenlund

Views: 41,937

Keywords:

Id: ONpVol7B7AY

Length: 12min 57sec (777 seconds)

Published: Sat Jan 28 2023