Forem: Alex Wei

electron-vite: Easy way to protect your Electron source code

Alex Wei — Tue, 20 Sep 2022 11:47:08 +0000

electron-vite is a build tool that aims to provide a faster and leaner development experience for Electron.

We all know that Electron uses javascript to build desktop applications, which makes it very easy for hackers to unpack our applications, modify logic to break commercial restrictions, repackage, and redistribute cracked versions.

Solutions

To really solve the problem, in addition to putting all the commercial logic on the server side, we need to harden the code to avoid unpacking, tampering, repackaging, and redistributing.

The mainstream plan:

Uglify / Obfuscator: Minimize the readability of JS code by uglifying and obfuscating it.
Native encryption: Encrypt the bundle via XOR or AES, encapsulated into Node Addon, and decrypted by JS at runtime.
ASAR encryption: Encrypt the Electron ASAR file, modify the Electron source code, decrypt the ASAR file before reading it, and then run it.
V8 bytecode: The vm module in the Node standard library can generate its cache data from script objects (see). The cached data can be interpreted as v8 bytecode, which is distributed to achieve source code protection.

Scheme comparison:

-	Obfuscator	Native encryption	ASAR encryption	V8 bytecode
Unpack	Easy	High	High	High
Tampering	Easy	Easy	Middle	High
Readability	Easy	Easy	Easy	High
Repackaging	Easy	Easy	Easy	Easy
Access cost	Low	High	High	Middle
Overall protection	Low	Middle	Middle	High

For now, the solution with v8 bytecode seems to be the best one.

Electron code protection solution based on Node.js Addon and V8 bytecode

What is V8 Bytecode

As we can understand, V8 bytecode is a serialized form of JavaScript parsed and compiled by the V8 engine, and it is often used for performance optimization within the browser. So if we run the code through V8 bytecode, we can not only protect the code, but also improve performance.

electron-vite inspired by bytenode, the specific implementation:

Implement a plugin bytecodePlugin to parse the bundles, and determines whether to compile to bytecode.
Start the Electron process to compile the bundles into .jsc files and ensure that the generated bytecode can run in Electron's Node environment.
Generate a bytecode loader to enable Electorn applications to load bytecode modules.
Support developers to freely decide which chunks to compile.

In addition, electron-vite also solves some problems that bytenode can't solve:

Fixed the issue where async arrow functions could crash Electron apps.

Enable Bytecode to Protect Your Electron Source Code

Use the plugin bytecodePlugin to enable it:



import { defineConfig, bytecodePlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [bytecodePlugin()]
  },
  preload: {
    plugins: [bytecodePlugin()]
  },
  renderer: {
    // ...
  }
})

Customizing Protection

For example, only protect src/main/foo.ts:



.
├──src
│  ├──main
│  │  ├──index.ts
│  │  ├──foo.ts
│  │  └──...
└──...

You can modify your config file like this:



import { defineConfig, bytecodePlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [bytecodePlugin({ chunkAlias: 'foo' })],
    build: {
      rollupOptions: {
        output: {
          manualChunks(id): string | void {
            if (id.includes('foo')) {
              return 'foo'
            }
          }
        }
      }
    }
  },
  preload: {
    // ...
  },
  renderer: {
    // ...
  }
})

Examples

You can learn more by playing with the example.

QA

Impact on code organization and writing?

The only effect that bytecode schemes have found on code so far is Function.prototype.toString()Method does not work because the source code does not follow the bytecode distribution, so the source code for the function is not available.

Does it affect application performance?

There is no impact on code execution performance and a slight improvement.

Impact on program volume?

For bundles of only a few hundred KILobytes, there is a significant increase in bytecode size, but for 2M+ bundles, there is no significant difference in bytecode size.

How strong is the code protection?

Currently, there are no tools available to decompile V8 bytecode, so this solution is reliable and secure.

More electron-vite Features

Pre-configured: Pre-configured for Electron, don't worry about configuration.
Fast HMR: HMR for renderer processes.
Hot Reloading: The main process and preload scripts support hot reloading.
Easy to Debug: Very easy to debug in IDE like vscode or webstorm.
Out-of-the-box: Out-of-the-box support for TypeScript, Vue, React, Svelte, SolidJS and more.

