Electron Js + jQuery + Bootstrap - Dev to Build

Electron Js + jQuery + Bootstrap - Dev to Build

In this article, we look into how to build a standalone desktop application with ElectronJs with jQuery and Bootstrap.

Whenever we need software, we go to a website and download a package, and after a couple of clicks, the software will be installed on your PC. As a web developer, you may not have experience in building a Desktop application.

In this article, we look into "how can we build a Desktop application with web technologies". If you Google the above-quoted text, the result will be Electron JS.

*What Is Electron.js? *

Electron's docs says, "Electron JS is a runtime framework that allows the user to create desktop-suite applications with HTML5, CSS, and JavaScript".

Here, you might be asking what is compiling our JS code we write. It combines the Chromium rendering engine and the Nodejs runtime. So, to build an Electron application, we need basic knowledge of Node.js as a prerequisite. And I assume here that you are familiar with JS. I think, this fair enough for the introduction. Let's move on to the topic.

Prerequisites

  • NodeJs & NPM : latest

  • A code editor

Electron Forge helps us to create the electron app in an easy way. To understand the basics, let's go in the traditional way.

Create a folder wherever you want in your pc. Open cmd, and run npm init. Please enter the details of the project for the generated package.json. Now, all we need is Electron JS. Electron JS is a dev dependency, and it should be installed globally. Install it with the help of npm install -g electron --only=dev. Once installed, the package.json should have Electron as a devDependency. (If not please add it manually.)

JSON

"devDependencies": {
    "electron": "^10.1.3"
  }

In Electron JS, there are two processes. One is the main process and the other is the renderer process. Let's check what docs say about Main and Renderer processes.

Main Process

In Electron, the process that runs package.json's main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. An Electron app always has one main process, but never more.

javascript nodejs electron jquery 3.0 desktop app

Bootstrap 5 Complete Course with Examples

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

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Electron Js + jQuery + Bootstrap - Dev to Build

In this article, we look into how to build a standalone desktop application with ElectronJs with jQuery and Bootstrap.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Best Electric Bikes and Scooters for Rental Business or Campus Facility

An ultimate guide to buying the best electric bikes/scooters for rental business or campus facility. It contains the list, prices, features, and specs.

How to start an electric scooter facility/fleet in a university campus/IT park

An ultimate guide on how to start an electric sooter/bike rental business or faility/fleet in a university campus/IT park and expert recommendations.

Electron From Scratch: Desktop Apps With JavaScript

Electron From Scratch: Build Desktop Apps With JavaScript. Create 3 useful desktop applications with web technologies using Electron. Learn how to build desktop apps with Electron. Use Vanilla JS & React with Electron. Work with local data as well as MongoDB Atlas database. Create and package 3 complete cross-platform applications