Convert Figma logo to code with AI

electron logoforge

:electron: A complete tool for building and publishing Electron applications

6,407
505
6,407
297

Top Related Projects

81,614

Build smaller, faster, and more secure desktop applications with a web frontend.

Make any web page a desktop application

Portable and lightweight cross-platform desktop application development framework

8,852

A library for building cross-platform native desktop applications with Node.js and CSS 🚀. React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org

8,059

:zap: Native, high-performance, cross-platform desktop apps - built with Reason!

Quick Overview

Electron Forge is a comprehensive tool that simplifies the process of building, packaging, and distributing Electron applications. It provides a streamlined workflow for creating cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript.

Pros

  • Comprehensive Toolset: Electron Forge integrates various tools and libraries, such as Webpack, Babel, and Forge, to handle the entire application development lifecycle.
  • Cross-Platform Compatibility: Electron Forge enables the creation of desktop applications that can run on multiple operating systems, including Windows, macOS, and Linux.
  • Simplified Configuration: Electron Forge abstracts away many of the complex configuration details, allowing developers to focus on building their application.
  • Active Community: Electron Forge has a vibrant community of contributors and users, providing support, resources, and ongoing development.

Cons

  • Steep Learning Curve: Developers new to Electron or desktop application development may face a steeper learning curve when getting started with Electron Forge.
  • Potential Performance Issues: Electron-based applications can sometimes have performance challenges, especially on lower-end hardware, due to the underlying web technologies.
  • Increased Application Size: Electron-based applications tend to have a larger file size compared to native desktop applications, as they include the Electron runtime.
  • Limited Native Functionality: While Electron provides access to many native APIs, some advanced native features may not be as easily accessible or may require additional effort to integrate.

Code Examples

// Creating a new Electron Forge project
npx create-electron-app my-app --template=react-typescript

// Configuring the Electron Forge manifest
// (forge.config.js)
module.exports = {
  packagerConfig: {
    icon: 'path/to/your/icon.png'
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'my-app'
      }
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin']
    },
    {
      name: '@electron-forge/maker-deb',
      config: {}
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {}
    }
  ]
}

// Building and packaging the Electron application
electron-forge start
electron-forge package
electron-forge make

Getting Started

To get started with Electron Forge, follow these steps:

  1. Install the Electron Forge CLI globally:

    npm install -g @electron-forge/cli
    
  2. Create a new Electron Forge project:

    npx create-electron-app my-app --template=react-typescript
    

    This will create a new Electron application with a React and TypeScript template.

  3. Navigate to the project directory and install the dependencies:

    cd my-app
    npm install
    
  4. Start the development server:

    npm start
    

    This will launch the Electron application in development mode.

  5. To package the application for distribution, run:

    electron-forge package
    

    This will create a packaged version of the application for your target platform.

  6. To create installers or other distribution artifacts, run:

    electron-forge make
    

    This will generate the necessary distribution files, such as DMG, MSI, or DEB packages, depending on your configuration.

Refer to the Electron Forge documentation for more advanced configuration options and customization possibilities.

Competitor Comparisons

81,614

Build smaller, faster, and more secure desktop applications with a web frontend.

Pros of Tauri

  • Smaller application size and better performance due to native system components
  • Enhanced security with a rust-based backend and limited system access
  • Cross-platform development with web technologies and native UI

Cons of Tauri

  • Less mature ecosystem and community compared to Electron
  • Steeper learning curve, especially for developers unfamiliar with Rust
  • Limited access to certain system APIs that Electron provides

Code Comparison

Tauri (main.rs):

#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]

fn main() {
  tauri::Builder::default()
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Electron Forge (main.js):

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Both frameworks allow developers to create desktop applications using web technologies, but they differ in their approach to system integration and performance optimization. Tauri offers a more lightweight and secure solution, while Electron Forge provides a more established ecosystem with broader system access.

Make any web page a desktop application

Pros of Nativefier

  • Simpler to use for basic web-to-desktop app conversion
  • Faster development process for single-page applications
  • No need for extensive Electron knowledge

Cons of Nativefier

  • Limited customization options compared to Forge
  • Less control over the final application structure
  • Not suitable for complex, multi-window applications

Code Comparison

Nativefier (CLI command):

nativefier --name "My App" "https://example.com"

Forge (package.json snippet):

{
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  }
}

Nativefier is designed for quick and easy conversion of web applications to desktop apps, while Forge provides a more comprehensive toolkit for building and distributing Electron applications. Nativefier is ideal for simple projects or prototypes, whereas Forge offers greater flexibility and control for complex applications.

Forge allows developers to create custom builds, configure packaging options, and integrate with various tools and frameworks. It's better suited for long-term development and maintenance of Electron apps. Nativefier, on the other hand, is perfect for rapid deployment of web apps as desktop applications with minimal configuration.