End

You can learn more about electron-vite and source code protection at the following links:

Docs：https://evite.netlify.app/

GitHub：https://github.com/alex8088/electron-vite/

Next generation Electron build tooling based on Vite

Alex Wei — Sat, 20 Aug 2022 13:08:00 +0000

check out https://evite.netlify.app

Overview

electron-vite is a build tool that aims to provide a faster and leaner development experience for Electron. It consists of three major parts:

A build command that bundles your code with Vite, and able to handle Electron's unique environment including Node.js and browser environments.
Centrally configure the main process, renderers and preload scripts Vite configuration, and preconfigure for Electron's unique environment.
Use fast Hot Module Replacement(HMR) for renderers, extremely improving development efficiency.

electron-vite is fast, simple and approachable, designed to work out-of-the-box.

You can learn more about the rationale behind the project in the Introduction section.

Installation

npm i electron-vite -D

Command Line Interface

In a project where electron-vite is installed, you can use electron-vite binary directly with npx electron-vite or add the npm scripts to your package.json file like this:

{
  "scripts": {
    "start": "electron-vite preview", // start electron app to preview production build
    "dev": "electron-vite dev", // start dev server and electron app
    "prebuild": "electron-vite build" // build for production
  }
}

You can specify additional CLI options like --outDir. For a full list of CLI options, run npx electron-vite -h in your project.

Learn more about Command Line Interface.

Configuring electron-vite

When running electron-vite from the command line, electron-vite will automatically try to resolve a config file named electron.vite.config.js inside project root. The most basic config file looks like this:

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}

Learn more about Config Reference.

Electron entry point

When using electron-vite to bundle your code, the entry point of the Electron application should be changed to the main process entry file in the output directory. The default outDir is out. Your package.json file should look something like this:

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "./out/main/index.js",
}

Electron's working directory will be the output directory, not your source code directory. So you can exclude the source code when packaging Electron application.

Learn more about Build for production.

Scaffolding Your First electron-vite Project

With NPM

npm create @quick-start/electron

With Yarn

yarn create @quick-start/electron

With PNPM

pnpm create @quick-start/electron

Then follow the prompts!

✔ Project name: … <electron-app>

✔ Select a framework: › vue

✔ Add TypeScript? … No / Yes

✔ Add Electron updater plugin? … No / Yes

✔ Enable Electron download mirror proxy? … No / Yes



Scaffolding project in ./<electron-app>...

Done.

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold an Electron + Vue project, run:

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

Currently supported template presets include:

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

See create-electron for more details.

Quickly make a website with the same style as the Vue official website

Alex Wei — Mon, 23 May 2022 10:51:27 +0000

Quick Start

Run the following command in your command line:

npm init @quick-start/docs

This command will install and execute create-docs, the scaffolding tool. You will be presented with prompts for a number of optional features such as theme and TypeScript support:

✔ Project name: … <my-docs>
✔ Select a theme: › vue
✔ Add TypeScript? … No / Yes

Scaffolding project in ./<my-docs>...
Done.

Once the project is created, follow the instructions to install dependencies and start the dev server:

> cd <my-docs>
> npm install
> npm run dev

The project structure:

.
├──.vitepress
│  ├──theme
│  │  └──index.ts
│  └──index.ts
├──.vscode
├──docs
│  ├──public
│  │  └──...
│  ├──...
│  └──index.md
├──.editorconfig
├──.prettierrc.yaml
├──env.d.ts
├──package.json
└──tsconfig.json

Screenshots

The same style as the Vue official website:

Drak mode:

Responsive:

Powered

`VitePress`

Why is VitePress?

Faster dev server start
Faster hot updates
Faster build (uses Rollup internally)

`VitePress-Theme-Vue`

VitePress theme base on @vue/theme, more practical and comprehensive.

Remove hard-coded, make it easy to use
Refine style, more nice
Support deploying under nested public path(with base)
Home page support
More practical components

VitePress-Theme-Vue Github：

https://github.com/alex8088/vitepress-theme-vue

VitePress-Theme-Vue Guide：

