electron-starter v2.1.3

:flight_departure: electron-starter

Yet another create-electron-app.

:rocket: Getting Started

npx electron-starter

:thumbsup: Features

• Supports hot reloading in both the main and renderer processes.
• Available in 8 flavors.
• No complicated pre-made settings.

:inbox_tray: Installation

npm i -g electron-starter

:green_book: Usage

electron-starter <project-name> --template <template> [--manager <package manager>]

If the arguments are missing or invalid, the command will fall back to interactive mode.

Templates

Options

:hammer_and_wrench: Development & Production

# on development with hot reloading
% npm run dev

# on production
% npm run build

:art: How to use sass (.scss) in your project

You will need to add sass and sass-loader:

npm install --save-dev sass sass-loader

And then, update your webpack.config.(j|t)s:

    module: {
      rules: [
        {
-         test: /\.css$/,
+         test: /\.s?css$/,
-         use: [MiniCssExtractPlugin.loader, "css-loader"],
+         use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        },
      ],
    },

:electric_plug: How to load developer tools (React, Vue3)

electron-devtools-installer is recommended.

npm install --save-dev electron-devtools-installer

// Example for Vue3
import installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer";

app.whenReady().then(() => {
  installExtension(VUEJS3_DEVTOOLS, {
    loadExtensionOptions: { allowFileAccess: true },
  }).then(() => mainWindow.webContents.openDevTools());
});

Manual loading

Or you will need to install React Devtools or Vue.js devtools Google Chrome extension manually.

Example in the case that you prefer electron-search-devtools to load already installed devtools:

npm install --save-dev electron-search-devtools

// load `session` and `searchDevtools`
import { app, session } from "electron";
import { searchDevtools } from "electron-search-devtools";

app.whenReady().then(() => {
  // 'REACT' or 'VUE3'
  searchDevtools("VUE3").then((devtools) => {
    // 'allowFileAccess' is required
    session.defaultSession.loadExtension(devtools, { allowFileAccess: true });
  });
});

:package: How to package your app to publish

Use electron-builder or electron-packager.

npm install --save-dev electron-builder

Sample script for electron-builder builder.js:

require("electron-builder").build({
  config: {
    productName: "Electron App",
    // File macros are available --> "Electron App-1.0.0-win32.exe"
    artifactName: "${productName}-${version}-${platform}.${ext}",
    copyright: "",
    /**
     * A glob patterns relative to the app directory,
     * which specifies which files to include.
     */
    files: ["dist/**/*"],
    // Meta data directories
    directories: {
      output: "release",
      buildResources: "assets",
    },
    win: {
      // App icon
      icon: "assets/win32.ico",
    },
    mac: {
      icon: "assets/darwin.icns",
      // Avoid automatic code signing
      identity: null,
    },
  },
});

And then run the script:

node ./builder.js

Sample icons are available in the assets directory of this repository.

:copyright: Copyright

Copyright (c) 2022 sprout2000