Creating Desktop Apps using React and Electron | Tutorial

hey guys today we're gonna be checking out how to set up electron with react so as you can see i've already paired a little app right here that we're gonna turn into a desktop app and as you can see it's quite simple we just have two buttons one of which currently just displays state and increase it by one if you press it and the other one sends a value as you can see the react code is really simple for that and the thing we're going to change is we're going to turn this into an electron app so that it can more or less natively run on our desktop and we're going to change this to actually communicate with the electron app to make sure that everything is working as intended so to get started we're of course going to need our terminal and we're of course going to stop this server that's running right now and we're going to hit npm install electron dash d this will install electron as a def dependency because yeah we're not going to need it um forever but it can't hurt to at least have it right now normally you'd use some build tool to create your electron app meaning that you normally don't need it in your real dependencies if you want to you can just remove the d and everything will be fine alright now that we've done that we can head to our package.json file by the way this is a create react app app you might get into some trouble when trying to do this with a weed but you can try you might get some issues with like image handling and stuff but good luck to you so now we can add a script called electron and that electron script is just going to execute electron dot and if we run this then our electron app would start but right now we don't have an electron app that's because we need to define a file a js file that contains the logic of our electron app in this case this will be the index.js in the root directory and not in the source directory that's important so now before we move on in this file we're actually going to head back to the package.json and add that index.js inside of our package.json as a main file so that's basically just gonna say okay this is a main index.js file so if you wanted to run this you would normally run index.js and not any other javascript file and another thing we need to do is to actually define the home page to allow electron to import all the stuff from the right directories now we can basically just start by running npm run build because we will need an index.html file to render inside of our electron app and that index.html file will basically be the result of our build step from our react app so as you can see here is our index.html file which basically will contain our whole react code when you host this so now we can finally head to our index.js file and get started working on this so first of all we're going to say const electron equals require electron we're going to use the require syntax instead of the import syntax here because yeah electron prefers that we're even going to use it in the react app later on but yeah you're going to see why that is soon so now that we've got electron we're going to start by defining a variable that will hold our window we're not going to inte import anything in that variable right now we're just going to place it here so that we can globally use it basically so now we can basically start getting some stuff out of our electron object so const we're going to start with the app which equals electron so this is basically the same syntax as using import from but in two lines so now we can say app dot on so basically you could imagine the app as being the actual electron program and it's basically a singleton so you can use it right away and now we're gonna look for the ready state so basically when the app starts then do the following and that following will be defining our main window because we can only define it if the program is already running if not then electron can't really create a window yet right so that equals new browser window as you can see it's tries to import it using require electron that's another way you could do this so basically like that which would work better with autocomplete so if you want to do that syntax then that's fine as well so now you could add some options in here which we will actually do to basically allow electron to um add some node.js specialties inside of the browser so the thing we're going to do here is say web preferences and here we're going to say node integration is true and context isolation is false this will basically be used to allow us to use the required keyword to require some stuff from an electron inside of our react app or if you weren't using react but just html it would basically add the required keyword to default javascript so now there's just one thing left to do which is doing main window dot load url so load url and there are multiple ways of doing this yeah you could do this directly like c colon slash etc or you could do something like i'm going to do which is going to be app dot get app path which will basically give you the current directory this is cross platform compatible which is quite nice um the next step unfortunately isn't as cross-platform because we're gonna use need to use the windows syntax here because in some cases it can cause problems not to use it if you aren't using windows then yeah just go with slashes and everything will be fine so now we need to define where index.html file is as you saw it's in our build directory and then directly there so it's going to be build index.html if you're wondering why i need to do two backslashes it's so that this formatted string doesn't think that i want to get like a special eye here i don't know if you can see the highlighting so yeah we basically escape our slash to become a normal slash and not like a special character or whatever and yeah this should basically already be enough to see our app rendered so let's try it npm run electro and now a window should open that displays the app i showed you before so we can increase this we can hit send value and using those things up here we can actually get into the dev tools and check it out and as you can see the send value bit still logs everything to the console just as we'd expected to so now there's just one more thing missing which is actually communicating between the react app and the electron app and to do that we are gonna hit to our react part right here and we're gonna need to do one more thing which is gonna be okay const ipc renderer equals window dot require because the require element will be attached to the window so we don't need to import it in any way and here we're of course just going to need to require electron and from there we can just say ipc renderer or we could of course also do this if we wanted to i'm gonna go with the other option though because normally you don't need to import many things anyway so we're just gonna do it like that and now we've got the ipc renderer from electron inside of our front end using a required keyword this is quite strange in my opinion but it works so i'm not going to doubt it to be honest so now we can replace this console log thing here with ipc renderer.send so basically what this ipc runway does is it allows us to communicate over a tunnel between the actual app so the main process and the rendering process so our react and it does this using a protocol where you basically send a key to know what your message is about and the value you want your message to have so in our case we're just going to call this number and the number we're going to send is our value and now inside of our other app right here we can also get something which is ipc main so the communication protocol for the main part of your program and here we can add a listener so ipc main.on then we define our key which was a number and an error function which will contain the event that was thrown by sending this message and the value that was set we are only caring for the value but you could also do some really fancy stuff with the event if you wanted to and to make things easy we're just going to say okay i want to console log that value now we just need to build our react app again because we changed the source code and we need to get it into the build directory and after that we can start our electron app and we should hopefully see that our values from the front end will be rendered inside or will be locked inside of our terminal right here so i'm gonna go to three hit send value and as you can see everything is working just fine we locked our little three right here and yeah that's basically how you would use electron with react you can of course do much more fancy stuff in here but yeah i think this should be plenty to get started after this point it's basically just developing either the react app or the electron app and just hitting builds sometimes right so i hope you can use this to your advantage i've already used electron for some of my projects and really enjoyed using it with react and yeah i hope you'll do too and also i hope you have a good day

Channel: Niklas Ziermann

Views: 9,786

Keywords: Coding, Programming, HTML, CSS, JS, Tutorial, How to, JavaScript, html5, css3, js, code, coding tutorials, programming, html tutorial, css tutorial, js tutorial, React, react tutorial, niklas ziermann

Id: A4H2DVkNgPs

Length: 10min 51sec (651 seconds)

Published: Mon Jul 18 2022