https://alex8088.github.io/vitepress-theme-vue/

End

The the scaffolding tool create-docs github:

https://github.com/alex8088/quick-start/tree/master/packages/create-docs

Quickly scaffolding an Electron project in 1 min

Alex Wei — Tue, 05 Apr 2022 13:52:26 +0000

create-electron

An easy way to start an Electron project

The link - https://github.com/.../create-electron

Usage

Compatibility Note:
Some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

With npm:

$ npm create @quick-start/electron

With Yarn:

$ yarn create @quick-start/electron

With pnpm:

$ pnpm create @quick-start/electron

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold an Electrn + Vue project, run:

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app -- --template vue

Currently supported template presets include:

sample
sample-ts
vue
vue-ts
react
react-ts
svelte
svelte-ts

Features

Use ESLint + Prettier to better lint and style your code, help you to write high-quality code.
Use electron-vite compiler, a fast javascript builder integrated with Vite, and you don't need to care about configuration.
Use electron-toolkit that make you easy to develop. For example: TSconfigs extends, expose common Electron APIs to renderer process in preload scripts and effective utils for main process.
Use electron-builder and preset common configuration, allows you to easily pack Electron app.
Use electron-updater for auto-update, based on electron-builder.

The link - https://github.com/.../create-electron

An Electron CLI integrated with Vite

Alex Wei — Fri, 01 Apr 2022 11:31:41 +0000

electron-vite

An Electron CLI integrated with Vite

The link - https://github.com/alex8088/electron-vite

Features

⚡️Use the same way as Vite
🔨Both main process and renderer process source code are built using Vite
📃The main process and the renderer process Vite configuration are combined into one file
📦Preset optimal build configuration
🚀HMR for renderer processes

Usage

Install

npm i electron-vite -D

Development & Build

In a project where electron-vite is installed, you can use electron-vite binary directly with npx electron-vite or add the npm scripts to your package.json file like this:

{
  "scripts": {
    "start": "electron-vite preview", // start electron app to preview production build
    "dev": "electron-vite dev", // start dev server and electron app
    "prebuild": "electron-vite build" // build for production
  }
}

In order to use the renderer process HMR, you need to use the environment variables to determine whether the window browser loads a local html file or a remote URL.

function createWindow() {
  // Create the browser window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js')
    }
  })

  // Load the remote URL for development or the local html file for production
  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}

Note: For development, the renderer process index.html file needs to reference your script code via <script type="module">.

Recommended project directory

├──src
|  ├──main
|  |  ├──index.js
|  |  └──...
|  ├──preload
|  |  ├──index.js
|  |  └──...
|  └──renderer
|     ├──src
|     ├──index.html
|     └──...
├──electron.vite.config.js
└──package.json

Get started

Clone the electron-vite-boilerplate or use the create-electron tool to scaffold your project.

Configure

Config file

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}

You can also explicitly specify a config file to use with the --config CLI option (resolved relative to cwd):

electron-vite --config my-config.js

Tips: electron-vite also supports ts or mjs config file.

Config intellisense

Since electron-vite ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:

/**
 * @type {import('electron-vite').UserConfig}
 */
const config = {
  // ...
}

export default config

Alternatively, you can use the defineConfig and defineViteConfig helper which should provide intellisense without the need for jsdoc annotations:

import { defineConfig, defineViteConfig } from 'electron-vite'

export default defineConfig({
  main: {
    // ...
  },
  preload: {
    // ...
  },
  renderer: defineViteConfig(({ command, mode }) => {
    // conditional config use defineViteConfig
    // ...
  })
})

Tips: The defineViteConfig exports from Vite.

Config reference

See vitejs.dev

Config presets

Build options for `main`:

outDir: out\main(relative to project root)
target: node*, automatically match node target of Electron. For example, the node target of Electron 17 is node16.13
lib.entry: src\main\{index|main}.{js|ts|mjs|cjs}(relative to project root), empty string if not found
lib.formats: cjs
rollupOptions.external: electron and all builtin modules

Build options for `preload`:

