Build your first native desktop app (MacOS, Windows, Linux) in 100 seconds with Electron JS. https://fireship.io/tags/electron/

Electron Docs https://www.electronjs.org/


#100SecondsOfCode #Electron #JS

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:21:44.945Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
895dd89c-9a15-440b-8606-781346862ddb
e4c6d17f4484a07dd6a7be041aa4f41c75f05f1017a4259e9aeb42156a59ab97
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Electron.
Build native desktop apps for platforms like macOS and Windows using nothing but HTML, CSS, and JavaScript.
It's a tool behind many popular apps that you might be using today, like Versus Code, Slack, and Discord, just to name a few.
On the front end, you build UIs just like you would for a browser based web ABAP, and you can bring along your favorite frameworks.
But in Electron, you also have access to Node.
Js, and that means you can access low level APIs that you don't normally have access to in a sandbox It's browser, like the file system.
Electron combines the front end and back end technologies and provides a bunch of other tools to work with native menus, the system tray, and so on.
Let's go ahead and build a desktop app now.
Run npm init in an empty directory, then install Electron, then create a main dot JS file and set that as the main entry point into your Every Electron app has exactly one main process running.
It manages the life cycle of your app and opens the windows that the end user will see.
Each window is its own independent render process running with the Chromium web browser.
When your main app is ready, you can start a new render process by instantiating a browser No.
Then tell the window to load a regular HTML file.
It will render the HTML, CSS, and JavaScript, but do so in a native window and give you access to low level APIs to build a true desktop experience.
Create an index HTML file and put whatever code you want inside of it, but notice how I'm accessing Node Globals directly in my HTML.
That's not something you can do in a normal web browser.
And Electron gives you control over the operating system UI as well.
For example, add your own icon and controls to the system tray with just a few lines code.
Now, after you build something awesome, you can package it for multiple operating systems from a single code base.
Tools like Electron Packager or Forage can handle the entire distribution Asses for you with a single command.
This has been Electron in 100 seconds.
Stay tuned for a full Electron project in a few days, and make sure to hit the like button if you want to see more short videos like this.
Thanks for watching and I will see you in the next one.

Speaker 0: Electron. Build native desktop apps for platforms like macOS and Windows using nothing but HTML, CSS, and JavaScript. It's a tool behind many popular apps that you might be using today, like Versus Code, Slack, and Discord, just to name a few. On the front end, you build UIs just like you would for a browser based web ABAP, and you can bring along your favorite frameworks. But in Electron, you also have access to Node.

Js, and that means you can access low level APIs that you don't normally have access to in a sandbox It's browser, like the file system. Electron combines the front end and back end technologies and provides a bunch of other tools to work with native menus, the system tray, and so on. Let's go ahead and build a desktop app now. Run npm init in an empty directory, then install Electron, then create a main dot JS file and set that as the main entry point into your Every Electron app has exactly one main process running. It manages the life cycle of your app and opens the windows that the end user will see.

Each window is its own independent render process running with the Chromium web browser. When your main app is ready, you can start a new render process by instantiating a browser No. Then tell the window to load a regular HTML file. It will render the HTML, CSS, and JavaScript, but do so in a native window and give you access to low level APIs to build a true desktop experience. Create an index HTML file and put whatever code you want inside of it, but notice how I'm accessing Node Globals directly in my HTML.

That's not something you can do in a normal web browser. And Electron gives you control over the operating system UI as well. For example, add your own icon and controls to the system tray with just a few lines code. Now, after you build something awesome, you can package it for multiple operating systems from a single code base. Tools like Electron Packager or Forage can handle the entire distribution Asses for you with a single command.

