Mastering PyCharm Transcripts
Chapter: Client-side web apps
Lecture: Electron JS demo

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:01 Over here on the electronjs.org page, go down a little bit,
0:04 it'll show us a little quick start thing that we can do.
0:08 We can go clone this thing and then go in there
0:10 and we just install and run.
0:14 Let's go over to PyCharm first and create a place to do that.
0:19 I'll have this electron_test or something like that,
0:29 so we copy this path, it will be really easy to get there, like so.
0:34 Now, what it says we need to do is we need to clone the repo
0:39 so that's going to download the various bits of HTML, so we don't have to type it,
0:45 we'll go into the little quick start which is here
0:49 and we'll see that we have an index and a main.
0:51 The last thing we have to do is
0:53 install the various Node modules to make this work
0:57 so we can come over here and run this,
0:59 give it a second— and off it goes and runs.
1:04 So this is not a super advanced little thing right here,
1:07 but you can see that we do have a native Mac application
1:13 and there's stuff going on here,
1:15 so let's get out of there, we can go and exit it.
1:18 Let's take this back to PyCharm.
1:21 So here we now have our Node modules and all of this
1:27 and we can actually set this up to run inside of PyCharm
1:31 so we can edit it, we can use all the cool stuff
1:35 with TypeScript and LESS and whatever else you want to use to work with it.
1:40 The first thing we've got to do is make sure that we have the Node plug-in installed,
1:45 so if you go to plug ins and then you see that you have Node—
1:48 it turns out we don't have Node, so let's go browse for Node
1:53 and we want this one, the Node JS, okay
1:59 so this takes a moment because we've got to download and then restart PyCharm,
2:02 okay we're back, we don't have anything to run this
2:12 and there's not a great way to right click
2:15 so we have to be a little more explicit
2:17 but just notice now that if we went to new project we do have this Node concept,
2:21 this is really only for Node web apps, the server side not Electron.
2:25 So let's go over here and say edit configuration
2:29 and we're going to add something for Node JS
2:33 and let's call this Electron and not hit enter,
2:38 so over here it says we're going to run Node and that is not what we want,
2:45 we want to actually do something a little bit different,
2:49 actually what we're going to do
2:53 is we're going to run out of our nude packages, now, this is a bit of annoying,
2:59 so we want to go to our project here, this is our web client test,
3:04 and we need to go into our Node modules
3:06 and we need to go into the hidden bin folder,
3:10 how do I do this here in Mac OS.
3:13 So let's go over here real quick, and we can get to it this way
3:18 I'm sure this is easier on Windows, but we want to just go to our .bin
3:23 and here we have Electron, so once we open this
3:26 now we can get to this, it is unfortunately a little annoying,
3:30 drag this over here and now we're inside our hidden folder and we can select that.
3:36 So, it's not the super easiest thing to do, but we can pick that right there.
3:40 And then, we want to set the working directory
3:45 to be the directory down inside the course there
3:49 so right here, all right,
3:52 and then finally, we need to set the file that is going to be main.js in this example
3:59 maybe you've named yours something else.
4:01 Alright, so not the easiest thing in the world,
4:04 but we've got our Electron selected, we've got the right working directory,
4:08 now, what happens if I run this, wait for it,
4:12 bam, there it is, let's just make some changes
4:14 to see that this is actually doing a thing.
4:18 Electron is fun, we could do something like this,
4:28 all right, so we made this little proclamation that hey Electron is fun
4:33 let's run it again, notice that right there, how cool is this?
4:38 So we are doing full on Electron JS inside of PyCharm,
4:42 so just leveraging the fact that really this is WebStorm plus PyCharm, it's a super set.
4:50 So, super cool, I definitely think playing with Electron JS is fun,
4:53 but like I said, I do wish there was a Python equivalent
4:56 that really was as polished as Electron JS.