create-electron-webpack v0.2.1

:flight_departure: create-electron-webpack

Yet another create-electron-app.

:rocket: Getting Started

npm create electron-webpack

You can also directly specify the project name, the template, and the package manager you want to use via additional command line options.

For example, to scaffold a React + TypeScript project, run:

# in the case of npm 7+, extra double-dash is needed:
npm create electron-webpack myapp -- --template react-ts --manager pnpm

or if you prefer Yarn:

yarn create electron-webpack your_app -t vue -m yarn

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

:thumbsup: Features

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

The template provided by this scaffold is NOT an all-in-one. It provides only the necessary and sufficient settings so that you can customize it as you like. In other words, it has no "eject".

:green_book: API

Templates

Command line options

:hammer_and_wrench: Usage

# on development with hot reloading
% npm run dev

# on production
% npm run build

:package: How to package your app to share?

It is recommended to use electron-builder.

npm install --save-dev electron-builder

Here's a sample script builder.ts for electron-builder:

import { build } from "electron-builder";

build({
  config: {
    appId: "com.Electron.ElectronApp",
    productName: "Electron App",
    artifactName: "${productName}-${version}-${platform}-${arch}.${ext}",
    files: ["dist/**/*"],
    directories: {
      output: "release",
    },
  },
});

And then run the script above...

npx ts-node ./builder.ts

See Common Configuration for more details.

:cyclone: How to generate your own app icon?

You can use Elephicon to generate Microsoft ICO or Apple ICNS from PNG files.

And then, specify the path to the icon file to conifig.platform.icon in your builder.(j|t)s.

require("electron-builder").build({
  config: {
    win: {
      icon: "assets/icon.ico",
    },
    mac: {
      icon: "assets/icon.icns",
    },
  },
});

: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: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },

:camera_flash: Screen shots

Hot reload in renderer process

Hot reload in main process

:copyright: Copyright

Copyright (c) 2022 sprout2000