Setup Electron Js Project

• Setting up Electron.js involves a series of steps to create a new project, configure dependencies, and write your application code. Here's a step-by-step guide to help you set up Electron.js:

Step 1: Install Node.js and npm

• Download and install the latest version of Node.js from the official website (https://nodejs.org/).
• npm (Node Package Manager) comes bundled with Node.js, so you'll have it installed automatically.

Step 2: Create a New Project

• Open a terminal or command prompt.
• Navigate to the directory where you want to create your Electron.js project.
• Run the following command to initialize a new npm project:

    npm init -y

•   This creates a new `package.json` file for your project.

Step 3: Install Electron.js

• Run the following command to install Electron.js as a development dependency for your project:

    

    npm install electron --save-dev

• This installs the latest version of Electron.js and saves it as a devDependency in your `package.json` file.

Step 4: Create Project Structure

• Create the necessary project structure. For example, create a `src` and `public` directory to store your application code, and in the public directory, create an `index.html` file as the entry point for your Electron.js application.

Step 5: Configure `main` File

• Create a `main.js` file in the `src` directory. This file will serve as the main process file for your Electron.js application.
• 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('public/index.html');

    }

    app.whenReady().then(createWindow);

• This code sets up the basic Electron.js application window and loads the `index.html` file.

Step 6: Update `package.json`

• Modify the `"main"` field in your `package.json` file to point to your `main.js` file:

    "main": "src/main.js"

• Now. this is your project directory structure look like:

Step 7: Start Electron.js

• Run the following command to start your Electron.js application:

    npx electron .

• This command launches your Electron.js application window, and it will load the `index.html` file.

• Congratulations! You've successfully set up Electron.js and created a basic project structure. You can now start building your Electron.js application by adding HTML, CSS, and JavaScript code to the `index.html` file and extending the functionality in the `main.js` file.