Mastering 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,
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.