Build an Electron App in Under 60 Minutes

[Music] hey what's going on guys so a few months ago I created an intro to electron video and a lot of you guys liked it and I've gotten a lot of requests since then to do more with electron which is a technology to create desktop applications with JavaScript so what we're gonna do in this video is we're gonna we're gonna go a little bit further than we did in that intro video and create a shopping list desktop application which is cross-platform and I'm gonna show you how you can build it out to an actual desktop app as well okay whether you're on Windows Mac or Linux alright now we're not gonna have it saved to any kind of database or anything like that it's just going to be in the actual application itself so when you close the application the items will go away but we may create another video later on where we can use like some kind of local storage or a flat file or maybe some kind of database but we're gonna learn quite a bit in this video how to create menu items how to create keyboard shortcuts for your application how to publish it how to how to manage more than one window so there's gonna be quite a bit in this video okay and I'm gonna try to stick it all in one video so it should be about an hour or so so let's take a quick look at the application so we're going to be using something called electron packager which is gonna package it for either Windows or Mac or Linux and once you do that once you've run the package command you'll get this release builds folder and this will be the actual application you can see this there's an exe file here shopping list exe and we haven't even have a custom icon I'm gonna show you how to do that as well so if we open this up that's gonna open up the desktop application notice it has a menu here now we just have a file it's pretty simple we just have file we have add item clear items and quit and then we have the developer tools now we're gonna make it so that if you put it in production mode before publishing it the developer tools won't show because if you're gonna you know use this as an actual desktop application you probably don't want people toggling dev tools and stuff so I'll show you how to do that but basically we can click add item it'll open up a new window and we can enter something in here we'll say milk and that'll get added to the list and by the way you've probably noticed we're using materialized for our for our UI framework let's add something else will stay bread and then to remove them we can double click that will remove them or we can go and we can clear out all the items we're also gonna add keyboard shortcuts so you can see ctrl Q will quit we have ctrl R to reload and ctrl I to toggle the dev tools alright so I'll go ahead and quit so very simple application but like I said you guys are gonna learn a lot when it comes to creating the menu and all that stuff so hopefully you enjoy it and let's get started so if you guys really enjoy my content you feel like you really get something out of it consider becoming a patron to push me to keep bringing you high-quality educational videos showing your support with even $1.00 means the world we have different perks and tiers including a $2 tier that'll give you every udemy course that I release absolutely free to learn more check out patreon.com/crashcourse and i'm gonna go ahead and open it up in visual studio code and then i'm also going to open up open get bash up in that folder okay now obviously if you're using mac or linux you just use your terminal if you're using windows I would suggest using something like git bash but of course you can use your regular command line if you want now I'm not using the integrated terminal here because I want to have the I want to have all this room so you guys can see all the code since we're not using a browser I don't need to split the screen so I'm just going to keep the command line over here alright so first thing we're gonna do is run NPM in it because we need to create our package JSON file alright so it'll make this a little bigger so let's see package name projects oh I'm in the wrong folder hold on guys let me just see into shopping lists alright so I'm going to run NPM and knit and let's go through this version that's good description will say shopping list shopping list desktop app entry point I'm going to use main j/s for my entry point author put my name but of course you can put your own license I'm going to say MIT alright that looks good so now we have our package dot JSON file over here now we're gonna install electron let's clear this up so to do that we're gonna say npm install - - save electron and that's gonna save it as a dependency in our package JSON file alright and then the last thing I want to do in this file is I want to create a start script so I'm gonna replace this test we don't need that and then replace it would start and then we're gonna go ahead and just say electron dot alright because I just want to say NPM start instead of electron dot so we'll go ahead and save that and then that should be it for now so let's close that up and let's create our main dot JS file which is our main file so in here we're gonna bring in a couple things of course electrons so let's say Const electron and we'll set that to require electron all right we also want to bring in a couple core modules I'm going to bring in the URL module which is just a core nodejs module and then also the path module okay so next thing we want to do is we want to grab some stuff from electrons so we're gonna go Const and we're going to use a little bit of destructuring so we need some curly braces and we're gonna get the app object and we're gonna get the browser browser window object okay I'm going to pull that out of electron alright next thing we're going to do is create a variable to represent our main window basically we're gonna have two windows our main window which is with the one that's gonna list all the items and in the add window which will be the little one where we actually enter the item so let's work on the main window first now in electron what we have to do first is just listen I can't take today so listen for the app to be ready and we can do that by saying app dot on and then we're gonna pass in here ready alright so once the app is ready its gonna run a function and this is where we want to create our window so we're going to say create new window alright and it's gonna say main window that variable we just created we're gonna set to new browser window and then we're going to just pass in an empty object here because there's no there's no configuration options that we need right now for this alright so next thing we want to do is load the HTML file into the window okay we don't have our HTML file yet so let's create that so I'm gonna say new file and we'll call this main window dot HTML all right so we're just going to put some basic HTML tags I'm using Emmet so I just did exclamation tab and I'm just going to get rid of all the metadata here we don't need that we'll just we'll keep the title and in here we'll say shopping list okay and in the body I'm not gonna I'm not gonna deal with material eyes and the styling until the end okay we want to get all the functionality first so for now in the body I'm just gonna put an h1 and we're just gonna say shopping list and we'll save excuse me I'm losing my voice so that's all we'll do right now for that for the HTML so let's go back to main je s and we're going to take that main window that main window object and we're gonna call dot load URL and inside here we're gonna use the URL module and we're gonna call dot format okay and then in here we passed in some curly braces and this takes in a couple things so it's gonna take in path name so for path name basically we want to say the current directory slash main window dot HTML so we can just use the path module and call join okay so first we're gonna pass in double underscore dur name which is the current directory and then we want main window dot HTML okay I'm going to put a comma here and the next option is going to be the protocol which is going to be file colon and then we have one last option which is gonna be slashes and that's going to be set to true now if this if this piece of code right here confuses you basically what it's doing is it's just passing in file like this slashes and then whatever the the current directory so that comes from der name slash and then main window dot HTML it's basically passing that path into load URL okay it's just a fancy way of doing it so next thing we want to do is actually now we can try it out so let's save it and let's go over here and let's say npm start and there we go there's our window shopping list now since we haven't created any of our own menu items or anything that we have the default menu which just says file exit and as these edit options view which has the we can toggle the developer tools and some other stuff here reload the application window help so just just the default menu all right so we can go ahead and close out and notice that once we close this will actually stop as well all right so now that we have our main window at least coming up and we're able to run electron now let's work on the actual menu because we want to replace that with our own so when we create a menu we create what's called a menu template so we're gonna go down here we're gonna say create menu template and we're gonna create a variable called well I'm gonna call it main menu template but you can call it whatever you'd like and it's basically just an array okay when you create a menu in electron it's just an array of objects so the first object is gonna be the file okay so that's gonna take in a label and we're gonna set that to file all right now that's all I'm gonna do for now for the template I just want to test it out so we're gonna go back up here I want to make sure you're still in this function right here this app ready function alright and then we want to build the menu from the template alright so we'll say build menu from template and we do that by creating a variable I'm gonna call it main menu and I'm gonna set it equal to menu now right now it doesn't know what this is this menu this comes from electron so we actually have to bring in and up here so we're gonna put a comma and then just say menu and then that menu object has a method called build from template okay so then we just want to pass in here whatever our menu template in this case it's this main menu template so I'm just gonna pass that in there alright so next thing we need to do is just insert the menu and we can do that by taking that menu object and calling set application menu and then we're just gonna pass in main menu just like that alright so let's go ahead and save this and let's try running it with NPM install NPM start and now there it is there's our menu just has the file as nothing else but that's all we have in our template okay and you'll see that it just over writes the entire sample or whatever you want to call it boilerplate menu that's there by default all right so let's close that up and then we're gonna go down and we're gonna add some other stuff to our menu alright so for the file that's gonna have a sub menu and we're gonna have three things we're gonna have add item clear items and quit so let's go ahead and put a comma right here and we're gonna put in sub menu okay and that sub menu is also gonna be an array of objects okay so we're gonna have a label here and this is gonna be for add item okay let's see yeah well just do that we'll just add did the the actual labels and stuff and then we'll add the functionality after so let's say add item let's do another one we'll say label clear items and then we'll put another one and this one will be this one will be quit all right now quit is very simple so we're just gonna add that now so we're gonna put a comma and then click OK when you want to add a click event to any of these you just do click and then some curly braces and all we're gonna do here is say app quit because that that just cuts the whole application ok quits out of the application so we can do that now so let's save it and give it a shot so file now you can see we have our three items and if I go to quit it shuts it down now I also want to have a hotkey for quit I want to be able to do ctrl Q so what we can do is we can add an accelerator so if we go right here and we say accelerator and basically we're I'm just going to use a ternary operator here because we need to test to see what platform are on we need to see if we're on a Mac or something else because if we're on a Mac we need to use command and if we're on Linux or Windows we need to use control so what we can do is we can say process dot platform equals Darwin now Darwin is is going to be the value for this if you're on a Mac and let me just show you real quick if I go ahead and clear this out and I just say node that brings us into the into the JavaScript v8 engine and we can look at things like process which just has a bunch of stuff and platform is one of them so if we say process dot platform you'll see that I'm on win32 if you're on a Mac you're gonna see Darwin so this is what we're testing right here and you have access to all of this stuff from within your application so let's get out of that and what we're gonna do is say if we're on a Mac then we're going to use command command + upper case Q else then we're going to use ctrl + upper case Q alright we just need a comma right here alright so this is a ternary operator basically it's like an if statement we're saying if this is true then this else this represents else than this okay where else because we're not on a Mac so let's save it let's try it out say NPM start and let's do control Q and it closes it up good so that's how you can add shortcuts alright so now what I want to do is work on the add item okay so when we click add item what do we want to happen we want another window to open so let's go to this add item right here let's put a comma and we'll say when we click this add item we want to call a function called create add window okay so we're just going to call that function now this function doesn't exist we have to create it so let's go up here and we're going to go under the app on ready function which ends right here so you want to put it right here we're going to say it's a handle add window or handle create add window okay so we'll say function create add window and then basically we're just going to do the same thing we did here when we take we create a new window our new browser window and then we load the URL so let's add another variable right here we'll say let's add window this time and then what I'm gonna do is just copy all of this and then I'm gonna paste that right in the create add window and then we're gonna change main window to add window in both of these spots okay now this add window new browser window this is actually going to take in some options I want to set the width of the window to 200 and I want to set the height to 300 and then I'm also going to set the title to say add shopping list item all right and then down here we're not actually opening main window this time we're gonna open a file called add window dot HTML alright and then this stuff is all the same the protocol that slashes all right so that looks good so now what we want to do is save this and create our the other HTML file which is going to be called add window dot HTML alright so in here let's put some basic tags I'm gonna get rid of the meta stuff and for the title we'll just say add shopping list item and in the body here we're gonna put in a form okay we don't need an action and inside the form let's put a div and then inside the div we'll have a label alright the label doesn't need a four it's fine we'll say enter item sorry about that jetski noise guys let's see we'll have an input here and let's see it's going to be a text we're gonna give it an ID of item and let's also make it auto focus so that as soon as the window loads that act that input will be auto focused okay and then under the div we're gonna put a button okay let's give this button a type of submit and we'll just say add item all right so let's save it and now let's give it a shot so we'll go ahead and I'm gonna clear this out we'll say NPM start so we'll say file add item okay that doesn't look right I think I have the height and width backwards let's close that up let's say yeah I do so wit should be 300 height should be 200 there we go all right so obviously it's not gonna do anything yet we haven't hooked that up but it does open the window now one thing I want to mention is that if I go when I click the X for the the main window this one will stay open and we don't want that that doesn't make any sense what I want to happen is when we click the X for the main window we want the entire application to close ok so to do that is actually pretty easy we're just going to go to up here where we have the app dot on ready and we're going to go under the load URL which is right here and let's say quit quit app when closed so we'll say main window dot on closed ok when the main one windows closed we're going to call function and we're gonna say app dot quit all right so now if we go when we try if we open up our small window here and I go when I close the big window it just closes the entire application which is what we want and then one last thing I want to do to kind of optimize this is when we close the ad window then we want to we basically want to set that ad window variable to null because what will happen is it'll keep taking up that memory space so this is actually it relates to garbage collection so say garbage collection handle and what we can do to fix this is we can say add window dot on so add window dot on close or on our function and then we're just gonna set the ad window - no okay so that'll just optimize it a little bit for us all right now there's a couple other things that we need to be aware of now if you're on Windows like me you're probably not seeing a problem but I'm just gonna run this if you're on a Mac you're probably not seeing file right here you're probably seeing electron because by default it's gonna show electron not file and basically the way that we can fix that on a Mac is by adding an extra object up here like that just an empty object so that file is actually the second menu item now if we keep it like that and we run it on Windows now we're going to have an issue because we have this little space here and we don't want that so what we're gonna do is we're gonna put a we're gonna first of all just get rid of this and we're gonna put an if statement down here we're gonna check to see if we're on a Mac if we aren't a Mac then we're gonna push on an empty object up there just like I just showed you so to do that it's put a comment here we'll say if Mac had empty object - menu so we'll say if remember we can access it with process process dot platform if it equals Darwin then we want to take the main menu template and we just want to say dot unshifted pass in an empty object so if you don't know what unshifted it's an array method and it just adds on to the beginning of the array okay just like push would add on to the end so it's just adding it to the beginning just like I just showed you except it's doing it down here okay and it's doing it only if it's on a Mac so that takes care of that now for the rid of that for the development tools menu item I'm not going to just directly stick it in here because I only wanted to show if we're in productive or not in production so we're gonna go down here and we're going to say ad developer tools item if not in production and we can do that by saying if will say if process dot e NV dot node underscore and V is not equal not equal to production okay so if it's not equal to production then we're going to take our main menu template and we're going to push on to it okay we're going to push on another object okay so this object is going to have a label remember an object is just a menu item is just an object okay so the label will be developer tools and it's gonna have a submenu which will be an array and let's see inside the submenu we want our dev tools which is you know that the same dev tools that Chrome has so let's say label label will say toggle dev tools alright and then we'll have our click now the this time we're going to have to pass in here item and focused window now the reason for this is because we want the dev tools to show up on for instance if we're if we're focused on the little window the add item window we want the dev tools to pop up on that one if we're on the big main window we wanted to show up on that one so we need to pass this in and then we just need to call focused window dot toggle dev tools okay and that'll actually toggle the dev tools for us all right now I also want to add a shortcut for this so I'm going to copy this accelerator right here this line and we're gonna put that right here and let's see we want the the hotkey to be can command I on a Mac and control I on Windows or Linux alright so I also want to have a reload item so let's go let's see so we got our dev tools and let's so in this submenu I want to go under I want to go right here and put a comma and then put another object and then all we have to do to get the reload option is say roll reload like that okay and we'll save it and let's try it out okay so there's our dev tools let's say toggle dev tools and there we go and we can also reload the page and let's do control I that also toggles the dev tools good so that's all set close that up so now I think we're ready to start the functionality of actually adding an item to the list so we're gonna start off with the add window HTML that's where we're going to be working for a little bit basically we're gonna use some vanilla JavaScript to catch the item okay when someone puts in puts in some text we want to catch that item and we're going to be using something called IPC renderer which is going to be used to basically send an event with a payload from this file to our main j/s all right we want to send the item here and then we want to take that item and send it to the main window so that we can list it in the main window alright so what we're going to do is create some script tags down here all right and we're gonna bring in electron here so say Const electron equals require electron and then we want to pull out that IPC renderer object so I'm gonna say Const some curly braces don't forget the curly braces or it won't work renderer okay make sure you put render or not just render and we're going to set that to electron okay and now what we're going to do is we're going to catch that item so we're going to use a little bit of vanilla JavaScript we're actually going to be using quite a bit from what I went over in the Dom crash course which was the last the last series I did so we're gonna use document dot query selector and we want to select the form actually you know what I'm gonna do I'm gonna put this in a variable so let's say Const form and then we're gonna take that form and we're going to put it we're gonna add an event listener and we want to listen for a submit event alright so once there's a submit then we're gonna call a function called submit form okay so let's create that function look forgot to say submit form and that's gonna get passed in an event parameter now when we use a submit function or when we whenever we submit a form it's gonna automatically just try to submit to a file as it would normally so we need to stop that from happening so we need to take that event parameter our event object and call prevent default like that all right and just to test it out let's just say console dot log will just log one two three all right so let's go ahead and run our application and let's go to add item we'll go ahead and toggle the developer tools and we'll click add item and we get one two three all right so we know that that's working now we want to grab whatever is typed in the item ok whatever is put in that input so what we'll do is create a variable called item set it to document dot query selector okay and it has an ID of item so we're gonna grab that and we want the value so we need to do dot value all right and if you don't understand this stuff I would HIGHLY highly suggest watching the Dom crash course that I just did because we go over all this stuff all right now this IPC render this is what we're going to use to basically send the item to main j/s alright so we're gonna say IPC renderer dot send and then we're gonna give this an ID okay so we'll say add well actually we'll do item : add and then we're gonna send the payload of the item okay so this works kind of like socket IO if you have any experience with that when you're sending it from the client to the server you're just kind of giving it a name and then you're sending the data along with it and then we're gonna catch it on the main j/s side so let's go ahead and save this and then we'll go to main J s and now to catch this we need to bring in something called IPC main so up here where we're doing our destructuring we're going to in IPC mein okay and let's see where we're gonna put this let's go under the create ad window so right here right above the menu template and we'll say catch catch item ad alright so we'll say IPC main dot on and then we want whatever we gave that name which is item ad alright so on that when that happens then we want to call a function and this function gets passed in an event and an event and the item all right or whatever we sent and then what we want to do is send it to the main window okay it's coming from the ad window but now we want to send it to the main window so we'll say main window and we can say dot web contents dot send okay and then we're gonna again name this we're gonna say item add and we're gonna send the item all right and then we just want to close the ad window so ad window dot close like that alright and just a test just to make sure that it's coming from the ad window to the right here let's go ahead and we'll do a console dot log and log the item all right so now we'll clear this out and whoops stop it first okay so we'll run it and PM start now if it gets sent correctly then when I type when I put something in here and add it it should log over here so we'll put something in and add and there it is alright good so it's getting logged here and then we're sending it to the main window so then we have to catch it in the main window so let's go over there and we're gonna go ahead and add our script tags here as well okay and we're going to bring an electron okay and again we're going to bring an IPC render up that needs to be in curly braces all right now I'm also going to add a ul up here because what we're doing is we're taking the items and we're going to put them into a list item in this UL okay but we're doing it dynamically through JavaScript so let's create a variable for that ul so we'll set it to document dot query selector and we want to select the UL all right so now what we want to do is we want to catch that we want to catch this right here okay main window send item ad and we're sending the item so we want to catch that using IPC render so let's say IPC renderer dot on item ad and then we have a function and that function is going to take in E and the item okay so we're now getting the item being sent from from the main j/s alright so what do we want to do with this item we want to add it as an Li into this ul so we're gonna have to do a little Dom manipulation here so we're going to create a variable called Li and I'm going to set it to document dot create element and we want to create a list item all right now this is just a blank list item we want to add a text node to it with the item that's being sent so let's say Const item text and we'll set it to document dot create text node and the text we want inside the ally is going to be the item ok the item that's being sent then what we want to do is we want to append the text the item text to that li so we'll say Li dot append child and we want to append the item text all right so hopefully you understand that we're creating the Li and then we're put we're creating the text node and then we're adding the text node to the Li and then the next thing we want to do is add the Li to the UL so ul dot append child Li all right hopefully that makes sense and like I said if you don't get this go ahead and watch that Dom crash course so let's actually test this out now so we'll say add item we'll put some in here click and there we go so we can now add items to our shopping list awesome so let's see what do we want to do next let's do let's do the clear items so clear items if we go to main J s that's actually a menu item right so we need to add a click for that and then what we're gonna do is we're going to send we're gonna take the main window and we're gonna say dot web contents dot send and we're gonna send an event called item clear okay now we don't have to send anything with it like we don't have to say like that because we're just clearing it we're not actually sending data so we're just letting it know we want to clear it so let's save that let's go back to main window and let's catch that so just like we did I PC render on item add we want to do item clear so I'm gonna copy that let's put some comments in here say catch add item I'm sure we'll just say add item and then here we'll say Claire items alright so instead of item add we're going to do item clear and there was nothing sent so we don't need these and we're gonna get rid of everything in here and then all we want to do is clear that ul so we can just say you l dot innerhtml equals nothing and that's it so let's save let's go ahead and give it a shot so add item ok so we'll say file clear items and now everything's cleared so that's all set now I want to take care of the individual deletes I want to be able to double click and have them delete so for that we don't have to send anything back and forth we can do that strictly with vanilla JavaScript so let's go down here and let's say remove items or remove item so we're going to take that UL and we're going to add an event listener okay we're gonna listen for a double click so dbl click and then we're going to run a function called remove item alright we're going to create that right here function remove item and all we have to do here is say we're gonna pass in the event and we're gonna say e dot target dot remove okay so basically what this is doing is it's saying anything any li inside the UL that we click we're going to just remove from the Dom okay I'll remove from our application so let's save let's go back and we can actually just reload we'll add an item double-click and it goes away alright so our core functionality is now done ok it just looks like crap so now we're gonna start to style this so let's go ahead and open up let's go to materialise CSS and we're gonna grab gonna go to getting started and grab the CDN for the the CSS copy it and we're gonna put this in the head of both windows so main window and add window alright and if we go when we reload we should see a difference right away ok so now we're gonna change some of the markup add some classes and so on so let's go to our main window first and I'm going to replace this h1 here so instead of just an h1 we're gonna have a nav so let's say nav and let's see inside here we're gonna have a div and it's gonna have a class of nav wrapper and don't worry this isn't going to be long so nav wrapper and then we're just gonna have an a tag with the class of brand - logo and also a class of center just like that no link and then here we'll just say shopping list alright let's save it let's go to our app and reload and there we go alright so let's the next thing I want to do is style the UL and the Li is because if we add an item here and you'll see look the form has already changed too but we want this to look like a collection so a collection right here so we wanted to look like this so the UL needs a class of collection and the Allies need a class of collection item in order to look like this so what I could do is I could just go to the UL right here and I could say class equals collection but if I do that and if I reload you'll see there's this line now because it's showing the collection even even though there's no items in it so it's just like this blank this line and I don't want that so what I want to do is I don't want this class applied until there's actually an item added so I'm going to remove it here and then we're going to go down to where it's actually added which is in here add item and we're gonna we're gonna dynamically add the class by just saying ul dot class name equals collection all right so now if we reload that lines gone but if I add an item it's still it had now has that collection class now the list items also have to have that what was it collection item they have to have that class that's why this looks funny so what we're gonna do is go right under where we created the Li and say Li dot class name equals collection item okay so that'll add that class so now if we reload okay so now it looks good all right so notice that when we remove everything that line is still there because that that collection class is still on that UL so what we're gonna do is clear that out so if we go down to remove item we're gonna basically say if there's if there's no L eyes left then clear out that collection class name so that we don't have this line here so we're going to say if and we can say u l dot children okay because the Allies are the U ELLs children right so we're going to say ul children dot length if it's equal to zero so if there's no allies then set the UL class name to nothing and then we want to do the same thing when we clear the items this class name nothing so right here we'll put that in as well alright and this may not be a big deal to you to have this line here I just I just don't like it so now if we go ahead and we add stuff and we clear no line if we add and we double click and remove no line alright so we are getting there next thing I want to do is the form okay so this right here I want to add a container around it so it's not right up against the edge and then I want to style the button so let's go to add window dot HTML we're going to wrap the form in a div with a class of container okay so that'll push it into the middle more and then for the button let's see for the button we're gonna add a class of BTN let's also add a waves effect class and let's add waves - light look sorry about that guys alright so let's take a look now we'll save we'll reload and let's go to add item and now that looks pretty good so we'll say milk good so I think our application is pretty much done last thing I want to do before we package it up is change the environment to production so that we don't have the dev tools option and to do that I mean there's a lot of different ways you can set to set that I'm just going to put a line just one line at the top here setting it so we'll go right here and let's see we're just gonna say it's a set environment process dot e NV dot node underscore a and V and we'll set it equal to production okay and if that's set to production and we run our application there's no dev tools okay it's just the file and that's what we want when we actually publish it so now let's get into publishing it so to do this just pull this up there is another module we have to install called electron packager and this is a really good tutorial this is Christian Engvall dot SC slash electron packager tutorial I'll put the link in the description but it basically tells us we have to install electron package R and then it gives us each command to publish for each platform this is for Mac this is for Windows this is for Linux but down here he actually puts it all into scripts for us and in the NPM file so if we just say npm run package Mac it'll package for a Mac and so on so that's what we're gonna do so let's first install this so we're going to go over here will clear this out and we'll say NPM install - - save - dev electron - packager and that'll get added to the package JSON file as a dev dependency alright and then what we're going to do is we're going to go back to that blog post and I'm just going to copy inside the scripts object I'm going to grab all three of these and copy and we're gonna put this right under our start script so we'll put a comma and then we'll paste those in alright and then I'm gonna change right here under package when it says product name electron tutorial app I'm going to change this to shopping list okay now this also points to some icons or icon locations so we have assets slash icon slash win we also have a Mac folder and then a PNG folder so what I'm gonna do here is I'm gonna change the name of the PNG to icon dot PNG and I think that should be all set for for this file so let's save it and then we're gonna create these icon fault folders and I'm gonna add an icon now the icon that I used I'm actually gonna put a link in the description did I close it I keep closing it oh no it's right here so it's this icon archive it's a free icon but basically there's the ice ICO version the icns version and the PNG version so we want all of these so let's go ahead and open up our folder for our and we're gonna create a folder called assets okay and inside assets we're gonna have a folder called icons is it icons let me check yeah assets icons and then we want a separate folder for when mac and PNG inside here so let's say new folder when new folder mac new folder PNG alright and then what we'll do is we're going to download the ICO I'm gonna save it as icon dot ICO and I'm gonna put it inside assets icons win ok the wind folder gets the ICO ok then I'm going to download the icns and I'm going to rename it to icon dot I see what is it I see NS and we're gonna save that one to the Mac folder okay and then we'll download the PNG so I'll just say save image and we'll save it as icon dot PNG and we're gonna save that one to the PNG folder obviously alright now we have our icons if you want to use a different icon that's absolutely fine but I think everything should be all set now so I think we should go on we could we should try to build now since I'm on Windows I'm gonna be running npm run package win so let's go over here and let's say npm run package - win okay it's gonna go through some crap okay so now what it did is it created a folder called release build so let's go navigate to that so release builds and I have this shopping list win32 we have a folder with a bunch of dll's but down here you'll see there's a shopping list Exe file with our icon we can open that up and that's our application okay we're not running npm start we're not running any anything at all it this is a pure desktop application just like if you were to open atom or vs code okay so let's try and add an item make sure everything works alright so we can add stuff let's double click we can remove let's clear items that works good so everything works I'm going to ctrl Q and it works now if I were to do ctrl I it's not going to open the dev tools because remember that's only available if we're in the for not in production mode and we just published this in production mode okay because of that one line that we have right here if you change this to development then you'll be able to use the dev tools alright so sorry I'm losing my voice guys if you can notice but I think that's it so hopefully you enjoyed this tutorial hopefully it shed some light on how electron works how you can create menu items and in multiple windows and I encourage you guys to try and build your own desktop applications alright so thanks for watching and I will see you next time

Channel: Traversy Media

Views: 825,572

Rating: 4.9361401 out of 5

Keywords: electron, electron.js, electronjs, electron js, javascript, desktop apps, js desktop app

Id: kN1Czs0m1SU

Length: 55min 34sec (3334 seconds)

Published: Thu Sep 14 2017