outDir: out\preload(relative to project root)
target: the same as main
lib.entry: src\preload\{index|preload}.{js|ts|mjs|cjs}(relative to project root), empty string if not found
lib.formats: cjs
rollupOptions.external: the same as main

Build options for `renderer`:

root: src\renderer(relative to project root)
outDir: out\renderer(relative to project root)
target: chrome*, automatically match chrome target of Electron. For example, the chrome target of Electron 17 is chrome98
lib.entry: src\renderer\index.html(relative to project root), empty string if not found
polyfillModulePreload: false, there is no need to polyfill Module Preload for the Electron renderer
rollupOptions.external: the same as main

Define option for `main` and `preload`

In web development, Vite will transform 'process.env.' to '({}).'. This is reasonable and correct. But in nodejs development, we sometimes need to use process.env, so electron-vite will automatically add config define field to redefine global variable replacements like this:

export default {
  main: {
    define: {
      'process.env': 'process.env'
    }
  }
}

Note: If you want to use these configurations in an existing project, please see the Vite plugin vite-plugin-electron-config

Config FAQs

How do I configure when the Electron app has multiple windows?

When your electron app has multiple windows, it means there are multiple html files or preload files. You can modify your config file like this:

export default {
  main: {},
  preload: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/preload/browser.ts'),
          webview: resolve(__dirname, 'src/preload/webview.ts')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/renderer/browser.html'),
          webview: resolve(__dirname, 'src/renderer/webview.html')
        }
      }
    }
  }
}

CLI options

For the full list of CLI options, you can run npx electron-vite -h in your project. The flags listed below are only available via the command line interface:

--ignoreConfigWarning: boolean, allow you ignore warning when config missing
--outDir: string, output directory (default: out)

API

build

Type Signature:

async function build(inlineConfig: InlineConfig = {}): Promise<void>

Example Usage:

const path = require('path')
const { build } = require('electron-vite')

;(async () => {
  await build({
    build: {
      outDir: 'out'
      rollupOptions: {
        // ...
      }
    }
  })
})()

createServer

Type Signature:

async function createServer(inlineConfig: InlineConfig = {}): Promise<void>

Example Usage:

const { createServer } = require('electron-vite')

;(async () => {
  await createServer({
    server: {
      port: 1337
    }
  })
})()

preview

Type Signature:

async function preview(inlineConfig: InlineConfig = {}): Promise<void>

Example Usage:

const { preview } = require('electron-vite')

;(async () => {
  await preview({})
})()

InlineConfig

The InlineConfig interface extends Vite UserConfig with additional properties:

ignoreConfigWarning: set to false to ignore warning when config missing

And omit base property because it is not necessary to set the base public path in Electron.

resolveConfig

Type Signature:

async function resolveConfig(
  inlineConfig: InlineConfig,
  command: 'build' | 'serve',
  defaultMode = 'development'
): Promise<ResolvedConfig>

The link - https://github.com/alex8088/electron-vite

Forem: Alex Wei

electron-vite: Easy way to protect your Electron source code

Solutions

What is V8 Bytecode

Enable Bytecode to Protect Your Electron Source Code

Customizing Protection

Examples

QA

Impact on code organization and writing?

Does it affect application performance?

Impact on program volume?

How strong is the code protection?

More electron-vite Features

End

Next generation Electron build tooling based on Vite

Overview

Installation

Command Line Interface

Configuring electron-vite

Electron entry point

Scaffolding Your First electron-vite Project

Quickly make a website with the same style as the Vue official website

Quick Start

Screenshots

Powered

VitePress

VitePress-Theme-Vue

End

Quickly scaffolding an Electron project in 1 min

create-electron

Usage

Features

An Electron CLI integrated with Vite

electron-vite

Features

Usage

Install

Development & Build

Recommended project directory

Get started

Configure

Config file

Config intellisense

Config reference

Config presets

Build options for main:

Build options for preload:

Build options for renderer:

Define option for main and preload

Config FAQs

How do I configure when the Electron app has multiple windows?

CLI options

API

build

createServer

preview

InlineConfig

resolveConfig

`VitePress`

`VitePress-Theme-Vue`

Build options for `main`:

Build options for `preload`:

Build options for `renderer`:

Define option for `main` and `preload`