Electron Build Desktop Apps HTML\CSS\JS | Getting Started 01

Video Tutorial

Overview

In this Tutorial Series we are going to explore Electron and How we can use web technologies for Cross-Platform Desktop Apps Development, So if you have never heard about electron that I seems a bit confusing for you since web technologies do work only on web, but electron allow use to use chromium and node js in order to achieve such things, So we are going to install electron and set up our working environment so we can start to build our app, in the series we are going to explain the API alongside a basic examples, make sure to watch the video tutorial for a detailed instructions.

Getting Started

Make sure to have a code editor, I’m using Visual Studio Code, also Node js and npm installed for you to get started.

Create a working Directory, mine i’m going to name it electron-app and put /dist /src /resources folders on it, so we are going to use it for structuring our app.

Now installing needed modules using npm, install electron

npm install electron --save

and install webpack and Laravel-mix for dependency management and assets compiling

npm install webpack --save-dev
npm install laravel-mix --save-dev

Now there is a standard code that will allow us to open a simple window using the BrowserWindow module from npm, so this is like the basic setup for electron in order to start a simple platform-independent window, this code is available under the start-guide code from electron docs.

const electron = require("electron");
// Module to control application life.
const app = electron.app;
const dialog = electron.dialog;

// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
const BrowserView = electron.BrowserView;

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

/* Loggin Errors On DOM Ready */
logErrors = [];

function logErr(err) {
    logErrors.push(err);
}

// 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.
let mainWindow;

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    // and load the index.html of the app.
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, "dist/index.html"),
            protocol: "file:",
            slashes: true
        })
    );

    // Open the DevTools.
    // mainWindow.webContents.openDevTools()

    // Emitted when the window is closed.
    mainWindow.on("closed", function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });

    //Export Main Window
    exports.mainWindow = mainWindow;
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", function() {
    // 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();
    }
});

app.on("activate", function() {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
        createWindow();
    }
});

So create a main.js under your Root Folder /electron-app and past the code above on it

So for displaying content on the window we need an HTML File for that, you can also use and link CSS normally in order to style your pages, so just create a basic HTML Document and place under the /dist folder.

Now For Running our Electron app and Compiling the Assets using Webpack and Laravel-mix we need to add scripts to our package.json file

{
    "name": "electron-app",
    "main": "main.js", ///< Specify Our Entry Point 
    "scripts": {
        "dev": "npm run development", ///< Compile Assets 
        "start": "electron .", ///< Run Electron App
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "dependencies": {
        "electron": "^1.7.10"
    },
    "devDependencies": {
        "webpack": "^3.10.0"
    }
}

make sure to setup your package.json as the one above, then just run the following command in order to start your application

npm run start

you should see a window pops up with your page being displayed on it, that’s it, so we have completed the first setup for our electron app, we will discuss more in-depth topics in the next tutorials.

No Comments Yet