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