Hey what's up! Welcome to Red Stapler again
This is the second tutorial of Electron
and we are going to create a Hello world
program together, step by step!
Before we begin, Electron is actually based on Node.js
so you need to install it first
simply download it from Node.js
website and install it to your computer
Once you have everything setup, you need
to prepare path you are going to create
your application. For this tutorial I'm
going to use c:\electron and
then create a folder for our application
helloworld. Next bring up the command prompt
and change the current path to your folder
To start the project, you need to
initialize the project directory first
using npm init command
npm init command will ask you with
series of questions and eventually
create a package.json file that contain
all your information about project
First is the name of the project: helloworld
version, description
entry point is your main javascript file
When you answered all the questions
here is the package.json content. If you
review it and ok, just type yes
Okay we got a package.json file, the next
step is to install the electron to
your project using npm install command
Next we should add --save-dev option
So we add electron as a project dependency
and I recommend you to add the verbose
option since downloading electron can
take a while. Adding verbose option will
get us the status and progress bar, so we
know that something is working, not
freezing. It could take a while depending
on the internet connections speed
So I'm going to fast forward this video
OK the Electron is now ready
So the next step is coding the application
The first thing we're going to do is
to create a main javascript file
This will be your entry point of the program
First we're going to include the
electron using the require statement and
from the electron object returned from
the require statement
We're going to get the app object
the app object will represent your application
Since electron is based on Node.js
we're using javascript and we can bind
the app with event just like we did when
we're doing development on the front end
For example, we can bind the app with ready event
which will trigger when the app
was loaded completely
We can define the event handler
function like this. Next we are going to
create an application window. We can do
that using browserWindow object.
You can get a browserWindow object from the
electron like this. To pop up the window
First you need to define the window object
like this and then specify the property
width and height attribute and the color
Now from the window object we can use
the loadURL to load the window with the
webpage you specified. Now our very
simple app is ready!! The next step is to
run it. But before we can run it, we need
to package it into executable file
For example, in window it's .exe file
We will talk about that in the next
tutorial but for now we need to do it
manually
We need to create a start script first
We need to bring out the package.json
and then under the script, we change it
to start
and then we enter "electron ."
This is to execute electron. (The "." represented current location)
Next bring out the
command prompt and then type npm start
When we type the start
it will execute the script we just added
and then execute our application
This is github page that we
specified the URL in the code
This is the main window. The browserWindow
You can also load the local HTML
file like we did on the first tutorial
For example, I'll create a simple webpage
instead of loading the URL, we load
the static file
you need to use Url.format and
then specify the path. The __dirname
will get the current directory
Use the file: protocal and we also need to
include the path and URL
And fire the app again
So that's the basic of Electron on how
to create a simple app! In the next video
we are going to show you how to package
the application into executable file
Stay tuned and don't forget to subscribe!!
bye!! :)