DEV Community

sprout2000
sprout2000

Posted on

Introducing An Electron scaffold with hot reloading feature!

create-electron-webpack

πŸš€ Getting Started

npm create electron-webpack
Enter fullscreen mode Exit fullscreen mode

just run npm create 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
Enter fullscreen mode Exit fullscreen mode

or if you prefer Yarn:

yarn create electron-webpack your_app -t vue -m yarn
Enter fullscreen mode Exit fullscreen mode

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

πŸ‘ Features

  • Supports hot reloading in both the main and renderer processes.
  • Available in 10 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".

πŸ“— API

Templates

JavaScript TypeScript
vanilla vanilla-ts
react react-ts
vue vue-ts
svelte svelte-ts
preact preact-ts

Command line options

option description
--template, -t Select a template (required)
--manager, -m Select a package manager: npm(default), pnpm, yarn

πŸ› οΈ Usage

# on development with hot reloading
% npm run dev

# on production
% npm run build
Enter fullscreen mode Exit fullscreen mode

πŸ“Έ Screen shots

Hot reloading in renderer process

hot reloading in renderer process

Hot reloading in main process

hot reloading in main process

Top comments (0)