ElectronFristPractice

2023/11/3

This blog tells how you could build your own first electron app from scratch.

Raw electron

1. Prerequisites:

Node.js and npm: Ensure you have Node.js and npm installed. If not, download and install them from Node.js official website.

2. Setting Up Your Project:

Create a new directory for your project:

mkdir my-electron-app
cd my-electron-app

Initialize a new Node.js project:
```
npm init
```
Install Electron:
```
npm install electron --save-dev
```

3. Create Your App:

In the root directory of your project, create an index.html file. This will be the main page of your app. Add some basic HTML content:
```
<!DOCTYPE html>
<html>
<head>
    <title>My Electron App</title>
</head>
<body>
    <h1>Hello, Electron!</h1>
</body>
</html>
```

Create a main.js file in the root directory. This will be the main process of your Electron app:

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

let mainWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    mainWindow.loadFile('index.html');
});

In your package.json, set the main field to main.js and add a start script:
```
"main": "main.js",
"scripts": {
    "start": "electron ."
}
```

4. Test Your App:

Run the following command to start your Electron app:

npm start

If everything is set up correctly, you should see a new window displaying the content of your index.html file.

5. Package Your App with Electron:

Install electron-packager:

npm install electron-packager --save-dev

Package your app:
```
npx electron-packager . MyElectronApp --platform=win32 --arch=x64
```
This command will package your app for Windows (64-bit). You can specify other platforms and architectures as needed.
Once the packaging process is complete, you’ll find a new directory named MyElectronApp-win32-x64 (or similar, depending on the platform and architecture you specified) in your project directory. This directory contains the packaged version of your app.
Navigate to the directory and run the .exe file (on Windows) to launch your packaged app.

1. Use electron-builder:

electron-builder is a complete solution to package and build a ready-for-distribution Electron app. It can help reduce the size of the packaged app by removing unnecessary files.

Install electron-builder:

npm install electron-builder --save-dev

Add a build script to your package.json:

"scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
}

Add a build field to your package.json to specify build options:

"build": {
    "appId": "your.id",
    "productName": "YourProductName",
    "directories": {
        "output": "dist"
    },
    "files": [
        "index.html",
        "main.js",
        "package.json"
    ]
}

Run the build script:
```
npm run dist
```

Use Electron Forge

Electron Forge is a complete tool for building, packaging, and publishing Electron applications. It provides a unified way to work with Electron projects and simplifies many of the tasks associated with Electron development.

Here’s a step-by-step guide to using Electron Forge to package your Electron app:

1. Install Electron Forge:

If you’re starting a new project, you can use the Electron Forge CLI to initialize it:

npx create-electron-app my-new-app
cd my-new-app

For an existing project like yours, you can integrate Electron Forge:

npx electron-forge import

This command will make necessary changes to your project to make it compatible with Electron Forge.

2. Modify Package Configuration:

Electron Forge will add a new config section to your package.json. You can modify this section to customize the build process. For example, to enable packaging with the asar format:

"config": {
  "forge": {
    "packagerConfig": {
      "asar": true
    }
  }
}

3. Package Your App:

To package your app, simply run:

npm run package

This will create a packaged version of your app in the out directory.

4. Create a Distributable:

If you want to create a distributable format (like an installer for Windows or a dmg for macOS), you can use:

npm run make

This will create the distributable files in the out/make directory.

5. Customize the Build:

Electron Forge supports various “makers” and “publishers” to customize the build and publishing process. You can add them to the forge configuration in your package.json.

For example, to add support for creating a Windows installer:

"config": {
  "forge": {
    "makers": [
      {
        "name": "@electron-forge/maker-squirrel",
        "config": {
          "name": "my_electron_app"
        }
      }
    ]
  }
}

You’ll also need to install the necessary maker:

npm install --save-dev @electron-forge/maker-squirrel

6. Publish Your App:

If you want to publish your app to platforms like GitHub Releases, you can configure a publisher in the forge configuration and then use:

npm run publish

Remember to always test your packaged and distributed app to ensure it works as expected on all target platforms.

Electron Forge provides a streamlined process for Electron development, but the size of the packaged app will still include the Electron runtime. If size remains a concern, consider the strategies mentioned earlier to reduce the overall size.

LOADING