Electron Tutorial – Create Desktop App with HTML/CSS and JS

“If you can build a website, you can build a desktop app” – Electron official page

Designing GUI is one of the pain if you want to build a desktop application (Well, maybe not if you can live with the native UI provided like JButton, JFrame or Common WPF ) Designing webpage is way much easier with these day thanks to HTML5 and CSS3. Plus every web developers already familiar with Javascript. So why don’t we build our desktop application with these web technology? Yeah, here comes Electron!

Electron utilize Chromium browser and Node.js. You can do the UI design with HTML, CSS just like you did with web development and take care of the business logic with Javascript. Since these web technologies are not platform specific (For example, Google will look exactly the same when you open it on either Windows or Ubuntu), one big bonus is your app will be able to run cross-platform!!

However, when I first tried to use Electron, I found the official tutorial has provided many useful information but only if you already have some knowledge about Node.js (which is what I lack). So I decided to create a basic Electron tutorial for complete beginner like me 🙂 Below is a step by step electron tutorial video on how to create a simple desktop app and then turn an existing web page into a desktop application in 10 minutes.

Example code from the video above

const electron = require('electron');
const app = electron.app;

const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;

var mainWindow;
app.on('ready',function(){
  mainWindow = new BrowserWindow({width: 1024, height: 768,backgroundColor: '#2e2c29'});
  //mainWindow.loadURL('https://github.com');
   mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'test.html'),
    protocol: 'file:',
    slashes: true
  }));

});

Also, there is an Electron API demo app that you should check it out. This app contains all basic feature you need to know to build an app along with example code. Don’t miss it!

In the next video, I’m going to show you how to connect Electron to a database (MySQL) Check out our Youtube channel from link below to stay tune!

Electron official page: https://electron.atom.io/
Red Stapler Channel: http://www.youtube.com/c/RedStapler_channel