Quick Getting Started with ElectronJS

Quick Getting Started with ElectronJS

Quick Getting Started with ElectronJS .Here is a quick tutorial on getting started with Electron JS, the new way for creating native desktop application

Introduction

Here is a quick tutorial on getting started with Electron JS, the new way for creating native desktop applications!

You will learn how to set up a basic ElectronJS application!

Prerequisites

  1. Understanding of front-end web technologies (HTML, CSS, and JS) 📍
  2. Basic understanding of Node.js 👍
  3. Comfortability with working in the terminal or command line

Getting Started

According to Electron's Website, they define Electron as a way to *"build cross platform desktop apps with JavaScript, HTML, and CSS."*

  1. Understanding of front-end web technologies (HTML, CSS, and JS) 📍
  2. Basic understanding of Node.js 👍
  3. Comfortability with working in the terminal or command line
mkdir hello-world 

Then cd into the newly made directory

cd hello-world 

Now that we created the directory, we must create a package.json, where we store our project metadata such as title, version, packages we used, and more.

Open your favorite code editor to edit the project:

Create a new file called package.json, and copy and paste the sample package file:

{
  "name": "hello-world",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Installing ElectronJS through npm

To get started with ElectronJS, we will have to install Electron through Node Package Manager or npm.

npm install --save-dev electron 

This will get the necessary packages to work with Electron from the npm registry.

ElectronJS Development

We will need to create a JavaScript file called main.js in our project's root directory. Go ahead and create a new file called main.js in the root.

Paste in the following code for main.js:

This is the *```main.js```* code from the ElectronJS Guide

const { app, BrowserWindow } = require('electron')


// 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 win


function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })


  // and load the index.html of the app.
  win.loadFile('index.html')


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


  // Emitted when the window is closed.
  win.on('closed', () => {
    // 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.
    win = null
  })
}


// 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', () => {
  // On macOS 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', () => {
  // On macOS 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 (win === null) {
    createWindow()
  }
})


// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Now create an index.html file to display our web application's contents like a website.

Copy and paste the code:

<!DOCTYPE html>
<html>
&nbsp; <head>
&nbsp; &nbsp; <meta charset="UTF-8">
&nbsp; &nbsp; <title>Hello World!</title>
&nbsp; </head>
&nbsp; <body>
&nbsp; &nbsp; <h1>Hello World!</h1>
&nbsp; </body>
</html>

Running our application Checklist ✅

  • main.js
  • index.html
  • package.json

Once you have all of the files above 👆, you may run you Electron application!

npm start 

🎉🎈 Success!

Conclusion

Congrats 🎉 on getting started with Electron JS! Now you can create desktop applications of your own to show the world! You can add functionality and content to your application using the index.html file like you would with a website! Feel free to leave feedback using the comments below :)

Recommended Reading

☞ Build a REST API to manage users and roles using Firebase and Node.js

☞ How to Uninstall Npm Packages

☞ How to Send the Email Using the Gmail SMTP in Node.js

☞ Real-Time Chat App with Node.js, Express.js, and Socket.io

☞ Node js Express Upload File/Image Example

☞ Building A GraphQL API With Nodejs And MongoDB

☞ 4 Ways to Empty an Array in Node.js

☞ MongoDB Nodejs Tutorial with Examples

node-js javascript

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

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Top 7 Most Popular Node.js Frameworks You Should Know

Node.js is an open-source, cross-platform, runtime environment that allows developers to run JavaScript outside of a browser. In this post, you'll see top 7 of the most popular Node frameworks at this point in time (ranked from high to low by GitHub stars).

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

Node.js for Beginners - Learn Node.js from Scratch (Step by Step)

Node.js for Beginners - Learn Node.js from Scratch (Step by Step) - Learn the basics of Node.js. This Node.js tutorial will guide you step by step so that you will learn basics and theory of every part. Learn to use Node.js like a professional. You’ll learn: Basic Of Node, Modules, NPM In Node, Event, Email, Uploading File, Advance Of Node.

Hands on with Node.Js Streams | Examples & Approach

The practical implications of having Streams in Node.js are vast. Nodejs Streams are a great way to handle data chunks and uncomplicate development.