Getting Started with ElectronJS: Installation and Setup

Introduction

ElectronJS has rapidly become a dominant player in the world of desktop application development. Its flexibility, performance, and support for web technologies make it a top choice for building cross-platform applications. Whether you are an experienced developer or just starting your journey, this guide will help you get started with ElectronJS by walking you through the installation and setup process.

Why ElectronJS is the Best in the Market

Before we dive into the installation and setup process, let’s understand why ElectronJS is considered the best in the market for building desktop applications.

• Cross-Platform Compatibility
• ElectronJS allows you to create applications that run on Windows, macOS, and Linux with a single codebase. This eliminates the need to develop separate apps for each platform.
• Web Technology Stack
• ElectronJS enables developers to leverage their web development skills, including HTML, CSS, and JavaScript, to build desktop applications. This significantly reduces the learning curve for web developers.
• Large and Active Community
• ElectronJS boasts a vast and active community of developers, which means a wealth of resources, libraries, and plugins are available for solving common challenges and extending your app’s functionality.
• Performance
• ElectronJS applications are known for their high performance, making them suitable for a wide range of applications, from text editors to media players.

Now, let’s get started with the installation and setup.

Installation

Before you can start building ElectronJS applications, you need to have Node.js and npm (Node Package Manager) installed on your computer. If you haven’t installed them yet, please follow these steps:

• Install Node.js and npm

1. Visit the Node.js official website and download the latest LTS (Long-Term Support) version for your operating system.
2. Run the installer and follow the installation wizard’s instructions.
3. Once the installation is complete, open your command prompt or terminal and verify that Node.js and npm are installed by running the following commands: node -v npm -v You should see the versions of Node.js and npm displayed in the terminal.

Now that you have Node.js and npm installed, you can proceed with ElectronJS installation.

• Installing ElectronJS To install ElectronJS, open your command prompt or terminal and run the following command:

  npm install -g electron

This command will install Electron globally on your system. You can verify the installation by checking the Electron version:

  electron -v

This command should display the installed Electron version.

Creating Your First ElectronJS App

Now that you have ElectronJS installed, let’s create a simple “Hello World” ElectronJS application to get you started.

• Setting Up Your Project

1. Create a new directory for your project and navigate to it using your terminal: mkdir my-electron-app cd my-electron-app
2. Inside your project directory, initialize a new npm package: npm init -y
3. Next, open your project folder in your favorite code editor.

• Creating the Main and Renderer Processes ElectronJS applications consist of two main processes: the main process and the renderer process. The main process controls the application’s lifecycle, while the renderer process is responsible for rendering the user interface. To create these processes, follow these steps:

1. Create a new JavaScript file called main.js in your project folder. This file will serve as the entry point for the main process.
2. Add the following code to main.js:

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('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
}) app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

3. Create another directory called public in your project folder, and inside it, create an HTML file named index.html.

4. Add a simple HTML structure to your index.html:

<!DOCTYPE html> 
<html>
   <head>
      <title>Hello ElectronJS</title>
   </head>
   <body>
      <h1>Hello ElectronJS!</h1>
   </body>
</html>

• Running Your ElectronJS App Now that you’ve set up the main and renderer processes, it’s time to run your ElectronJS app. In your project directory, run the following command in your terminal:

  electron main.js

This command will launch your ElectronJS application, and you should see a window displaying “Hello ElectronJS!”.

Congratulations! You’ve successfully created and run your first ElectronJS app. You can now start building more complex desktop applications using ElectronJS.

Conclusion

ElectronJS is a powerful framework for building cross-platform desktop applications using web technologies. With its ease of installation and setup, you can quickly start developing your own ElectronJS apps. Whether you’re a seasoned developer or just beginning your journey, ElectronJS is the best choice in the market for creating versatile and performant desktop applications. So, go ahead and unleash your creativity by developing your next ElectronJS app today!