Cross-platform Desktop Apps development using HTML, CSS, JS with Electron

#codesquad Esinniobiwa Quareeb

Esinniobiwa Quareeb
(Dev Esin)
Myself
devesin1
devesin1
devesin1
devesin

What I do
FullStack Developer, Facilitator and
Technical Writer
 Founder, Author & Mobile Apps Developer
at Devplus Evolution
 Web Application Developer at Qingdom
Technologies
 Trainer & Instructor at FoundersHub
#CodeSquad

DO YOU HAVE AN IDEA OF:
HTML
CSS
JAVASCRIPT
Requirement
Passion and Fuel (e.g. Coffee)
Yea, you’re good to go
#CodeSquad

Developers
Meetup
http://bit.ly/codesquadmu
#CodeSquad

Desktop Apps
An application that runs stand
alone in a desktop or laptop
computer. Contrast with "Web-
based application," which
requires the Web browser to
run. The term may be used to
contrast desktop applications
with mobile applications that
run in smartphones and
tablets.

Let Electron do the hard work for you while
you sit back, watch and sip your coffee

Been in existence since 2013
Github released Atom-Shell, the core of its famous
open-source editor Atom, and renamed it
to Electron for the special occasion.
Electron, unlike other competitors in the category of
Node.js-based desktop applications, brings its own
twist to this already well-established market by
combining the power of Node.js (io.js until recent
releases) with the Chromium Engine to bring us the
best of both server and client-side JavaScript.
Imagine a world where we could build performant,
data-driven, cross-platform desktop applications
powered by not only the ever-growing repository of
NPM modules, but also the entire Bower registry to
fulfill all our client-side needs.

Cross-platform Desktop Apps development using HTML, CSS, JS with Electron

Electron
PROS:
• HTML + CSS + JS
• NodeJs + Chrome
• No deplyoment Dependencies

Electron
CONS:
• HTML + CSS + JS
• JavaScript
• Native Module in C/C++

Electron Features
• Rapid Development
• Themes
• Shared Code/UI
• Deployment + Silent Updates
• Native UX

Popular Apps that are built on electron

Let’s get started
Make sure that nodejs is installed as well as
electron. To check, open command line and type
node –v
electron –v
New to node, it is easy, just dive to
https://nodejs.org
And download the latest version of nodejs

Todo 1
• Make sure you’re in the desired directory, In my
own case, I use desktop, so fire up your
command line, navigate to the directory and it
should be something like this

Todo 2
• Create a directory where your project will
reside. On windows you can use mkdir
command like this
mkdir testapps
This will create a folder named testapps on
desktop.
Then go inside the directory using this
command:
cd testapps

So far you should have this
This means
• you’re on desktop
• You’ve successfully created a folder named testapps where your project will
reside and
• You’re inside the testapps folder to begin operation
NOTE: Please don’t close the command line, if you have to test your progress, just
minimize it and go back their later, it doesn’t have effect, it will just save you time to
have to navigate to the directory all over again

Set up your apps
Initialize your apps with this command
npm init
This will ask your information about
your apps and then create
package.json file inside folder testapps

You should have this, once you fill out
the entries:

Keynote 1
• Press enter key if what the command line
suggested is what you want to use, else type
your desired entries.
Example, npm suggested testapps as the name of
my project, since it is okay by me, I pressed enter
key.
You can later change the properties in
package.json file
• So far, package.json file has been created for us,
which contain information about the apps.
• Index.js is the entrypoint, that is where we will
define our project details and initialize electron

Install electron in your current
directory
using command line type:
npm install electron -save --dev --verbose
The command is pretty straight-forward.
--verbose is used to display information about
the installation process since it can take a while,
and you’d want to be sure it hasn’t stopped
working.

If everything worked fine, you should
have this:

Now in your testapps folder, you
should have a file and a folder
• Package.json file
• node_modules folder
You can play around with package.json file
Please don’t touch the node_modules folder
Fire up your text editor to create index.js file
Recall: That’s your project entry point

Put these codes in your index.js file
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var myWindow;
app.on('ready',function(){
myWindow = new BrowserWindow({width: 800,
height: 720});
//myWindow.loadURL('https://google.com');
myWindow.loadURL('file://' + __dirname +
'/index.html');
});

Explanation
• First, we include electron using the require
statement, then electron object returned by the line
1, then we create the app object, this will represent
our application and we can just be assigning values
to it later on.
• Second, we create application window, where the
app will be loaded using BrowserWindow object in
electron.
• Then define window object using
var mainWindow;
• Then, we bind the app with ready event when your
app is loaded

Explanation cont’d
• Then define properties for your myWindow object,
we can give it many properties
Height, Width, "use-content-size": false, resizable:
true, center: true and many more
You can load a webpage using loadURL and you can as
well load your index.html file
NOTE: To load the url, comment out
//mainWindow.loadURL('file://' + __dirname +
'/index.html');
And to load the index.html file, comment out
//mainWindow.loadURL('https://google.com');

Then, modify the package.json file, change the line
"test": "echo "Error: no test specified" && exit 1“
To
"start": "electron . "
This is to execute electron app at the specified
location

Create a sample index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Electron Apps</title>
</head>
<body>
<header>
<h1 style="text-align: center;">Electron Apps</h1>
</header>
<main>
<p style="text-align: center; font-size: 24px" > I am a sample web page, I
can be built using <b>HTML</b>, <b>CSS</b> and <b>JS</b>, packaged with
<b>Electron</b></p>
</main>
</body>
</html>

Then go to command line and type
npm start
This will execute the “ electron . ” Specified in
package.json
If everything works fine without errors, you will see
the interface in the next slide

To Package the Apps
Use electron-packager, In the command line type:
npm install electron-packager
This may take a while, after successful installation,
start electron-packager using
electron-packager .
The first command will install electron-packager
inside the node_modules folder
The second command will write executable of your
apps targetting the machine you’re building on

“electron-packager .” will build the
executable of your files targetting the
machine you’re working on.
The downside is that, your source code will be
displayed alongside the executable, in order to
make our source code hidden, use
electron-packager . --asar
--asar will create asar files for your source code so
that it won’t be visible to prying eyes

The folder structure should look like
this
“testapps-win32-x64” folder contain the executable file and
other accompanying files

For all platforms deployment
electron-packager . --all
This will deploy for all platforms, although this
may take a while

How To:
Executable
and
Installable

Electron packager build installable for
you
There are quite lots of apps out their to
create installer for your apps. Example
• Install Creator
• Install Forge
And many more
In this case, we’ll be using #Installforge

If you have an existing web project
that you want to turn desktop apps
• Just open commandline in the directory.
• Initialize npm and follow the procedure
• In no time you will get your executable file.
For more information and documentation,
https://electron.atom.io/

Thanks for Listening
Information about building installable
package for your apps will be made
available on request.
The apps created with electron, with
this slides and detailed information
are on this github repository
https://github.com/devesin/electron-typingmaster
devesindevesindevesin1

Screenshot of the typing practice apps

Cross-platform Desktop Apps development using HTML, CSS, JS with Electron

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Cross-platform Desktop Apps development using HTML, CSS, JS with Electron (20)

Recently uploaded (20)

Cross-platform Desktop Apps development using HTML, CSS, JS with Electron