Building Desktop Cross Platform Softwares using Electron By Github

Howdy,

Haven looked at the current waves of Javascript, it seems like every startup is pivoting to it and now you can even build desktop applications using the language of the web. And of course that is possible using the help of Electron built by Github. <Special Thanks Guys ;)>

What is Electron?

GitHub’s Electron framework (formerly known as Atom Shell) lets you write cross platform desktop application using HTML, CSS and JavaScript. It’s a variant of io.js run-time which is focused on desktop applications instead of web servers.

First off,

A few prerequisites:

  1. Node.js. If you don’t have it installed go ahead and install it.
  2. Git(The Command Shell is enough for this tutorial).
  3. A text editor. I recommend Sublime Text <It’s paid though> or Visual Studio Code <Of course it’s free>.
  4. And lastly your complete attention or may be 70% is enough ;).

Lets dive in,

Getting the Electron Quick Start

Open up you terminal and run the following commands.

[code]

# Clone the Quick Start repository
$ git clone https://github.com/atom/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies
$ npm install

[/code]

The first command will clone the quick start repo from Github, then the second command cd into the directory and lastly, the last command installs the node.js dependencies.

Looking at the Directory

Lets get a close look at the directory a bit before running our first desktop application.

Snip20160114_1You can see we have multiple files in the folder. Lets break it down a bit.

node_modules: This contains all the node.js dependencies installed when you ran npm install some few minutes ago.

index.html: Is the initial page loaded by your application. We will see that in a bit.

main.js: This is the file loaded by electron to serve your application.

package.json: Contains a json description of your application with dependencies list.

Running our First Application

Go back to your terminal and run:

[code]

npm start

[/code]

Snip20160114_2

This should successfully lunch your first electron application and voila. Congratulations that’s your first electron desktop application.

Do hang around later on for update on how to start hacking on your first electron application.

-Cheers 😉

I'm Aminu Bakori, software developer from Nigeria - A country in Africa. Yes Africa is not a country. I founded Payant.ng and some other amazing startups in Nigeria. If i'm not building softwares, you will see me hanging around the geeks at tech conferences. I love reading and teaching about software development.

4 comments On Building Desktop Cross Platform Softwares using Electron By Github

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

About Me

About Me

I'm Aminu Bakori, software developer from Nigeria - A country in Africa. Yes Africa is not a country. I founded Payant.ng and some other amazing startups in Nigeria. If i'm not building softwares, you will see me hanging around the geeks at tech conferences. I love reading and teaching about software development.

Social Profiles