Introducing An Electron scaffold with hot reloading feature!

sprout2000 — Sun, 07 May 2023 04:17:45 +0000

create-electron-webpack

🚀 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

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.

👍 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

📸 Screen shots

Hot reloading in renderer process

Hot reloading in main process

How to build An Electron App by esbuild with hot reload functionality?

sprout2000 — Mon, 30 Jan 2023 09:15:25 +0000

sample repo: https://github.com/sprout2000/electron-react-esbuild

A script to run esbuild

esbuild.ts

import type { BuildOptions } from 'esbuild';

import { build, context } from 'esbuild';
import { htmlPlugin } from '@craftamap/esbuild-plugin-html';

/**
 * Process according to the value of
 * the NODE_ENV environment variable
 */
const isDev = process.env.NODE_ENV === 'development';

// Common settings for build or watch
const common: BuildOptions = {
  outdir: 'dist', // output destination
  bundle: true, // bundle, of course.
  minify: !isDev,
  sourcemap: isDev,
  define: {
    // Requires a type declaration file (later mention)
    DEBUG: isDev ? 'true' : 'false',
  },
};

// Configuration for main process
const main: BuildOptions = {
  // Import common settings
  ...common,
  // main process and preload script
  entryPoints: ['src/main.ts', 'src/preload.ts'],
  // Build for Node.js environment
  platform: 'node',
  // you will get run-time error without the following:
  external: ['electron'],
};

// Configuration for renderer process
const renderer: BuildOptions = {
  ...common,
  // Entry file for React app
  entryPoints: ['src/web/index.tsx'],
  // Build for Web
  platform: 'browser',
  // Required for htmlPlugin
  metafile: true,
  plugins: [
    htmlPlugin({
      files: [
        {
          entryPoints: ['src/web/index.tsx'],
          filename: 'index.html',
          htmlTemplate: 'src/web/index.html',
        },
      ],
    }),
  ],
};

// Function to execute during development
const watch = async () => {
  await (await context({ ...main })).watch();
  await (await context({ ...renderer })).watch();
};

// Function to execute during production build
const prod = async () => {
  build({ ...main });
  build({ ...renderer });
};

// Executing scripts
isDev ? watch() : prod();

Create a type definition file

src/@types/Debug.d.ts

declare const DEBUG: boolean;

Update your `package.json`

Use electronmon to restart the Electron app when the main process code changes, and reload WebView for the renderer process.

{
  // Specify the main process JavaScript file output by esbuild.
  "main": "dist/main.js",
  "scripts": {
    "dev": "rimraf dist && run-p dev:esbuild dev:electron",
    // Run `tsc` without output before build as esbuild does not type check.
    "build": "tsc && cross-env NODE_ENV=\"production\" ts-node ./esbuild.ts",
    "dev:esbuild": "cross-env NODE_ENV=\"development\" ts-node ./esbuild.ts",
    "dev:electron": "wait-on dist/main.js dist/index.html && electronmon ."
  }
}

You will need to install rimraf, npm-run-all, cross-env and wait-on.

A sample for tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "isolatedModules": true, // <-- required
    "resolveJsonModule": true,
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx",
    "strict": true,
    "noEmit": true // <-- required
  },
  "include": ["src"],
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

Assumed directory structure

% tree
.
├── esbuild.ts
├── package.json
├── src
│   ├── @types
│   │   └── Debug.d.ts
│   ├── main.ts
│   ├── preload.ts
│   └── web
│       ├── App.css
│       ├── App.tsx
│       ├── index.html
│       └── index.tsx
└── tsconfig.json

4 directories, 10 files

Forem: sprout2000