- [Instructor] Browser Window is one of the most
configurable components in Electron
so it's worth exploring some of the configuration options.
So if you go to the Electron website
you can take a look at all the documentation
right here under Docs and under API Reference
you'll see a list of different things that you can access.
And there's a ton of stuff here,
a lot of them are not necessarily something
you're going to use all the time
but one that you'll be touching often
is this one called Browser Window right here.
So if we click on that we can see
that we can create a new window just like this
and we've done this before, we've created a browser window.
Notice that you can include a configuration object
and pass along some parameters and you can see here
the example is the width and the height.
These happen to be the defaults for the width and height,
so you actually wouldn't need to put these in there.
There are a ton of options in here
so we're going to take a look at some of them,
you can see that you have something like width and height
and of course the X and Y position,
you can choose to center the window
automatically et cetera, et cetera.
There are so many options
that it's just impossible to go through all of them.
So let's just take a look at some of them.
So we're going to modify our App Window here
and we're going to include an object
and then just pass along different parameters.
So I mentioned you can specify
different width if you want to.
So you can say something like let's make it 600
and then let's reverse it let's do 600 and 800
and you can specify a Y position
as well of course as an X position.
And then you can also say center here
and set that so that it automatically centers
when the window appears and then there's also
a lot of options that you can do
like Min. Width and Min. Height.
Now these are actually kind of useful
because when you create a website
with something like Bootstrap it makes it responsive
but if you don't include a Min Width parameter here
you're actually going to be able
to make that window like 10 pixels wide
which really doesn't look good.
You want to put some sort of parameter here
so you can say Min. Width maybe 300
might be a good setting for that.
There's also options to control how the window operates.
So you can say resizable,
if you don't want to make the window resizable,
the default is true, of course,
you can by default resize it
but if for some reason you just want
to show a window of a certain size that you don't want
people to mess with you can use that.
There's also options for movable.
So if you want to allow people to move the window or not
and there's also things like minimizable and maximizable.
Now, some of these things are not going to work
in certain operating systems.
Electron is designed to work
with Windows, Mac and also Linux
and some of these things like making the window
movable, maximizable are not going to be available in Linux.
So, there's also an option for example
to make the window full screen.
That one can be useful
if you just want to start the application
and there's another option for kiosk mode
so that it behaves a little bit differently
but sometimes you want to start the application
with it being on full screen as well.
Now, there's a pretty interesting option
here called Web Preferences
and that is actually another configuration object.
You can do things for example
like control Node Integration so you can actually make
your pages be able to work with NodeJS
to do something like load files
so you can control whether or not
JavaScript is turned on by default
and a lot more other configurable options.
So again, make sure you take a look at the documentation,
we're going to go ahead and keep things pretty simple.
I think that's probably plenty
to sort of take a peek at how this works.
Let's go ahead and save that
and then we'll start off our NPM start command.
You can see that the window is now 600 by 800,
that's the latest parameters 'cause I reversed them,
here's the application icon on my dock here
and then it's still resizable, movable,
but you can play around with those
and I'm not going to be able to go below 300 pixels.
So just with a few settings you can really control
how every specific window in your application works
and as I mentioned there are so many options
that you should really just go to the documentation
and play around and see what you can do with Browser Window.