This has been Electron in 100 seconds. Stay tuned for a full Electron project in a few days, and make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
Electron. Build native desktop apps for platforms like macOS and Windows using nothing but HTML, CSS, and JavaScript. It's a tool behind many popular apps that you might be using today, like Versus Code, Slack, and Discord, just to name a few. On the front end, you build UIs just like you would for a browser based web ABAP, and you can bring along your favorite frameworks.
architecture
But in Electron, you also have access to Node. Js, and that means you can access low level APIs that you don't normally have access to in a sandbox It's browser, like the file system. Electron combines the front end and back end technologies and provides a bunch of other tools to work with native menus, the system tray, and so on. Let's go ahead and build a desktop app now. Run npm init in an empty directory, then install Electron, then create a main dot JS file and set that as the main entry point into your Every Electron app has exactly one main process running.
It manages the life cycle of your app and opens the windows that the end user will see. Each window is its own independent render process running with the Chromium web browser. When your main app is ready, you can start a new render process by instantiating a browser No.
software
microsoft
Then tell the window to load a regular HTML file. It will render the HTML, CSS, and JavaScript, but do so in a native window and give you access to low level APIs to build a true desktop experience. Create an index HTML file and put whatever code you want inside of it, but notice how I'm accessing Node Globals directly in my HTML.
That's not something you can do in a normal web browser. And Electron gives you control over the operating system UI as well. For example, add your own icon and controls to the system tray with just a few lines code. Now, after you build something awesome, you can package it for multiple operating systems from a single code base.
electronics
Tools like Electron Packager or Forage can handle the entire distribution Asses for you with a single command.
This has been Electron in 100 seconds. Stay tuned for a full Electron project in a few days, and make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
particle physics
atomic physics
Electron. Build native desktop apps for platforms like macOS and Windows using nothing but HTML, CSS, and JavaScript. It's a tool behind many popular apps that you might be using today, like Versus Code, Slack, and Discord, just to name a few. On the front end, you build UIs just like you would for a browser based web ABAP, and you can bring along your favorite frameworks. But in Electron, you also have access to Node. Js, and that means you can access low level APIs that you don't normally have access to in a sandbox It's browser, like the file system. Electron combines the front end and back end technologies and provides a bunch of other tools to work with native menus, the system tray, and so on. Let's go ahead and build a desktop app now. Run npm init in an empty directory, then install Electron, then create a main dot JS file and set that as the main entry point into your Every Electron app has exactly one main process running. It manages the life cycle of your app and opens the windows that the end user will see. Each window is its own independent render process running with the Chromium web browser. When your main app is ready, you can start a new render process by instantiating a browser No. Then tell the window to load a regular HTML file. It will render the HTML, CSS, and JavaScript, but do so in a native window and give you access to low level APIs to build a true desktop experience. Create an index HTML file and put whatever code you want inside of it, but notice how I'm accessing Node Globals directly in my HTML. That's not something you can do in a normal web browser. And Electron gives you control over the operating system UI as well. For example, add your own icon and controls to the system tray with just a few lines code. Now, after you build something awesome, you can package it for multiple operating systems from a single code base. Tools like Electron Packager or Forage can handle the entire distribution Asses for you with a single command. This has been Electron in 100 seconds. Stay tuned for a full Electron project in a few days, and make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
Electron.
electron
Build
build
native
native
desktop
desktop
apps
apps
for
for
platforms
platforms
like
like
macOS
macos
and
and
Windows
windows
using
using
nothing
nothing
but
but
HTML,
html
CSS,
css
and
and
JavaScript.
javascript
It's
it's
a
a
tool
tool
behind
behind
many
many
popular
popular
apps
apps
that
that
you
you
might
might
be
be
using
using
today,
today
like
like
Versus
versus
Code,
code
Slack,
slack
and
and
Discord,
discord
just
just
to
to
name
name
a
a
few.
few
On
on
the
the
front
front
end,
end
you
you
build
build
UIs
uis
just
just
like
like
you
you
would
would
for
for
a
a
browser
browser
based
based
web
web
ABAP,
abap
and
and
you
you
can
can
bring
bring
along
along
your
your
favorite
favorite
frameworks.
frameworks
But
but
in
in
Electron,
electron
you
you
also
also
have
have
access
access
to
to
Node.
node
Js,
js
and
and
that
that
means
means
you
you
can
can
access
access
low
low
level
level
APIs
apis
that
that
you
you
don't
don't
normally
normally
have
have
access
access
to
to
in
in
a
a
sandbox
sandbox
It's
it's
browser,
browser
like
like
the
the
file
file
system.
system
Electron
electron
combines
combines
the
the
front
front
end
end
and
and
back
back
end
end
technologies
technologies
and
and
provides
provides
a
a
bunch
bunch
of
of
other
other
tools
tools
to
to
work
work
with
with
native
native
menus,
menus
the
the
system
system
tray,
tray
and
and
so
so
on.
on
Let's
let's
go
go
ahead
ahead
and
and
build
build
a
a
desktop
desktop
app
app
now.
now
Run
run
npm
npm
init
init
in
in
an
an
empty
empty
directory,
directory
then
then
install
install
Electron,
electron
then
then
create
create
a
a
main
main
dot
dot
JS
js
file
file
and
and
set
set
that
that
as
as
the
the
main
main
entry
entry
point
point
into
into
your
your
Every
every
Electron
electron
app
app
has
has
exactly
exactly
one
one
main
main
process
process
running.
running
It
it
manages
manages
the
the
life
life
cycle
cycle
of
of
your
your
app
app
and
and
opens
opens
the
the
windows
windows
that
that
the
the
end
end
user
user
will
will
see.
see
Each
each
window
window
is
is
its
its
own
own
independent
independent
render
render
process
process
running
running
with
with
the
the
Chromium
chromium
web
web
browser.
browser
When
when
your
your
main
main
app
app
is
is
ready,
ready
you
you
can
can
start
start
a
a
new
new
render
render
process
process
by
by
instantiating
instantiating
a
a
browser
browser
No.
no
Then
then
tell
tell
the
the
window
window
to
to
load
load
a
a
regular
regular
HTML
html
file.
file
It
it
will
will
render
render
the
the
HTML,
html
CSS,
css
and
and
JavaScript,
javascript
but
but
do
do
so
so
in
in
a
a
native
native
window
window
and
and
give
give
you
you
access
access
to
to
low
low
level
level
APIs
apis
to
to
build
build
a
a
true
true
desktop
desktop
experience.
experience
Create
create
an
an
index
index
HTML
html
file
file
and
and
put
put
whatever
whatever
code
code
you
you
want
want
inside
inside
of
of
it,
it
but
but
notice
notice
how
how
I'm
i'm
accessing
accessing
Node
node
Globals
globals
directly
directly
in
in
my
my
HTML.
html
That's
that's
not
not
something
something
you
you
can
can
do
do
in
in
a
a
normal
normal
web
web
browser.
browser
And
and
Electron
electron
gives
gives
you
you
control
control
over
over
the
the
operating
operating
system
system
UI
ui
as
as
well.
well
For
for
example,
example
add
add
your
your
own
own
icon
icon
and
and
controls
controls
to
to
the
the
system
system
tray
tray
with
with
just
just
a
a
few
few
lines
lines
code.
code
Now,
now
after
after
you
you
build
build
something
something
awesome,
awesome
you
you
can
can
package
package
it
it
for
for
multiple
multiple
operating
operating
systems
systems
from
from
a
a
single
single
code
code
base.
base
Tools
tools
like
like
Electron
electron
Packager
packager
or
or
Forage
forage
can
can
handle
handle
the
the
entire
entire
distribution
distribution
Asses
asses
for
for
you
you
with
with
a
a
single
single
command.
command
This
this
has
has
been
been
Electron
electron
in
in
100
100
seconds.
seconds
Stay
stay
tuned
tuned
for
for
a
a
full
full
Electron
electron
project
project
in
in
a
a
few
few
days,
days
and
and
make
make
sure
sure
to
to
hit
hit
the
the
like
like
button
button
if
if
you
you
want
want
to
to
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains the process of building native desktop apps like macOS and Windows using HTML, CSS, and JavaScript, as well as usingemail and denies. Electron combines the front end and back end technologies and provides tools for creating a true desktop experience, including access to denies and low-level APIs. Electron allows users to create a separate app and control the entire distribution for multiple operating systems. A full Electron project will be finished in a few days.
Electron JS in 100 Seconds
Electron. Build native desktop apps for platforms like macOS and Windows using nothing but HTML, CSS, and JavaScript. It's a tool behind many popular apps that you might be using today, like Versus Code, Slack, and Discord, just to name a few. On the front end, you build UIs just like you would for a browser based web ABAP, and you can bring along your favorite frameworks. But in Electron, you also have access to Node. Js, and that means you can access low level APIs that you don't normally have access to in a sandbox It's browser, like the file system. Electron combines the front end and back end technologies and provides a bunch of other tools to work with native menus, the system tray, and so on. Let's go ahead and build a desktop app now. Run npm init in an empty directory, then install Electron, then create a main dot JS file and set that as the main entry point into your Every Electron app has exactly one main process running. It manages the life cycle of your app and opens the windows that the end user will see. Each window is its own independent render process running with the Chromium web browser. When your main app is ready, you can start a new render process by instantiating a browser No. Then tell the window to load a regular HTML file. It will render the HTML, CSS, and JavaScript, but do so in a native window and give you access to low level APIs to build a true desktop experience. Create an index HTML file and put whatever code you want inside of it, but notice how I'm accessing Node Globals directly in my HTML. That's not something you can do in a normal web browser. And Electron gives you control over the operating system UI as well. For example, add your own icon and controls to the system tray with just a few lines code. Now, after you build something awesome, you can package it for multiple operating systems from a single code base. Tools like Electron Packager or Forage can handle the entire distribution Asses for you with a single command. This has been Electron in 100 seconds. Stay tuned for a full Electron project in a few days, and make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
The speaker explains the process of building native desktop apps like macOS and Windows using HTML, CSS, and JavaScript, as well as usingemail and denies. Electron combines the front end and back end technologies and provides tools for creating a true desktop experience, including access to denies and low-level APIs. Electron allows users to create a separate app and control the entire distribution for multiple operating systems. A full Electron project will be finished in a few days.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Electron JS in 100 Seconds 
        and a small summary : The speaker explains the process of building native desktop apps like macOS and Windows using HTML, CSS, and JavaScript, as well as usingemail and denies. Electron combines the front end and back end technologies and provides tools for creating a true desktop experience, including access to denies and low-level APIs. Electron allows users to create a separate app and control the entire distribution for multiple operating systems. A full Electron project will be finished in a few days.
        [/INST]
        
        Generate the video : Electron. Build native desktop apps for platforms like macOS and Windows using nothing but HTML, CSS, and JavaScript. It's a tool behind many popular apps that you might be using today, like Versus Code, Slack, and Discord, just to name a few. On the front end, you build UIs just like you would for a browser based web ABAP, and you can bring along your favorite frameworks. But in Electron, you also have access to Node. Js, and that means you can access low level APIs that you don't normally have access to in a sandbox It's browser, like the file system. Electron combines the front end and back end technologies and provides a bunch of other tools to work with native menus, the system tray, and so on. Let's go ahead and build a desktop app now. Run npm init in an empty directory, then install Electron, then create a main dot JS file and set that as the main entry point into your Every Electron app has exactly one main process running. It manages the life cycle of your app and opens the windows that the end user will see. Each window is its own independent render process running with the Chromium web browser. When your main app is ready, you can start a new render process by instantiating a browser No. Then tell the window to load a regular HTML file. It will render the HTML, CSS, and JavaScript, but do so in a native window and give you access to low level APIs to build a true desktop experience. Create an index HTML file and put whatever code you want inside of it, but notice how I'm accessing Node Globals directly in my HTML. That's not something you can do in a normal web browser. And Electron gives you control over the operating system UI as well. For example, add your own icon and controls to the system tray with just a few lines code. Now, after you build something awesome, you can package it for multiple operating systems from a single code base. Tools like Electron Packager or Forage can handle the entire distribution Asses for you with a single command. This has been Electron in 100 seconds. Stay tuned for a full Electron project in a few days, and make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the next one.
        