- [Instructor] In order to run an application
we'll need to create this file called index dot JS.
It's the file that Electron is going to use
to start up our application.
So let's go ahead and do that right here.
And we'll call it index dot JS.
And we'll start off by loading up some parts of the library.
So we'll create a constant and in here
we're going to import just a couple of things
from the library.
So we'll need to load the app component as well
as browser window.
So browser window of course will have the window
for our application and app is the application.
So we'll need to do this and we'll require
the Electron library to take care of this.
All right, so now that we have that then
we can start working on things.
We'll create a function.
We'll call this create windows, and in here
we're going to go ahead and set things up.
So we will do a variable called app window
and make that equal to a new browser window.
So browser window is where you define
the parameters for your window.
You can leave it blank but it actually
has a really complex configuration object
where you can pass things like the width
and height of the window, whether or not
the window launches, you can preload a window.
There are a ton of options and you can check
the manual to see what those are.
But for right now let's go ahead and leave that blank.
And then what we'll do is we will tell the app
window to go ahead and load a URL.
So this is going to load just a simple website.
And so in here you can type in any website you want.
Going to type in one called 7ty dot tech.
This is a template website that I've built
and you could really use whatever you want,
your own website, it doesn't really matter.
And then afterwards I'm going to go ahead
and use the app component and look for an event
that happens on that app component.
So the event that I'm going to look for is ready.
It means when everything is ready and Electron
has loaded go ahead and use our create windows
function that we created above.
So this will set everything up and launch
the application with a window that is going
to display this website right here.
So let's go ahead and save this.
We're going to need to pull up the terminal.
So you can pull up, get Bash if you're using
Windows or use this right here to pull up the terminal.
And we'll need to go ahead and run the NPM start command.
So remember in package dot JSON we have specified
that our start script is going to run Electron
period and that will look for this index dot JS
file that we created.
So let's go ahead and run that.
This'll take a second.
And then it should pull up that website on a window.
Now, let's take a look at what we got here.
So we've got a window that looks just like
any other Mac window because I'm on the Mac
operating system.
If you'll look at the application right now
you can see that it has some default venues.
It has this about Electron four, which is not
really going to do anything right now.
But notice that it does use the name
from the package dot JSON everywhere
it should display the application name.
There's also an edit menu which will do typical
edit-like things so this will look different
depending on your operating system.
And then there is a view menu.
This is kind of important because it allows you
to do certain things, especially during development.
So one of the important thing is this toggle
developer tools option.
So you may recognize this from doing web projects.
And in here its job is to allow you to do
an inspection on your current website.
So you can go to the console, you can take a look
at anything that you would normally do
on something like Google Chrome
because you are running essentially a copy of Google Chrome.
And take a look at anything like say the console here.
And there's a couple of errors here.
We're not really running a real application.
All we're doing is pulling up a website.
So you can take a look at that.
So this just means it's anything that you would
be able to do for a website you should be able
to do right here, so inspect elements and all
the other sort of stuff.
Now, you can also reload and force reload
which you sometimes want to do because sometimes
when you make changes to your application
they're not going to be instantly reflected
in what's happening in your application window.
And let's go ahead and toggle out
of the developer tools for now.
And then you can see some other window sort of methods.
Again, these are going to be different depending
on your operating system but the very useful one
is this toggle developer tools that allows you
to inspect your application.
So another thing I wanted to say
is that this is the simplest sort of application
that you can create and it is actually a way
that people like to create applications
because it means that everything is on the web
and in order to launch a new version
of this application I wouldn't actually
have to rebundle a new version
of this application because the application's
actually sitting on a literal website.
So some people actually like to do this.
They can run things like Google Analytics
and take a look at how many people are using
their application.
It's a lot easier to update but it definitely
depends on the web.
So this sort of thing wouldn't work if you're offline.
You wouldn't be able to create an application
that did not depend on the web.
We'll take a look at how to do something
like that in the next video.