Easily Turn a WordPress Site Into a Desktop App

Everyone is eager to turn their WordPress site into a mobile app, and we offer two services, Reactor and AppPresser, to help you to do that. However, as an alternative (or in tandem!), a desktop app may provide a good user experience, so I’m here to walk you through turning your WordPress site into a desktop app.

We will be using Electron, an open source framework for turning web technologies into desktop apps for Mac, Windows and Linux. You may have heard of many desktop apps powered by Electron, including Atom Editor, Slack, Microsoft’s Visual Studio and the recently debuted WordPress.com app.

Electron is built and run with Node so you want to make sure you have Node installed. Electron is installed as a Node module. Once you have Node installed, fire up the command line!

Install dependencies

First, we need to install Electron and the packager modules globally.

$ npm install electron-prebuilt -g

$ npm install electron-packager -g

Create App Folder

Then we need to create a folder for the app…

$ mkdir app

$ cd app

Configure App

Next, we will run npm init to create the package.json file. We put configuration data for Electron in this file.

$ npm init

There will be a few configuration steps to go through; you can enter them in the command line or edit package.json directly. I prefer to skip and enter the file directly.

The package.json file will be located in the app folder. Open this file and you should see something like so:

{"name":"testing","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"ISC"}

We need to enter a few things in the configuration file. Under scripts, add a start script and enter "electron ." as the value. This will run Electron from the command line. Also, add dependencies for electron-packager and electron-prebuilt.

{
  "name": "WebDevStudios",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "electron-packager": "",
    "electron-prebuilt": ""
  }

}

App JavaScript File

If we tried to start the app now it’d give you an error saying it’s not an Electron app. Create an index.js in the app folder Electron will load this file when the app runs. This file is called in the package.json file under “main”. This file will contain the main JavaScript for Electron. It tells Electron what to do and how to display your app.

The first thing to do is to require Electron.
const electron = require('electron');

This const is to control app life
const app = electron.app;

Electron runs in a Chrome browser via Chromium. We create a const to access the browser to tell it what to display and to bridge the JavaScript with native OS code.
const BrowserWindow = electron.BrowserWindow;

Read through below to learn the required code; it should be self-explanatory.

'use strict';

const electron = require('electron');
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;
var url = 'http://webdevstudios.com/blog';

// Quit when all windows are closed.
app.on('window-all-closed', function(event) {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = create_window();
  load_window();

  // Emitted when the window is closed.
  mainWindow.on('closed', function(event) {
    mainWindow = null;
  });

});

// when you click the app dock icon to re-initilize window
app.on('activate', function() {
    if ( mainWindow == null ) {
        mainWindow = create_window();
        load_window();
        // Emitted when the window is closed.
        mainWindow.on('closed', function(event) {
          mainWindow = null;
        });

    }
});

// create a window function
function create_window() {
    return new BrowserWindow({
        width: 800,
        height: 600
    });
}

// load window function, loads the url into browser
function load_window() {
    mainWindow.loadURL(url);
}

Run App

Now that you have the index.js file filled in with code Electron needs to initialize you can run the following command. This will run your app. This all you need for Electron app development. In the next section, you’ll learn how to build the app project into a distributable app.

$ npm run start

Build App

To build the app we need to add a script to the package.json file for the electron-packager module. This build script will download the files to build an app for the platform you want to create a distributable app for. In our example we are building for OSX. Read more about the packager and how to build for other platforms.

{"name":"WebDevStudios","version":"1.0.0","description":"","main":"index.js","scripts":{"start":"electron .","build":"electron-packager .\/ WebDevStudios --platform=darwin --arch=x64 --version=0.36.7 --ignore=node_modules\/electron-*"},"author":"","license":"MIT","devDependencies":{"electron-packager":"","electron-prebuilt":""}}

After the build script is added run the following command and it will build the app and place it in the project folder. It’s a fully compiled app that you can share.

$ npm run build

Hello awesome!

Turning your WordPress site into a desktop app is not too difficult. There is even an easier way to do this but I think you should go through this tutorial and learn how Electron works then you can add native app features. You could even create a single page app that utilizes the WordPress Rest API. Read through the Electron documentation to add more options to your app. Comment below if you have any issues or questions!

Click here to download an example OS X app that displays the WebDevStudios blog.