welcome to this course on building
desktop apps with electron my name is
Eric Greene and this course is brought
to you by Wynn Tillich now in this class
we're going to take a look at getting
started with electron we'll talk about
how to configure a development
environment we'll take a look at using
react with electron and typescript also
we'll talk about using CSS modules with
electrons so that we can isolate our CSS
for our particular components we'll take
a look at configuring the menu bar and
then finally we'll discuss debugging
electron applications so to get started
with electron this course is going to
assume that you have some basic
knowledge of nodejs as well as react and
the JavaScript programming language in
order to run the examples on your
machine you will need to make sure that
you have no js' installed you can
actually download node from node.js
organ and make sure you install version
6 or later also if you if you don't
understand the basics of these
technologies I would highly encourage
you to check out the Wintle lucknow
courses on introduction to node J s
nodejs modules and node.js packages as
well as introduction to react courses
electron programming is a mix of
standard nodejs JavaScript programming
with browser-based HTML CSS and
JavaScript programming in addition you
can use many popular UI frameworks and
libraries such as react angular 1 and 2
as well as many others to actually code
the actual UI portion of the application
if you'd like to learn more about
electron from the electron website you
can visit it at electron atom do getting
started with electron is easy there's a
full sample project available on github
simply clone the repository change into
the folder and then install the NPM
packages and then fire off NPM start and
you will have a an electron based
desktop application fire up on your
system and the cool thing about it is
it's totally cross-platform it'll work
on Windows Mac and Linux so let's take a
look at creating a hello world electron
application so let's go ahead and get
started with building an electron
application we're going to use the
actual hello world sample from the
website so we'll go to the electron
website here we're going to see
electron atom Daioh there we go and if
we scroll down here a little bit we're
gonna see we have the same QuickStart
instructions that we saw on the slide
deck so we'll simply grab the git clone
command here and we'll copy that and
we'll open up a terminal prompt let's
change to our source code folder and
we'll paste that and we're gonna clone
it there we go we're gonna change now
into the actual electron Quick Start
folder here we go and the last thing
we're going to do is actually in spawn
to install the package dependencies and
then actually fire up the application
with NPM start so we'll say NPM install
at NPM start let's hit enter this luxu
go out and download all of the package
dependencies that are needed for the
program as well as fire up the the
sample hello world application great
there we go now we have our hello world
application you can see it says hello
world here this is actually the UI and
then this is the developer tools which
are automatically opened for us as part
of the hello world application you can
actually see like the elements and stuff
like that you can access the console
network traffic that kind of thing we
can also close these if we don't want to
make use of them and then you can see we
have our hello world app if we come over
to view you can toggle those developer
tools to come back at any point and of
course later on in the and building this
application we'll be editing the menu
bar so on and so forth and we can change
how this whole thing kind of looks and
feels it actually works let's go ahead
and close this so let's open up visual
studio code and take a quick tour what
the source code looks like okay we're
gonna come in here and open up our
folder and we'll pick our electron
QuickStart application there we go and
looks like a standard node app we're
gonna have a package JSON file here in
this file you're actually going to see
this electron pre-built this is the
actual electron dependency that's
downloaded for actually launching our
electron application
it's currently set at 1.2.0 we're
actually going to increase that to one
point two point one and the reason we're
gonna do this is that later on in the
course we're gonna do some debugging and
in order to debug electron
there's debugging both the actual main
process but there's also the debugging
of the renderer windows the main process
is debug like a standard node
application using node inspector and the
renderer windows are debugged like a web
application using the chrome developer
tools well the problem is in order to do
both we need a version that a we can
compile on windows because we're gonna
have to recompile electron to enable
debugging mode but we also need a
version that will support things like
the react developer tools which are
which are a Chrome extension and be able
to run those as well
the one-point-three series for whatever
reason is not compiling for me so we're
gonna go with one point two but one
point two point zero is not late enough
to use the react extensions but one
point two point one is compiled able as
well as works with the react extensions
that we're going to use that now the
actual code we're gonna be writing
should work fine equally with one point
two point one as well as the one point
three series we're not using any
functionality that doesn't work with
either so now that we've changed our
package JSON value there let's go ahead
and open up a terminal window and we're
gonna come in here and say remove der -
s node modules and then I'll actually
delete our node modules folder and then
we'll just simply reinstall all of our
packages again so while those are
installing let's actually take a quick
look here at some of the other files
that we have the main j/s file is the
main file that we actually use to launch
the application make that a little
bigger and in this file you're going to
see where it actually requires electron
it gives us a placate or gives us access
to the actual application itself we have
access to the browser window so we can
create new browser windows on demand
we're gonna have a variable here for our
main window this basically allows us to
maintain
a reference to the main window so it
never gets collected by the JavaScript
garbage collector will skip over create
window for the time being and come down
here to our app event handlers we're
going to have a ready event handler for
our app so that when the application is
ready it will actually run this create
window function here when we actually
close all of the windows and we're not
on a Mac then we're gonna tell the
application to quit but because on a Mac
it's common to keep the application
running even if all the windows are open
we're not going to tell it to quit if
we're on a Mac this is one of the
important things about working with
electron you have to start thinking
about the conventions of various
operating systems and how they behave
and to make sure that our application
behaves the way the user would expect it
to and then down here we can add
additional code later on we'll throw our
menu down there and you can put
additional code which will be used to
configure the main process now up here
the create window here will actually
create that main window that you saw
with the hello world so we're just
specifying some dimensions there's an
actual index.html file that had the
hello world content in it that got
loaded up this told it to actually open
up the dev tools when it loads we can
actually come in here and comment this
out if we don't want the dev tools to
automatically load up there we go and
then finally when the main window closes
we want to make sure we set main window
to null so that things get properly
garbage collected the actual index file
looks like this it's just a standard web
page it's got hello world there in the
title hello world in the h1 and then
other information but this is where it
starts to look a little bit different
you'll notice that in this web page we
can actually access process information
and basically with this you're in your
web pages you basically have access to
note so you can do like a combination of
web page programming as well as node
programming and then finally we have our
renderer file here a render j/s this is
going to be JavaScript code that we can
run in on the client side portion of
this in the actual web pages so if we
open up this file we'll see that it's
currently emptying but we'll be adding a
lot of code to this now that we have our
hello world application up and running
it's time to go ahead and confer
here our development environment to do
to take advantage of some of the more
sophisticated JavaScript development
libraries out there we're actually going
to go ahead and set up our project to
utilize typescript along with its type
definitions so that we can have strong
typing and good solid es2015 support in
our application we're also going to use
some additional application libraries
like bootstrap for styling and layout
moment for outputting are our dates and
times CSS modules for basically allowing
us to isolate CSS to particular
components and then finally we're going
to use react as our component system for
building the components in our
application we'll also talk about our
package JSON configuration and wiring up
some script tasks and stuff that we can
use for starting up our application and
performing other project administrative
tasks and then finally we'll talk about
a good typescript react code editor
we're going to need to install some NPM
development dependencies the first one
is the electron pre-built now this one
is actually included in the starter
project and it contains the compiled
electron framework now the starter
project as of right now comes with 1.2.0
but we're going to be upgrading this to
1.2.12 fully support debugging towards
the end of the class also we're going to
need typescript this is gonna provide a
strong typing and allow us to use es2015
modules well most of es2015 is actually
implemented in Chrome's v8 engine in
order to use the modules we still have
to use a transpiler so we're gonna pull
in typescript for this next we have the
Taipings these are actually the strong
typing libraries that we're going to be
using to support strong typing for the
various JavaScript libraries that we're
going to be utilizing finally we have
the electron dev tools installer this is
going to allow us to add Chrome
extensions to our debugging process when
debugging our electron application such
as using the react extension for
debugging react components this is
incredibly useful and we'll take a look
at this towards the end of the course
now to work with typescript there comes
with a command-line tool called TSC this
command-line tool will actually compile
all of our typescript files into
JavaScript files we can compile it one
time or we can also tell it to watch for
changes to the files and then compile
them again to do this we're going to
turn that on with the dub
you flag which turns on watch mode in
order to properly work with typescript
we're gonna need a TS config file in
that TS config file we're actually gonna
configure it to recognize JSX which is
what we'll be using for react use the
common J's module format which is what
the result of our es2015 modules filing
is going to be and then finally our es
version target which is going to be es v
non JSX
typescript files should be named with a
plain dot ts extension JSX files should
be named with a dot tsx extension that
dot TS x tells typescript to actually
look for JSX content now the editor
we're going to be using is Visual Studio
code and it actually provides great
syntax support for both TS as well as TS
x files for our type dependencies we're
going to be loading in two types of
definitions global definitions and
module definitions the global
definitions will be loaded into the
global namespace whereas the module
definitions are not so the global
definitions that we're going to be
looking at are electron moment as well
as moment note in order for a moment to
work for us we actually have to have the
moment no Taipings as well and then of
course the node Taipings for our module
definitions we're going to be pulling in
the react and react Dom so that we can
get strong typing when working with our
react components for our application
dependencies we're going to be making
use of bootstrap react react Dom moment
as well as our CSS modules require hook
the CSS modules require hook is going to
enable us to basically enhance the
require function so that we can use CSS
modules last we need to configure our
package JSON file we are gonna set it up
to run various commands for example NPM
start will actually run our electron
program and this is actually
pre-configured for us with the actual
starter program next we're gonna use NPM
run TSC
this will actually perform a one time
compile of our typescript files we'll
set up another command called NPM run
TSC colon W this will compile the
typescript files as well as tell it to
watch for future file changes now when
the compliation occurs the TS and TS x
files are transpiled into j s and dot
map dot JS files what's really nice
about these map files is that later on
towards the m we're doing our debugging
we can actually set our breakpoints in
the TS and TS x files because we have
these special source code map files
after installing all of
these packages a post install task is
going to be executed installing the
various type script type Taipings the
Taipings actually get installed through
a separate installation system so let's
take a look at how to configure the
development environment so let's go
ahead and get started with some
additional configuring of our project
development environment we're going to
be adding typescript so that we can get
some strong typing capabilities as well
as es2015 module syntax because we're
using v8 the v8 engine through the
through node as well as chrome we
already have access to almost all the
standard typical es2015 features but
modules are still not yet implemented in
v8 plus the typescript is really nice
for the strong typing and the great code
completion that you get with it also
when using that combined with Visual
Studio code that the development
experience is really outstanding
additionally we're going to we're going
to be using react for our UI components
so we're going to include some stuff for
working with react will be using
bootstrap to be doing our actual CSS
layout and some styling so let's go
ahead and get started with installing
some of these packages and then it's
doing some additional configurations to
bring this thing to life so let's go
ahead and get started with installing
some of the packages that we're going to
be needing I'm gonna say NPM install - s
and we're going to be installing
bootstrap and we're actually going to be
installing the version for alpha so it
4.0 - alpha dot 3 and we'll install
moment and we're going to install react
react - dumb and then we will install
our CSS modules require - hook
so those are our application
dependencies let's go ahead and add our
development dependencies npm install' -
d and we're going to be installing
typescript typing's and then finally the
electron dev tools installer we won't be
using the dev tools installer until the
end of the course but we'll go ahead and
install it now excellent so now that we
have those installed we need to go ahead
and set up our typescript configuration
as well as our Taipings configuration so
to set up our typescript configuration
we'll come over here and create a TS
config JSON files so TS config JSON and
we'll just paste our configuration into
here get rid of all these extra spaces
there we go and you'll notice here we're
actually going to be enabling JSX for
react and our target module output
there's going to be four common j/s
which will work nicely for our electron
application running in anode environment
next we're going to need our Taipings
JSON file so I'll come in here and
actually create a new file called
Taipings dot JSON go ahead and paste
this into here there we go
one nice - my visual studio code is you
can actually use this little format code
and it'll actually clean it up really
nicely for you so we have our global
dependencies this is electron moment
moment node and node and then we have
our non global dependencies react and
react Dom and basically this will give
us the strong typing capabilities when
working with these various libraries so
we'll go ahead and save that now now we
want to do is actually come into here
and we're gonna change our main j/s file
we're gonna rename it from a javascript
file to a TS file and then for our
renderer we're gonna rename it from ajs
file to a TS file and we're almost done
we have to do a couple of little
commands here on our package JSON so you
can see here we already have a start
command for firing up the elektron
application this electron is actually
located in the dot bin folder underneath
of node modules we're gonna add three
additional commands here the first one
is going to be post install this will
actually do the Taipings install so
these typings that we have listed in
typings json will actually get installed
as part of the actual installation of
our packages in the future we have the
TSC command this is actually going to do
the typescript compile a ssin this will
do a one-time compliation and then we
also have TS CW and this is actually
going to do a compliation and then watch
for file changes so when we're doing
regular development on our projects
we'll actually use this TS CW to
actually watch
our file changes and actually recompile
our typescript code for us as needed so
we'll go ahead and save that now we're
gonna come into here and what we'll do
is we're gonna go ahead and install
those typing's now you can I can
actually run you know reinstall
everything if I want to or I can do the
following I'm actually gonna say node
modules then actually dot bin backslash
typings install and this will actually
go in here and actually install the
Taipings that are missing so it'll
actually go in there and install them
you'll now see that I have a Taipings
folder over here and now what I'm gonna
do is actually I'm gonna run my actual
typescript compiler so I'm gonna say npm
run TSC so now you'll notice I now have
a main J's file in a main j/s map as
well as a render or j/s and renderer j/s
map later on we do our debugging we're
actually going to be able to use map
file so that we can actually set our
breakpoints and stuff like that inside
of our actual typescript files so this
is actually incredibly useful now be
careful when you're editing you don't
actually want to edit the j/s or map
files you only want to edit the TS files
and later on we'll introduce something
called tsx files for working with react
and for those also make sure you only
edit the tsx not the JSX files so let's
go ahead and test our project and see if
the whole thing still works and we can
say let's see we'll see npm start
and once again we have our application
and notice this time the developer
window didn't automatically open up for
us so so far so good we've actually been
able to upgrade our development
environment to leverage typescript and
we've also installed a bunch of
different packages for doing various
things in our UI you have your choice of
any number of UI frameworks and
libraries or no framework or library if
you prefer to actually build the UI
stuff in your application for our little
demonstration app we're actually going
to be using react and the react Dom to
basically build our components now these
are going to work the same way in
electron as they do in traditional web
applications and we're actually going to
be using typescript so that we can
actually have strongly typed component
properties and state
finally the es2015 module syntax is
going to allow us to easily organize our
component files and the nice thing about
typescript is it fully supports JSX so
let's take a look at how to use react
with electron and typescript okay so
let's go ahead and wire up our first
react component we're actually just
going to do a hello world react
component and take a look at and see how
that works using typescript along with
along with electron so I'm going to go
ahead and close our window here and the
first thing we're going to do is
actually fire up the the typescript
compiler but we're going to fire it up
in watch mode so we're going to say npm
run TSC colon w so now our firing up
typescript in watch mode and i'm going
to come over to our renderer and the
first thing we're going to do here is
actually change this to a tsx file we're
actually going to be using this with
reactive so in order to use JSX our
render has to be named tsx so there we
go there's our new tsx file so now we're
going to come into here and actually
begin the process of building this out
first thing we're going to do is
actually import reacts we're going to
say import react equal to require react
and then we'll say import react dom
equal to
require react dom and this is going to
load the react modules from the node
modules folder we're going to go ahead
and create our class hello world and
this is going to be extending the react
dot component now when you work with
with reactant typescript you basically
have to specify the types for the props
and state that are going to be used with
the component react dock component is
actually a generic type so for this what
we're gonna do is our props we're going
to define here and we're not actually
going to really have any props here but
I'll show you what this looks like we'll
say props and then we can come into here
and say props like that or if we wanted
to for example we'll do this with the
state we could simply have just passed
in an object like that there we go so
now we have our props with actually note
properties or if we wanted to have a
more simplified syntax we could just
pass it in this object literal like that
like we're doing for the state now later
on we'll actually have props with
properties and states with properties
that we can we can take a look at in
terms of working with typescript
so we're gonna go ahead and implement
our render function as you can see
everything is pretty much the same
normal stuff that you would do when
actually doing react programming we're
gonna say return and we'll just have an
h1 here saying hello world react close
off our h1 and then of course down here
so use our react Dom and actually render
this out so we'll come into here and say
hello world and then we'll do our
document that query selector and we're
actually going to search for the main
element so let's save that
you can see our TSX file was
automatically compiled one last little
change on index here we're going to
actually take all of this content out
and we'll just simply replace it with
main and that will be we're actually
going to launch our HelloWorld component
from so now that we've done all that we
actually need to run our electron
application so we're going to open up
another terminal window here and we'll
say NPM start this is actually going to
fire up our application and you can now
see that we have hello world react so
now that we have hello world working
let's go ahead and actually begin to
build our application so what kind of
application are we actually going to
build we're gonna build a very simple
start and stop timer we're gonna have
two buttons one that says start and then
another button that says stop and then
we're gonna have like a little little
stopwatch timer kind of running and then
basically you can start it and then it
starts zero and then begins incrementing
and then after a while you can stop it
and it'll stop it whatever it stops at
so we're gonna have to be building a
couple of different components for this
to work we're gonna actually have a
component for the actual time display
we'll have another component for the
actual start and stop buttons and then
we'll finally we have an actual
application component that wraps both of
those and ties the entire thing together
now right now we're going to set it up
to just start and stop based upon the
buttons but in in in future
demonstrations we're gonna actually
going to wire that up to the menu as
well as up to some accelerator keys so
we can start and stop it not only from
the start and stop buttons but also from
the menu and the accelerator keys so
let's go ahead and get started first
thing we're gonna do is actually close
all of our open windows we're gonna come
into here we're gonna create a new
folder so make sure you you're actually
highlighting something in the main level
root folder if you have like node
modules or typings highlighted
and you click new folder it will
actually create the new folder in there
and that's not where we want it so we're
going to come into here and we're gonna
create a folder called components there
we go now inside of our components
folder we're going to create a couple of
files here so we're gonna have one
called timer clock dot TSX we'll have
another one called timer controls dot
TSX and then the final one final one is
going to be called timer - app dot TSX
and so it'll be this timer app is the
one the racks you can a reference inside
the render or TSX file but the the timer
clock and the timer controls will both
be contained inside of timer app TSX now
you'll notice the automated compiling
here has already tried to compile the
TSX files and basically produced a
JavaScript and a JavaScript map file for
us to make use of so let's go ahead and
build out our timer clock first first
thing we're gonna have to do is actually
import react so we're gonna say import
react equal to require react then next
we're going to be needing a UTC object
here from the moment library
if you've never used moment before
moment is really nice for working with
dates in JavaScript and so we're going
to use its formatting capabilities to
actually format our actual stopwatch
timer next we're going to need to set up
some properties for our for our react
component here so I want to say
interface timer clock props and we're
gonna have a property on there called
current it's gonna be of type number now
we're ready to actually go ahead and
build our component so we're gonna say
export class we're gonna be exporting
this component out because will actually
be requiring it into the timer app and
we're gonna say timer clock there we go
extends react component we'll specify
our timer clock props and then our open
and close curly since we have no state
to work with here next we're going to go
ahead and implement our render function
so there's our render we're going to
return back I did with a class name of
row will actually be loading bootstrap
up into our application here so we can
make use of the nice boot bootstrap
layout capabilities so there's our
closing div tag next we're going to add
another div here we'll say class name
equal to call MD 12 text
- access center there we go and then
we're going to go ahead and actually
output our time here
UTC and then will this prop stock
current take a look at that intellisense
there that's available to us in Visual
Studio code and then we're simply gonna
say docx format and then for our format
we're going to specify hours minutes
seconds and then milliseconds excellent
so there is our first component and it
looks like we're actually missing a div
tag here so let's go ahead and add
another div that's one nice thing my
visual studio code it instantly showed
us that we were missing that closing div
tag we have just a whole lot of
debugging time in the future so now
we're going to come into our timer
controls here and let's actually go
ahead and first collapse up this render
function first and we'll go ahead now
and build our timer controls tsx so
timer controls are going to be similar
here to our timer clock will import
react and we're going to say require
react then we're going to go ahead and
setup our interface for our timer
controls props so the timer controls
prompts there we go and we're going to
have a start function okay stop function
and then a boolean here for whether or
not the timer is actually on perfect
okay so now we're going to do is
actually build our component so we'll
say export class timer controls extends
once again react component we'll specify
our timer controls props and then
finally pass in that empty object there
we go let's go ahead and build out those
buttons now with our render function and
we're gonna say return
give of our closing div here we're going
to class name equal to row put our
semicolon down there next let's go ahead
and do our div class name call XS 12
call SM 6 so what this is going to do is
that for extra small screens we're gonna
actually take our have our button take
up the full width of the 12 columns for
small screens and larger it's only going
to take up six of the of the available
12 columns so basically on small screens
and larger the two buttons will be in
right next to each other on extra small
screens the buttons will be on top of
each other and we'll say text XS Center
this will just Center the buttons for us
and we'll close off our div there go
ahead and wire up our button here so
we're going to say button disabled and
this dot props timer on that way if the
timers activated the button will be
disabled notice we're disabling it based
upon the property value of the timer so
it doesn't matter how the timer is
actually activated that the timer is on
the button itself will be disabled this
will be important later on when we start
using the menu and accelerators to
actually turn the timer on
we're not specifically hooking into the
button click event instead we're hooking
into the status of the timer itself
we'll go ahead and specify our class
name here once again these are from
bootstrap so button - primary there we
go we're gonna wire up the on click
function that we were going to pass in
here through our properties the this dot
props dot start and then finally we'll
specify some start text for our button
itself
and close off the button tag perfect
okay so now we have our button and let's
actually collapse this over here so we
can see that text a little easier we'll
go ahead and copy this paste that down
there like that and then we'll go ahead
and finish wiring up the rest of this so
we're gonna take that out we'll just
paint change this to danger not because
it's a real danger but it'll make it a
nice red color and then we'll give it a
stop here and then we'll say stop and
we'll go ahead and save that there we go
so so far so good we have our art tsx 4
timer controls and tsx 4 timer clock now
you'll notice we're still over here on
the command prompt for starting the
application but if we wanted to check to
see if any of the compliation was
failing we could actually come to the
first window here once again and it
would have errors listed here if there
was anything wrong as you can see up
here we did actually have some errors
and we were working on our code if you
remember earlier we didn't have a
corresponding closed div tag but now you
can see there's actually no errors here
in any of our code so so far so good so
we've got our timer controls and we have
our timer clock the last part is the
actual timer app which is going to tie
the two pieces together into a single
component ok so let's go ahead and
import react as we've done before so
require react we actually need to bring
in our timer clock then we'll just bring
that in here from our timer clock dot
TSX
in fact actually we can actually leave
the tsx part off there because we want
to actually be loading up the actual TSX
file itself will actually be loading up
the resulting JavaScript file so it's
important to leave that off and then
we'll have our timer controls dot slash
timer controls perfect okay so now that
we're pulling in our two our two
components and react itself we can go
ahead and build out the timer app
component it was actually configure the
state for this so we'll actually be
maintaining state in our timer app so
we'll have interface timers timer timer
app state and for this we're gonna have
a start time which will be of type
number stop start time and stop time
which will also be a number and then
we'll have our timer interval which will
be a number as well so now we'll go
ahead and build our component we're
going to say export class timer app
extends react component now this time we
don't have any props so we're gonna pass
in the object in for props but for state
will basically say timer app state so
now we can have a strongly typed state
for our component now this component has
a lot more going on in it so we're gonna
go ahead and build this out to save a
little time I'm actually gonna copy and
paste some code the purpose of this
course is to talk about electron not
necessarily talk about how to work with
react so we'll paste that in there and
all this constructor is going to do is
actually initialize our state as well as
bind up our start and stop timer
functions there we go so we have our
start timer and stop timer there and
then finally we'll paste our render
function into here so there you go you
can see we're actually including our
timer clock and timer controls we're
going to pass in the current time to the
timer clock for displaying the current
time and then we're passing in our timer
on as well as the start timer
stop timer functions that can be
activated from the timer controls so now
we have the basic functionality here for
our little timer application all we need
to do now is actually update the
renderer so that will actually use timer
app instead of hello world so we'll come
over to here and we're going to open up
the renderer tsx
for this all we're going to do is
actually come in here and delete all of
that and then we'll say import timer app
equal to actually from and then we'll
come into here and we're going to say
dot components slash timer - app and
then we'll take timer app right here
copy it and paste it now before we can
actually fire this thing off we actually
need to make one little adjustment right
there ok great so let's go ahead and
actually rerun our program and see if
our timer application is going to work
here so we'll go ahead and switch back
over to our second command prompt window
we're gonna say NPM start and assuming
all the typescript compiler updated
everything we should have a timer
application so we have start if I click
start the timer starts running if I
click stop it stops if I click start it
starts over again and then if I click
stop it stops now of course it's not a
very pretty application so in the next
demonstration we're going to take a look
at using CSS modules to isolate our
styling to its particular components so
with the rise of component driven
development not just the HTML and the
JavaScript need to be componentized but
the CSS as well now when using bundlers
like a web pack you can basically have
the CSS be required into the JavaScript
part of the application and and this
will allow you to basically load the CSS
for each individual component well you
can certainly use webpack for electron
and actually a lot of the boilerplate
project starters do for our particular
application we're not going to use
webpack because we don't really need all
the capabilities
but we just simply want to be able to
modularize our CSS so to do that we can
actually use the CSS modules require
hook package and what that's going to do
is going to extend the capabilities of
require to allow us to import our CSS
files directly into the component and
basically this is going to set them up
to be named spaced and so when you apply
them to the component they'll actually
have a class name that is definitely
unique within the overall structure of
the application and that way the CSS
doesn't bleed in from one component to
another
now this hook is going to do two things
for us it's going to provide us unique
class names which are scoped to the
component it will also load the styles
associated with the unique scoped class
names into the style tag in the header
of the main document now it's important
to make our file system or file
structure easy to understand and follow
so the component CSS files should
actually be stored in the same folder as
the corresponding component J's file
this will make it easy to find the CSS
files associated with the component and
vice-versa
well we're not using sass or less both
of those could be easily configured to
transpile the CSS for us as well so
let's take a look at a quick
demonstration of how to use CSS modules
with electron now that we have react
wired up for our electron application we
actually need to go ahead and turn on
those bootstrap styles that we
referenced in the earlier video we also
need to add some components styling for
the two components that we created the
timer clock as well as timer controls so
the first thing we're to do is make sure
we have our typescript to compile a ssin
process running so we'll say npm run and
then we'll do TS c w and that'll run the
typescript compiler and watch our files
make sure things are being properly
compiled there we go so now it's
watching for file changes and the first
thing we're going to do is we're
actually going to add a reference to
bootstrap now when you work with CSS and
an electron application or really a
large-scale web app using components you
can basically have global styles which
get loaded up kind of like in a link
reference to just a general stylesheet
and those Styles will be applied to the
whole page but you can also load up
styles that are specific to a component
so what we're going to do is we're going
to use bootstrap as a global style so
that we can basically reference the
bootstrap classes from anywhere and then
we'll set up some some component
specific styling for our actual
components so I'm going to come over
here to our index file and we're going
to open that up and right here in our
head section we're going to add a link
tag to load up bootstrap so we'll just
paste this in right here and you can see
we have bootstrap installed as a node
module if you remember from our
development configuration we set up
bootstrap and downloaded it actually as
an NPM package so we're referencing it
right here and now bootstrap will apply
to the entire application so we can
basically reference the bootstrap
classes from anywhere so if we want to
try that out let's go ahead and open up
a second command window and we'll say
NPM start and this will fire up our
electron application once again and it
looks like I didn't save my file so let
me actually stop the electron
application let's go ahead and make sure
our file is saved and then let's go
ahead and run it again and now you'll
see we actually have the bootstrap
styling so naturally it's very important
to make sure you save your file if you
don't save your file then it won't be
the changes won't be included when the
application runs but now we have our
bootstrap styling and everything looks
okay but if you notice here we're gonna
make this thing really small and when it
gets small you'll see the start and stop
button are kind of stacked on top of
each other and there's really no gap
here between them all so what if I
wanted to make my timer number here the
o'clock text actually a different color
so what we're going to do is we're going
to include some component styles that
will actually do that for us but the
component styles won't be global instead
they'll be localized to these particular
components so let's go ahead and do that
so to set this up we've included a CSS
modules require hook package that we've
downloaded what this is going to do is
basically override the default
implementation of require and allow us
to require CSS files into our
application so let's go ahead and do
that now
so we're going to come down here to our
render or tsx file and we're going to
add some code to this to support this
the first thing we're going to do is
we're gonna say require and then we're
gonna say CSS modules require hook there
we go this is actually going to return
back a hook function that we can invoke
now if we wanted to we could actually
assign this to a hook variable and then
invoke that variable as a function
object but to save a little bit of
typing we're actually just going to
invoke it like this so this is the hook
function that we mentioned earlier on
this we're going to set up a process CSS
option and make the SMEs lowercase and
we're going to assign a function to this
so we'll use a little arrow function
here so we'll save our style equal to
document dot create element and then
we'll say style like that excellent then
we're going to assign to the inner HTML
of our style tag the actual CSS content
being passed in here put in equals there
and then finally we're going to say
document dot head dot append and then
we'll add our style and this will
actually be append child there we go
so now now what's going to happen is
when we actually set up our component
Styles the scoped classes that will be
created will actually be used to
populate the style element that we're
adding here so now let's go ahead and
add our first set of scope styles to our
timer clock component so we'll come into
our timer clock tsx and we're actually
going to need to create a new style
sheet so we'll come into here and say
new file timer clock dot CSS there we go
so we're going to call this class clock
display and we're going to go ahead and
set the text color to blue there we go
and then we're going to require this CSS
file inside of our timer clock component
here
so I'm gonna say Kant's styles equal to
require and then we'll specify the
relative path so this will be timer dash
clock dot CSS so great now the next
thing we need to do is actually make use
of this inside of our react component
down here right now we're just simply
assigning this piece of text to this
class name but we're actually going to
change this into an actual JavaScript
expression so the first thing we're
going to do is wrap our string in curly
braces so now we've wrapped it and
wrapped it in curly braces we can
actually treat this as an expression so
now we're going to come into here and
we're gonna put in back ticks back ticks
are the new template string capabilities
of es 2015 it allows us to have like
multi-line strings and stuff like that
but more importantly we can actually do
variable interpolation so we'll come in
here and I'm gonna actually pass in a
variable and then up here I'm gonna
reference my Styles I'm gonna paste that
in there like this and then I'm going to
say o'clock - display there we go
and so now this expression will be
evaluated and it will grab the scoped
class name so the scoped class name
isn't just going to be like clock
display it'll have additional stuff in
front of it too to basically scope it so
that it's unique to this particular
component and then the CSS we have here
will get loaded up with the properly
scoped class name into that style tag
that we set up in render or TSX so we'll
go ahead and make sure all of our files
are saved we're going to come in here
and run our electron application again
and now when it load you can see we have
blue so if we come over to view and
toggle the developer tools here I'm
gonna click on this and Kyle at the
number and you see there's that scoped
class name
so it's underscore components timer
clock and then clock display and then if
we scroll up to the head you'll see
where our code added a style block here
in fact let's make that a little bigger
make our applications eyes here so now
you can see here we have our style tag
with our components timer clock clock
display color blue so that's basically
the way this whole scoping mechanism
works now eventually when when web
browsers actually support true web
components creating scoped CSS will
actually be part of the way HTML CSS and
the Dom actually work but right now we
can use polyfills like this to basically
simulate the same concept of scoped CSS
and actually make use of it in browsers
today so the last thing we're going to
do is go ahead and set up some scope to
CSS for our actual
start and stop buttons to set up a
little bit of a little bit of space here
between them when things are collapsed
so now let's head over to our timer
controls and the first thing we're gonna
do is go ahead and create a CSS file
timer controls dot CSS
there we go and then here we're gonna
create a class called a control
container and we're gonna have margin
top will be five pixels margin bottom
will be five pixels great so there's our
CSS and then we're gonna come in here
and actually require that in our timer
controls so we'll say Const styles equal
to require and then we'll do dot slash
timer controls dot CSS we'll go ahead
and save that and now down here we're
gonna have to make a couple of changes
so just like we did before we're gonna
have to come in here and convert this
over to be curly braces and then we'll
have to switch this to back ticks to
make it a string template or a template
string and then we'll do our
interpolation with our dollar sign curly
brace and we'll say styles and then
we'll say control - container there we
go and we can simply just copy this
piece of text right here and we'll paste
it down here and just copy over this one
since they'll both be the same there we
go
so now we basically have our scoped CSS
for our timer controls and we have it
set up here with our class name using
our template string and our string
interpolation so we can go ahead and
save that we'll come back down here and
run electron again and so now we have
start and stop and we're gonna come in
here and actually collapse it collapse
this and now you can see we have our
space between start and stop there we go
and so now using this scope CSS we can
basically create CSS for our individual
components and we don't have to worry
about the CSS for one component
conflicting with the CSS for another
it just like any other desktop
application configuring the menu bar and
an electron application is extremely
important
now the starter electron application
actually comes complete with a starter
menu featuring many of the common
application commands however in our case
we're going to replace this standard
menu with a custom menu that's been
specifically tailored for the timer
application now the timer menu is not
going to be anywhere near as fully
complete as the starter menu it'll show
how we can use commands to perform
whatever operations we need to perform
in the application now when building
that building out full menus you can
create as many commands and sub menus as
you would like to perform whatever the
operations are that are needed for the
application also we can register
accelerators to provide hot key support
for our application as well so to work
with the menuing api there's two primary
classes menu and menu item we're going
to use these for creating menus as well
as the items that go in those menus now
five kinds of menu items are supported
out-of-the-box the normal menu item
which is kind of kind of think of like
some text that you click on a separator
for logically dividing a menu into parts
a sub menu which then can of course can
contain additional menu items the
checkbox as well as a radio button as
mentioned before accelerators can be
configured for all of these menu items
and finally we have the menu object and
it's got two really useful static
functions properties you can actually
build a menu from a template which is
what we're gonna do so you'll define the
whole menu using an object literal and
then you can also set the application
menu this is the actual function that
replaces the default menu with the new
application menu that we desire to use
the one tricky part to working with the
menu with electron is how to actually
communicate from the menu to the actual
web page where our components are the
actual menu itself runs on the main
electron process for our application
while the individual windows actually
run on their own renderer processes in
order to actually allow them to
communicate we're gonna have to do inter
process communication and that's where
the IPC renderer object comes into play
it's going to allow us to asynchronously
communicate from that main process where
the menu is to the renderer process
where the webpage is running now the way
this works of the is that the webpage
read
registers an event handler to listen for
IPC events then the main process sends
events to the webpage in the case of our
demo application we're gonna wire up a
start timer and stop timer events and
they're going to be registered with the
component did mount in component will
unmount event handlers of the timer app
so basically when the component mounts
we're going to register the event
handlers and then when the component
unmount we're going to unregister those
event handlers so when you click on
those menu items it's basically going to
fire off those events and then our timer
app will be able to respond to it so
let's talk about electron processes
basically the main process is the
electron application itself each window
is a separate renderer process and is
accessible through inter process
communication from the main process also
these renderer processes can communicate
back to the main process via IPC as well
now because the main menu runs on the
main process it has to use this inter
process communication in order to
communicate with the renderer process
and the reason we have all these
processes is because javascript itself
is single threaded therefore we need a
process to basically run each instance
of JavaScript that comprises our
electron application if we only had one
instance of JavaScript running we can
run into all sorts of problems in our
application by each window via its
renderer process and the main process
having its own JavaScript thread the
application is able to run more smoothly
so let's take a look at how to configure
the menu bar so let's go ahead and add a
menu now a customize menu to our
electron application now our menus not
going to be as big and sophisticated as
the actual starter one what we do want
to do is actually go ahead and set up a
start and stop timer menu option and
then be able to actually trigger the
start and stop action on our timer app
component so to do this the first thing
we're going to do is actually open up
our main TS file this is where we're
actually going to be pulling in the code
to actually work with the menu so we're
going to come up here to the top and so
we'll make a couple of changes here to
our code so first of all we're going to
switch this const electron actually
we're going to we're going to switch it
over to the es2015 module format so
we'll actually coming here and change
to an import and then instead of
actually importing all of electron what
we're going to do is we are going to say
import from and then we're going to come
into here and we're going to pull out
certain things so we're going to pull
out app we're going to pull out the
browser window and then we're going to
go ahead and pull out the menu so now we
can work selectively with these
different objects off of the actual
electron object itself
down here for our app we're just gonna
say app but now so we don't have a
variable named collision we're actually
going to change this to be my app like
this and then we can also benefit some
from some of the strong typing features
of typescript you know go ahead and
define this as a type of electron dot
app and then we can put our semicolon in
there like that so now we actually have
an a my app variable because we're
loading browser window here using this
destructuring type mechanism with import
we can actually completely get rid of
this constant we don't need that anymore
we'll keep the main when you the main
window variable because that's that
basically our handle back to the main
window and then we'll scroll down to
here and we'll go ahead and set up our
menu so we're going to be using the
template approach to creating our menus
so we're gonna say Const template and we
can actually give this a type if we want
we'll say type any and we're actually
gonna set this up as an array and inside
the array we'll have an object and first
we're gonna go ahead and set up a label
here called timer there we go then we're
going to go ahead and configure
ourselves a submenu this submenu will
actually point to an array and then our
first submenu item is going to have
label and it's going to be called start
so to actually start our timer then
we're going to go ahead and set up an
accelerator
and Marissa command or control + T so
we'll just choose that as our hotkey
then we're going to actually wire up the
handler for actually running some code
when you actually collect them click the
menu item
so we'll do click and then we're gonna
have item and then we'll have the actual
focused window this is the window that
currently has the focus in the
application this is the actual window
that we intend to start and stop the
timer on
so we'll say focused window dot web
contents and then we're going to send it
a message this is that inter-process
communication so we'll send start timer
so we're gonna have to basically wire up
our focused window to know how to
respond to the start timer event very
good now we can actually come in here
and wire up our stop main sub menu item
so we'll just simply copy start here and
we'll paste that and then we're gonna
change this to stop and then our
accelerator for this will just go with Y
since Y is right next to T and then
we're gonna send the stop timer event so
we'll go ahead and save that so now
we've set up our little menu for our
timer application there's one last thing
we actually have to do to kind of
complete this we have to take into
account that our application could be
running on other operating systems other
than Windows we have to take into
account working with other operating
systems and the Mac menuing system is a
little bit different it's got more
system menu types of things built into
the actual menu bar for applications so
let's go ahead and and copy over some
code that will take care of that for us
so this code right here I basically got
off the electron website and it just has
the basic standard services menu for the
four individual applications so we're
simply just going to push this on here
like this and then down here to complete
this
we'll go ahead and build our menu from
the templates we'll say constant menu
menu build from template and then we'll
pass in our template and then we'll say
menu dot set application menu and then
we'll pass in our menu there we go so
now we have our menu setup but we have
one more thing we have to do we actually
have to wire up our timer app component
to actually respond to the actual inter
process communication that we're going
to be sending across start timer and
stop timer so let's go ahead and scroll
up here to our timer app and we're going
to come down here and we're actually
going to set up two component lifecycle
events the first one will be a component
did mount and the second one will be a
component will unmount we can basically
use component did mount to register an
event handler for the inter process
communication and then component will
unmount we can use to unregister that
event handler now in order for that to
work we're actually going to have to
scroll up to the top here and we're
gonna have to import the IPC renderer
object from electron
there we go and we'll simply copy that
right there and we're simply going to
come into here and say IPC render on and
then we'll say start - timer then we're
simply going to have it run the start
timer function that we've already
configured in the constructor without
bind so we'll copy that paste there and
we'll stop our timer with that as well
so stop and then we're simply going to
copy this down to here I'll make sure we
get rid of our T there get rid of that T
and then get rid of the T here and then
for this we're going to actually
unregister the event listener using the
remove listener function there we go and
then once again we'll say remove
listener so we'll go ahead and save that
we'll come back down here we should be
able to run our electron application now
and so now we have start and stop
buttons work there we have our timer
menu I can do start I can say stop I can
also use my keyboard shortcuts my
accelerators start and stop so now we
have full keyboard support and notice
that when you actually start it from up
here the start button here gets disabled
because we're using components and we're
actually basing all of our UI stuff off
of these properties passed down through
the components even though we didn't
click the start button because the timer
was actually turned on through the
properties the disabled feature of the
start button was activated no matter how
the timer itself was actually started so
working with the menu is actually pretty
simple really the hardest part is just
understanding the inter process
communication between the actual main
process where the menu is and then
actually communicating with the window
that you act
want to do the operation on once you
master that building menus with electron
is pretty easy now debugging electron
applications can be a little bit tricky
we really have two different parts that
can be debugged we have the main process
as well as the renderer processes now
the main process is just a standard
node.js application and we can in debug
that using something called node
inspector a renderer processes though
are the actual web pages and so to debug
those we're going to use the usual
chrome developer tools available on each
of those pages now in order to debug the
main process we're going to have to
recompile electron to support debugging
in order to do this we're gonna have to
install the node Gipp package however
the node Gipp package requires certain
build tools to be present on your
machine we're running all of these
demonstrations on windows so we have
Visual Studio installed but if you were
gonna do this on Mac or Linux you'd have
to make sure that you had access to a
C++ compiler as well as a make tool for
the case of a Mac you can you could
install Xcode and then for Linux you can
install GCC and make additionally no
chip requires Python to be installed so
you'll need version 2.7 series in order
for this to work there are some
alternate configurations you can do and
if you visit the node Gipp site on
github you can read about those now once
the build tools are actually installed
once you have Visual Studio installed
and you have python then you can go
ahead and install no chip in node
inspector locally now electron needs to
be to be rebuilt
which we'll demonstrate and then the
node inspector is launched once known
inspector is launched you can actually
open up the node inspector window by
visiting the HTTP colon slash slash 1
2700 dot 1 colon 8080 slash debug and
then you can read the rest of the URL
there listed the actual node inspector
uses Chrome's debugging tools to
actually allow you to debug node
programs once you have those tools
opened up in the web browser then you
can go ahead and run your electron
application in this case because we're
gonna be running our electron
application from our root folder we're
gonna say electron then we're gonna turn
on the debug flag and that debug - break
means to set a breakpoint at the very
first line of executable code we're
gonna tell it to point at port number 58
58 and then that dot just means run the
actual program from our local folder
we're actually
executing electron from now most of the
common chrome developer tools are
available through node inspector you
have to be careful though don't try to
inspect the process object this is known
to cause issues where electron will
basically crash finally all those source
maps that we produce from typescript all
of those work so you can actually view
the typescript code and set your
breakpoints directly in there and that
will map directly back to the JavaScript
code which is actually being executed
now to debug the renderer process is a
little bit different we don't have to
actually recompile electron to do this
at all always to simply do is tell the
window that we want to look at to open
up its development tools now by default
in the sample application it actually
opens up those dev tools automatically
when the application runs however when
you're developing your application you
may not want to have those tools always
open up so it's advisable to actually
set up a menu item or some other
mechanism by which you can actually
launch those dev tools when you need
them now all of the usual developer
tools that you would find with a
traditional web application those are
all available here I mean after all you
are running chrome basically a lot of
developers like to make use of the
various chrome extensions that exist for
the various UI frameworks and libraries
react and angular definitely have their
own sets of tools as well as others do
you can actually use these tools when
debugging the UI portion of the
application electron does not support
all the Chrome extensions that exists
but you can actually see a list of the
ones that they do at their website so to
use these extensions we actually going
to have to run a little bit of code but
this code is gonna have to run after the
ready event of the application has been
fired there's basically two ways in
which we can load up extensions we can
either use the direct API of electron or
we can use something called the electron
dev tools installer package if you want
to use the actual API of electron it's
available through the browser window dot
ad dev tools extension a static function
property and to that you're actually
gonna be passing it the path to the
extension on your local system it's a
little bit more work the electron dev
tools installer package actually makes
it a lot easier in order to actually use
ad dev tools extension you will have to
make sure that the extension itself is
installed in Chrome ahead of time so
just open up a regular Chrome browser on
your machine go and find the extension
that you want and then install it then
you'll actually have to go find the path
to the extension which I'll demonstrate
here shortly and then from that path you
can load up the extension the installer
package
is much easier to work with it will
actually go and download and load up the
extension developer tools for you as
part of our demonstration make sure that
you're using electron version 1.2 point
1 or later in order to use the react dev
tools which is the ones we're gonna
actually load up there is a much newer
1.3 series of electron out there the
reason we're using one point two point
one is that it safely compiles on my
Windows installation and so for all the
things that we're demonstrating here
having it compile on my Windows
installation is important if we want to
be able to do the debugging not so much
of the renderer but of the main process
so let's take a quick look at debugging
electron applications so now that we
have a basic electronic a ssin up and
running we've taken a look at how to
work with components how to integrate
some CSS as well as how to use the
menuing system let's go ahead and talk
about how to debug an electron
application now it's actually not that
difficult but the thing we have to keep
in mind is that we actually have two
parts to the application we have the
node part and so for the node part we're
going to use the traditional node
debugging tool called node inspector and
then we have the client part and for the
client part that's actually a web page
so we can use the standard chrome
developer tools but we're also going to
take a look at how we can incorporate
the react Chrome extension for actually
doing our debugging so the first thing
we're going to have to do to actually
make this work is we're going to have to
install two packages so I'm gonna say
npm i - d node - chip and then node -
inspector so this is going to install
these two as development dependencies
and we're going to use them for our
debugging of the node part of this this
is also called the main process now what
note chip is going to do for us it's
basically going to recompile the
elektron application in debug mode and
the node inspector will be used as the
actual debugging tool so that we can set
breakpoints and watches and observe the
console things like that
great now that we have those two things
installed we actually need to go ahead
and begin the process of actually
building this thing now to do this if
you actually go to the elektron website
we'll go ahead and load up our browser
here so we go to electron atom Daioh if
you go under the docs here you're gonna
see where they have some instructions on
how to debug the main process now the in
the instructions in here basically work
on a Linux or Mac environment so what
I've done is I've taken these commands
and I've actually adapted them to work
with Windows so let's come into here and
we're going to create a new file called
debug
debug dot back for this debug bat we're
gonna copy in some code so we're gonna
paste that in there we'll actually go
ahead and collapse this down on the side
and let's turn on the word rap and I'll
tell you what's going on here so
basically we're going to use node pre
Gipp and what it's going to do it's
going to download the atom shell and
basically rebuild it so that we have the
necessary debugging symbols then here
it's going to do the same thing again
but this time hook in the VA profiler so
that it can work with with with node
inspector for doing the profiling parts
of our debugging process then we have
this set electron run as node this is
actually going to set it up so that we
can actually debug it with node
inspector now you have to be careful
here once you set this environment
variable to true if you try to run NPM
start without turning it off again the
the actual electronic a ssin will not
run
you actually can only set it to this
environment variable like this when
you're debugging with node inspector but
when you don't want to debug with node
inspector you have to basically turn
this off again otherwise if you just try
to run it as normal it will crash and
then finally we're gonna fire up node
inspector itself so we're gonna come
down here we'll save our bat file now in
order for all of this to work by the way
you have to have the prerequisites
installed since we're on Windows make
sure you've got Visual Studio with the
C++ compiler you can use the community
edition you don't have to actually use
the paid for version but you do need
that C++ compiler and you're also going
to need Python the 2.7 series not the
not the version 3 series so we'll come
into here and we're gonna actually run
our debug bat and now this will take a
little bit of time to run it's gonna be
downloading some things doing some
compiling and processing but when it's
all said and done we should have node
inspector up and running in terms of the
server process then we'll have to launch
the actual web browser to load up node
inspector for actually doing the
debugging
okay great so now we have note inspector
or running behind the scenes now we need
to actually open this up with our web
browser to do that we'll come back over
here to our instructions and then down
here you can actually see the URL for
loading up note inspector in the actual
web browser so we'll just copy that and
we'll paste that up in here into our
address bar and so now we should see
note inspector a load up now we have it
actually started running our electron
application yet so there's nothing to
debug we're gonna come over here and
actually run our electron application so
here's the command to start it the
important part is this debug break this
is actually going to set a breakpoint on
the first executable line so we'll go
ahead and copy that right there we'll
jump over to here we're gonna open up
another window and we'll say node
modules back slash bin back slash
electron we'll paste in our flag and
then we'll start it from the current
folder we'll hit enter now you'll notice
it'll wait here because our debugger has
has a breakpoint on the first line we'll
come back over here to note inspector
and reload it and we'll give it a second
here and then we're actually going to
have our break point here which is
excellent so we'll just come up here and
actually collapse all of that code right
there and we'll go ahead and run this
and there's our actual application
perfect so let's come into our main TS
file here and then inside of here what
we're gonna do is we'll actually set a
breakpoint let's do it right here on our
Start menu command so we'll do our
focused window web contents and start
timer and then we'll come back over to
here we'll go to timer and we'll do
start and then you notice it didn't
start but we have a breakpoint being hit
now you can only actually debug stuff
here that's actually in the main process
don't try to debug any of the
Oh nents or anything like that you can't
debug that here on the inside of node
inspector if you want to think of it on
the server side in terms of like a
traditional web app you can't actually
do that with inside of node inspector
for that we're going to use the
client-side debugging tools but for
anything that's part of this main
process and any files that's included by
main you can actually do the breakpoints
you can do watch expressions you can
look at the call stack all types of
stuff and you can debug this part of the
application but the key is you've got to
have a debug build and for that you need
some type of C++ compiler and you need
Python installed and then of course
installed no chip and node inspector so
now that we can debug the the main
process side how do we actually work
with the with the actual web page side
of it the actual UI stuff that we've
been working on with react so we've
already seen the actual chrome debugger
tools and stuff earlier so we already
know that we can debug things that way
but one additional cool thing that we
can do is we can actually use some of
the extensions in chrome now in order
for this to work the first thing you're
gonna have to do is actually make sure
that you have the react developer
extension installed so I'm going to go
ahead and close up note inspector here
and I'm gonna come under to my my my
menu here I'm gonna go under more tools
and I'm gonna go to extensions now down
here you can see I have a bunch of
different tools here installed but the
one that we care about right now is the
actual react developer tools so you need
to make sure you have this installed to
do what we're going to do next and we're
actually going to set it up so that the
react developer tools will actually show
up in the developer tools for debugging
our application on the client side or in
the web page itself so now that I
actually have that installed what I'm
going to do is I'm actually gonna close
my window here and I'm gonna close our
application go ahead and close the
program
we don't want to search for a problem we
know what the issue is we're basically
killing it in the middle of its
debugging so I'm going to come back over
here to window 2 and I'm going to go
ahead and kill note inspector there we
go and and so what we're gonna do now is
we're gonna add a little bit of code
into our program to preload some things
so now what we're gonna do is we're
gonna open up our main TS here and
inside of our create window we're gonna
paste this piece of code now the reason
we're pasting it inside of create window
is this code has to run after the ready
event for the application has been fired
so we'll go ahead and paste this code
here and what this is gonna do is
actually load up our extension now you
might be wondering where did I get this
path from so first of all all Chrome
extensions are going to be installed
inside of your app data folder inside of
extensions the next thing is where did I
actually get this value from so if you
actually load Chrome back up and go back
to your extensions so more tools
extensions if you turn your extensions
to developer mode it'll actually give
you additional information it'll give
you this ID value so if I uncheck
developer mode notice the ID value goes
away but if I have developer mode
checked and I scroll back down to my
react tools you see we actually have
that ID value right here so using that
ID value you find the right extension
folder and then inside of that folder
you'll actually you'll actually see this
version number here that you need in
order to load it up now
technically you only have to do this one
time if you add it multiple times it's
fine it doesn't give you an error or
anything it doesn't blow up but
technically once you add it the first
time it should be there for all
subsequent uses so I'm gonna go ahead
and save that I'm going to say NPM start
and this will now fire up for me the
problem I ran into here is that that
that environment variable is still set
that we talked about from the actual
server-side debugging so let's go ahead
and just kill this command window and
we'll open up a new one and we'll say
NPM
start so now I'll get my actual
application and I don't have any
developer tools here so and I didn't
actually leave a menu item to turn them
on which actually would be a pretty
smart thing to do but for our purposes
I'll just close this and then I'm going
to uncomment my dev tools there and so
now when I started up they'll just be
automatically opened so we'll fire it up
again
there's our dev tools and now let's go
ahead and make the sake of the full
screen and we'll come over here and
you'll see there's our react developer
tools so if I click on those it'll
connect to react and you have access to
the full reactive lr / tools inside of
your application which is actually
pretty cool so this is very helpful for
actually doing your development now this
is one way of loading up the tools and
it definitely works but but there's
actually an even easier way using
another package that's available now
this package if we go back to Visual
Studio code and go to our package JSON
this package we actually installed at
the outset the elektron dev tools
installer so what I'm gonna do is I'm
gonna come into here and I'm actually
gonna comment out this piece of code and
I'm gonna add some code that will use
that dev tools installer to actually
install the react extension for us now
this thing will actually go out and
download it for you and everything it's
really it's a full-service type of
operation and it actually works with
more than just react if you're using
things like angular and stuff like that
it will download Batarang and other
extension tools related to other UI
frameworks you might be making use of so
here we have our require and let's
actually collapse it so we can kind of
see it all in one line so we're actually
going to require in the package we're
going to bring in this excel install
extension function which is actually the
default export we're gonna specifically
specify the react developer tools this
will actually install the extension and
give us some kind of output in terms of
the result of the actual installation
process
so let's save that and then come down
here and we'll kill our development
process here and it will actually
restart this npm start there we go and
now if we come into here you'll see
there are our react developer tools and
of course they were already installed
previously but you could use either
approach for actually installing these
but there you go so now you have the
ability to do the node or main process
side of debugging in terms of debugging
your actual main process of your
electron app and you also have the
ability to do the client-side or the UI
debugging of the web application part
and then even utilizing a tool like the
react extensions to actually debug the
react portion of this as well so in
conclusion electron is a cross-platform
desktop application framework built on
nodejs and chromium
it's totally cross-platform and then it
runs on Windows like Windows Mac and
Linux applications are built using HTML
CSS and JavaScript they have access to
all the local system resources and can
tie into the operating systems
underlying UI system finally the
application applications can be
distributed through popular distribution
channels such as the Windows Store