Portable and lightweight cross-platform desktop application development framework

Pros of Neutralinojs

  • Significantly smaller application size due to not bundling a full browser engine
  • Lower memory usage and faster startup times
  • Cross-platform development with a single codebase for desktop and web

Cons of Neutralinojs

  • Less mature ecosystem and community support compared to Electron
  • Limited access to native APIs and system features
  • Fewer third-party tools and extensions available

Code Comparison

Neutralinojs:

Neutralino.init();
Neutralino.os.showMessageBox('Welcome', 'Hello Neutralino!');

Electron (using Forge):

const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
});

Both frameworks allow developers to create desktop applications using web technologies, but they differ in their approach and feature set. Neutralinojs focuses on lightweight applications with a smaller footprint, while Electron (with Forge) offers a more comprehensive set of features and better integration with native APIs at the cost of larger application size and resource usage.

8,852

A library for building cross-platform native desktop applications with Node.js and CSS 🚀. React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org

Pros of NodeGUI

  • Significantly smaller application size and lower memory usage
  • Native performance and look-and-feel on supported platforms
  • Direct access to native APIs without Chromium overhead

Cons of NodeGUI

  • Limited cross-platform support (currently only Windows and Linux)
  • Smaller ecosystem and community compared to Electron
  • Steeper learning curve for developers familiar with web technologies

Code Comparison

NodeGUI:

const { QMainWindow, QWidget, QLabel, FlexLayout } = require("@nodegui/nodegui");

const win = new QMainWindow();
const centralWidget = new QWidget();
const label = new QLabel();
label.setText("Hello World");

const rootLayout = new FlexLayout();
centralWidget.setLayout(rootLayout);
rootLayout.addWidget(label);
win.setCentralWidget(centralWidget);
win.show();

Electron Forge:

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

NodeGUI offers a more native approach with direct widget creation, while Electron Forge relies on web technologies and HTML for UI rendering. NodeGUI provides better performance and smaller app size, but Electron Forge offers broader platform support and a larger ecosystem.

8,059

:zap: Native, high-performance, cross-platform desktop apps - built with Reason!

Pros of Revery

  • Native performance due to OCaml compilation
  • Smaller application size compared to Electron-based apps
  • Cross-platform development with a single codebase

Cons of Revery

  • Smaller community and ecosystem compared to Electron
  • Steeper learning curve for developers unfamiliar with OCaml
  • Limited documentation and resources compared to Electron

Code Comparison

Revery (OCaml):

let app = App.create ();
let win = Window.create ~title:"Hello World" ~width:800 ~height:600 app;

let _ = UI.render win (
  <view style=Style.[width(400), height(400), backgroundColor(Colors.red)]>
    <text text="Hello, World!" />
  </view>
);

App.start app;

Electron Forge (JavaScript):

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Revery offers a more concise syntax for creating windows and rendering UI elements, while Electron Forge relies on HTML and separate JavaScript files for UI rendering. Revery's approach allows for tighter integration between UI and logic within a single language, whereas Electron Forge separates concerns between HTML, CSS, and JavaScript.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Electron Forge

CircleCI Discord npm version license status

A complete tool for building modern Electron applications.

Electron Forge unifies the existing (and well maintained) build tools for Electron development into a simple, easy to use package so that anyone can jump right in to Electron development.


Website | Goals | Docs and Usage | Configuration | Support | Contributing | Changelog


Getting Started

Pre-requisites:

  • Node 16.4.0 or higher
  • Git

If you have a more recent version of npm or yarn, you can use npx, or yarn create.

npx create-electron-app my-new-app
# or
yarn create electron-app my-new-app

# then
cd my-new-app
npm start

For more information on creating a new project from a template, see our CLI documentation.

Docs and Usage

For Electron Forge documentation and usage you should check out our website: electronforge.io

Project Goals

  1. Starting with Electron should be as simple as a single command.
  2. Developers shouldn't have to worry about setting up build tooling, native module rebuilding, etc. Everything should "just work" for them out of the box.
  3. Everything from creating the project to packaging the project for release should be handled by one core dependency in a standard way while still offering users maximum choice and freedom.

With these goals in mind, under the hood this project uses, among others:

  • @electron/rebuild: Automatically recompiles native Node.js modules against the correct Electron version.
  • @electron/packager: Customizes and bundles your Electron app to get it ready for distribution.

Contributing

If you are interested in reporting/fixing issues and contributing directly to the code base, please see CONTRIBUTING.md for more information on what we're looking for and how to get started.

Community

Please report bugs or feature requests in our issue tracker. You can find help for debugging your Electron Forge on the Support page, and ask questions in the official Electron Discord server, where there is a dedicated channel for Electron Forge.

NPM DownloadsLast 30 Days