- [Instructor] Let's go ahead and finish up this app.
I'm just going to do a couple of small things
that is going to finish the way our application looks
and first off, I'm going to create
an icon for this project and so, I need to look
for where I created the browser window
which is right here.
And all you have to do is, is add an icon parameter here
and then, point to an icon.png file.
So, in the current branch of the project,
I've actually added an icon, that png file,
it's about 512 by 512 with a transparent background
and it is a png, so that's how come you can get
the background nice and transparent.
There's actually some other ways that are more complicated
to create all kinds of icons, but this is super simple.
So, I like this one.
In addition to that, I also want to go ahead
and maximize the window.
I think it looks nice whenever we open the application
for the window to sort of take up the whole screen.
So, all you have to do is say win.maximize
and that is pretty much it.
So, I did want to show you that
when you add an icon you can run the npn run...
electrnserve
and during development you'll note
that you're not going to be able to see that icon.
So, you'll see this electron sort of default icon here.
The window did maximize, so I really like that,
but you're not going to be able to see the icon
until you actually build the project.
So, let's go ahead and do that.
If you're on a mac and you check out the task bar,
you'll notice that my icon appears there.
It should show the png file icon,
but there's a small bug in the current version
that I'm using to record this course.
So, I'm sure that by the time you watch this,
this is going to be fixed and you should be able to see
the icon that we created with the png.
Let's go ahead and build the project
so we can see that icon in our executable file.
We'll run electron:build...
and this will take a while.
All right, it's done with that
and let's make sure that we quit any open electron windows.
It looks like I don't have any of them running right now
and I'll open my electron- 4 folder
and then inside distribution electron,
you can see that now's there's like a Mac section here
because I'm on a Mac.
And you can see that my application now has the proper icon
and if I double-click on this,
you'll see the application come up with my custom menus
and if I go to the dock, you'll be able to see the icon
there, as well.
So, this is pretty much a fully functional app
that I can send and post somewhere or distribute.
There's also different versions of the bundles here.
And remember that what we see here will depend
on the platform that you're using.
Overall, I think it's a pretty cool experience
to be able to create cross-platform applications
with the languages that you already know.
I always enjoy leveraging what I know
about HTML, CSS and JavaScript
and the fact that we can even use frameworks
like UJAS or React or anything else
like Bootstrap and build real applications
with the things that I already know.