Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a Cross-Platform Desktop Application with Electron!
You have completed Build a Cross-Platform Desktop Application with Electron!
Preview
Learn how to create an Electron application using a Quick Start project from the folks behind Electron.
Links
- Electron - http://electron.atom.io/
Git Repositories
- Quick start
git clone https://github.com/electron/electron-quick-start
- Front End
git clone https://github.com/treehouse-projects/draw_pro_front_end
Next Steps
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Here we are on the electron home page.
0:00
And at the bottom of the page, it will
show the current version of electron, and
0:02
all the things that get bundled with it.
0:07
Included Node Jess, chromium,
and the V8 JavaScript runtime.
0:09
All these versions get bundled together
with this version of electron.
0:14
Further down the page here,
we have a quick start supplication.
0:19
With all the boilerplate code for
a minimal electron application.
0:22
If we copy and
paste this get clone command here and
0:28
type in the name of
the application we want to create,
0:32
I'm gonna draw_pro because we're
gonna create a drawing application.
0:35
The frond end code for
this application has already been written.
0:42
Check the teachers notes to
the link to this repository
0:45
if you want to follow along.
0:48
So, we should have two directories,
0:57
one with the boilerplate code that we
just cloned from the electron home page,
1:00
and the finished front-end code for
our application.
1:05
Let's take a look at the front end
up location working in a browser.
1:10
So, you can select any one of these
colors here and then draw on this campus.
1:16
You can even save an image here.
1:23
What would be cool is if we
could include this application
1:25
all bundled up in an executable that
will run on Windows, Mac, and Linux.
1:29
Let's do that now.
1:34
Let's go back into our boilerplate
code and open it up in a text editor.
1:37
These are all the files
that we cloned down.
1:45
Let's take a look in
the package.Json file.
1:48
We have a main key that points to main.js.
1:51
We have the start script that
runs the electron executable
1:55
in the current directory.
2:01
Electron will look for the package.json
file, and the main key and run main.js.
2:03
The dependencies for
this application are electron, and
2:11
the license is public domain.
2:15
In other words,
you can use these projects for
2:19
commercial and non-commercial purposes.
2:21
Let's take a look in the main .js file.
2:24
At the top here,
we require the electron module, and
2:27
get a reference to the module that
handles the applications lifecycle.
2:31
Here we get a reference to
the browser window type
2:37
that we can create new
instances of browser Windows.
2:40
Applications can have any number of
browser windows, but we've just got one,
2:45
the main window with the width of
800 pixels and height 600 pixels.
2:49
Once we've created an instance
of a browser window,
2:54
we need to tell it which URL to go to.
2:58
In this case, is the file system,
the index.html file.
3:01
This line of code here opens
up DevTools programmatically.
3:08
Browser windows have events, like closed.
3:13
Once it's closed, we assign
the value of null to main window.
3:17
The Application Lifecycle also has events,
too.
3:22
Ready, for
3:27
example, calls the create window
function which creates the main window.
3:27
When all the windows are closed,
the application will quit.
3:34
Except if you're burning MacOS.
3:40
If you click on the icon in MacOS and
3:45
the window is set to no,
it will create a new window.
3:47
This is the default behavior for MacOS X.
3:51
You can change that behavior by
deleting these lines of code here.
3:55
Let's take a look at the index.html file.
4:03
And at first glance, it looks like
a regular HTML file, cuz it is.
4:06
But it's got access to the Node APIs,
4:11
including the process where you can get
the versions of Node, Chrome and Electron.
4:16
And it uses JavaScript to
print them out to the page.
4:21
At the bottom here, you can see we're also
using require which is another node API.
4:25
This will require all the JavaScript
from the rendered.js file.
4:31
You could include this as a source a
tribute like this, but you don't have to.
4:37
Now, in the renderer.js file,
4:46
you include all the drive script that
you want to run in the browser window.
4:48
This brings us to
an important distinction.
4:53
There are two processes in Electron.
4:56
There's the main process that
handles all the window lifecycle and
4:58
any background tasks, and
the renderer process which is
5:02
executed in the browser window,
where the JavaScript file is required.
5:07
This file is called render.js, but
it could be named anything you want.
5:13
So, let's see this application in action.
5:18
As npm install to install any
dependencies, and then run npm start.
5:21
And here's the application running
with the dev tool is open.
5:36
I'm just gonna undock this like that
5:40
So, we still got full access
to the development tools, and
5:51
the window is open full.
5:55
And as you can see, is printed out
the note version, the chromium version and
5:58
the electron version,
that this application is bundled with.
6:02
Let's disable the death tolls here.
6:12
And refresh our app using command r or
control r.
6:18
And we can always toggle
the developer tools manually here.
6:24
Now let's integrate our frontend
code into our electron application.
6:32
So, I'm going to copy the frontend
code into a directory called frontend.
6:38
Then head over to the main .js file and
6:52
type in front-end.
6:57
And delete the old renderer and
indexed.HTML file.
7:01
And you can see our front-end
directory with our index,
7:11
and the app.js that will get
ran in the renderer instance.
7:17
So, let's start our application again.
7:23
And this time,
our drawing application is loaded.
7:34
However, you've got to resize
the window in order to see the button.
7:37
So, what would be good is to get
an idea of how big this is, and
7:42
then programmatically put
that into our code, so
7:46
when the application opens,
we can see everything on the page.
7:50
So, if we toggle the developer tools, and
we just stop moving around like this.
7:56
We can see we're about
660 pixels by 660 pixels.
8:02
So, let's head back to our
code editor In main.js.
8:10
660 by 660,
8:15
And then start it up again.
8:24
And it started at the right size, cool.
8:32
So, I'm just going to say hello.
8:36
And then save the file to my desktop.
8:37
They're not going to open it up.
8:42
And there we have the png saved
with a transparent background.
8:45
Cool, for more inspiration on what you
can do with Electron, head over to
8:50
the electron website and download
this electron API demos application.
8:55
I've downloaded it here, and
9:01
it shows you all these examples
on what you can do with Electron.
9:02
Open up new windows.
9:07
Access native user interface elements,
9:11
like the error dialog or file browser.
9:16
You can also tap into the tray.
9:22
For example, up here, I don't have
anything associated with Electron.
9:24
If I click on View Demo, it's up there,
and I can remove it, cool.
9:29
Once you're ready to
deploy your application,
9:38
you'll probably want to use
this electron-packager here,
9:41
this bundles up executables for
the Windows, Mac and Linux platforms.
9:45
So, what's exciting desktop applications
are you going to build with Electron?
9:52
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up