Electron Build Desktop Apps HTML/CSS/JS - Getting Started 01

hey guys and welcome to the series of electron so to the in this series we're gonna explain electron briefly and we're gonna get so the story we're gonna get started into electron just set up the environment use and we're gonna talk about electron and why you need to use it nowadays excruciatingly 2018 for your career so if you go to us just to the website looks on touch dais you're gonna find this cool library from github if you're familiar of github or e if you feel you know github actually so electron is a framework that allows you to create desktop applications using the technology web technologies like that simple this is like the main functionality of electron I know there's a lot of other things but this is like the main purpose of why electron exists anyway so github develops actually electron for its code editor and it's became nowadays a framework but it was generally just some kind of an idea to create a desktop application using the web technologies like HTML CSS and JavaScript so if you love web development and you want to create this top application in your might really like want to kill a boss like platform specific things and all the kind of things you can just use electron and you can just create that using javascript use any framework like reacts anything you like and put all of it together in one application and discover applications and really nice thing about it is it's creatives actually cross-platform so it just creates one of your application and deployment on every major platform like Linux Mac OS X and of course windows so let's just jump right into that like as you can see this different main website or the official website Lagrange's top org you can also find electron awesome doc.com I believe yep it's the same thing so this is that the the main website you get you've got just gonna find like this is an open source cross pass for me you can make it using web technologies and all the features in a demo application in here if you run and we'll check that and obviously the quick starts guy so he just clone is using gets make sure to hop get me and you just started and you start playing with it to know more about us so that was all of it and you can just check out the application built with electrons really nice things and a lot of application I've been with electron you know so anyone but just now we need to create our application so the github repository here I really really recommend you to or recommend you check this one like the QuickStart guide just gets using your gifts clone that's install it and stop manipulating it stop playing with it around you're gonna understand a lot a lot of things I'm also the documentation is very very useful is if you go to the docks you're gonna find a lot of things so we're gonna use that we're gonna use Visual Studio code for the environment setup so if not familiar with you still code if you use any killers here you like but I have a video tutorial specifically for Visual Studio code 20 it's not to mention actually but I've made it like a couple weeks ago but you can check this video for the extensions my set up and wire really choose we used to do rather than not any other code editor so you can just watch that when the child why not so let's start with widgets the code even get from the official website of course I have and I have a new folder in here and let me just go ahead and create files in here so first things very clear its distribution folder and then you fold or not file okay so a distribution folder and another folder is gonna be the SRC not inside it so outside that so sorry let me just do that create another folder and what as our C so this associate gonna hold all the Java scripts or our like source files and here the distribution like the public folder if you're familiar with or you are web developer of course you are you going to use electrons so this is very obvious and the SRC and this is gonna be pretty much it so clean new file is I'm gonna mean it's the package topic JSON sis we're gonna use node.js because you can't you can't just create or use electron without know Jesus it's just it's not gonna work so you must use no genius because it's like a module if joins modular of a lot of no J's so what's already said you mean electron I know it doesn't really matter why I can't talk that much but let's let me do that so they were gonna call this let me just create this really quickly I'm gonna call it electron rush and I'm gonna give it the mean flow so mean is going to be jeaious and I'm gonna create that in a second so another thing is gonna have dependencies and let me just pick that so this is like just initializing the repository if you are not familiar with nodejs make sure to watch or learn about new ideas first then come over back here into this tutorial so you can also use the command line like NPM annette's but I really like doing it that way not just completing the form thing but yeah now that was it for the setup I will add another thing here is the scripts but we're gonna talk about the script in a second after doing all these kind of things now for this everything is set up in here let me just create or not under the as I'll say because this is gonna be like our main file so like the main handler of the electron I'm gonna name it you mean yes and here you couldn't put surrender or changes or something so millimeters renderer is so like this is the main main process and the other one is the renderer process so we need like to separate both of that and distribution further I'm just gonna call it index.html so like this is the window or page that we're gonna see so you can call in to our page because for the window we're gonna just lay your an HTML file to display it on the window and you can use CSS for styling your things all these kind of things as I've said web technology is only the scope of education so yeah with that in mind you can do it as run days using later on if if you're not lucky if you have never heard about my lecture before so as I've said now let's just all electron has I've said it's a module from no Diaz using a p.m. make sure to like is installed on your computer and NPM install and they're gonna solve electron and make sure to save that as dependency and this is gonna just Fitch NPM and install everything and and I'm using the terminal integrated terminal Visual Studio code so make sure to have that as well anyway so let me just wait for this and actually for the main J's file it has like a code for that for like displaying and manipulating the window grabbing is then open a browser window using chromium for displaying the windows of this kind of things and then Leo the process all these kind of things like it's just gender thing so you're gonna find it on the quick start guide as I've said here if you go to the levy the one in here you're gonna find everything that we're going to use in in this specific thing so like if you go to the mint is there's gonna be the standard one code so we're just gonna call PS you know I'm gonna like make everything because it's gonna pretty much in the same year like starting the process starting the window initializing everything from the electron and like that basic things you need to setup using H on order to get window running up and quickly so I mean just copy basis of said you're gonna find or if you go to the official website you are going to find this one like the depository of the QuickStart guide also I'm gonna put in the description below so just go below the video you're gonna find that or in my website you gotta find both ways anyway so copy pasting in that under the main top Jas and electron is set up incorrectly all the thing I wanna mention is we need an asset manager show if you want CSS or using SAS or precompiled CSS you can go ahead and install level mix our local mix is going also web packing in installing web pack then the little man so let me just install web pack if you're on a web pack is a dependency manager for JavaScript so and CSS and stuff like that so let's type actually so and saw web back toss - save death we needed just for development processor when deploying this is not gonna get with you into the server so the production is not gonna be deployed the webpack thing and the other thing we're gonna need is little mix and little mix make your assets easier like manage your assets even more easier so if you think that web that manage your dependency manager little mix is gonna like me make your life even even more easier than web pack so we're going to use that for compiling or pre compiling the CSS assets and JavaScript and using all the ugly odors if you want to use react yet he had a lot of other things but you're just gonna use that now after web pack has been installed successfully make sure off to run NPM and saw level - max - max and save them I'm gonna also just need for development process now Thermomix has been installed successfully I'm gonna use that for as I've said recompiling the assets and actually for the packet ejection you need to add that into the script so we need to add like they have NPM run development development for compiling the sass or our assets using webpack and levo mix and also the watch so just copy paste then all of those like in here you're gonna find them on my website like for the detailed tutorial so make sure to see that in there just copy/paste them or you can just put them from that and the most important thing is the stars one the star script so this one gonna allow us to start the electron application so put just start electron than a dot so which means just start the using the electron in each approach or starts this specific application so just this is gonna start up the application on over the spirit log but it's gonna happen for you but just you know and after making all of these kind of things go to the index dot HTML or whatever you name it in here and just create an HTML page a regular HTML page you just created that and put it a lot of churn up age and we're gonna talk about the render ojs in in the next episode and make sure two Porter's have said the media's in here everything should be now sorted correctly just now MPM run stance make sure to put the startup scripts intervene pocket of Jason and from here we should see electron-electron and we should see our application here and it's called electron touch-up and yeah it looks just funny verifying everything you can just resize it minimize that maximises you can just get out of this and you know what's the toolbar in here everything everything you can max or you can I mean you can customize this you can do everything that you can do with an Disco publication or with using a web technologies and on a desktop application that would be very very nice so I guess this pretty much it for that episode I'm gonna talk more about this application a trot or electron in the next ones I'm gonna try to like Allah explain the API what you can do with it and which technologies that you should use the most with that to make it more performance friendly in and a little bit more prettier than just a normal web application before this end more visible for disqualification so this is pretty much it guys thank you for watching and hope you will enjoy this I will talk to you in the next episode