Electron | Build cross-platform desktop apps with JavaScript

Electron | Build cross-platform desktop apps with JavaScript

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...

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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Cross-Platform App Developers

AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!

Cross Platform Mobile App Development Company in USA

AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!

Best Cross-Platform App Development Services Company in USA

AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!

Hire Top Cross-Platform Mobile App Developers in USA

AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!

Hire Dedicated Cross-Platform App Developers in USA & India

AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!