Electron.js is a popular framework for building desktop applications using web technologies such as JavaScript, HTML, and CSS. Here are the steps to get started with building desktop applications using Electron.js:

  1. Install Node.js and npm (Node Package Manager) : Electron.js is built on top of Node.js. Therefore, we need to have Node.js installed on our machine. You can download them from the official Node.js website.
  2. Install Electron.js: After installing Node.js, we can install Electron.js by running the following command in our terminal:
npm install electron --save-dev

This will install the latest version of Electron.js as a development dependency in your project.

3. Create a project directory: Let us create a new directory for our Electron.js project and navigate to that directory in our terminal.

mkdir electron-prj
cd electron-prj

4. Initialize your project: Run the following command to initialize our project with a package.json file:

npm init -y

This will create a package.json file in your project directory.

5. Create the main.js file: Create a file named main.js in our project directory. This will be the entry point for our Electron.js application.

touch main.js

6. Add the following code to your main.js file:

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

This code sets up a basic Electron.js application with a window that loads an index.html file.

7. Create the index.html file: Create an index.html file in our project directory. This file will be loaded in the main window of our Electron.js application.

The folder structure should look like this:

8. Add the corresponding HTML, CSS, and JavaScript code to our index.html file.

9. Update the package.json file with the script below :

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },

10. Run our Electron.js application: Run the following command to start the Electron.js application:

npm start

This will launch our Electron.js application.

By Shabazz

Software Engineer, MCSD, Web developer & Angular specialist

Leave a Reply

Your email address will not be published. Required fields are marked *