From version 2.4.0, using package
elecruninstead ofelecrun.
elecrun is a tool to run your electron app easily.
-
Write modern JavaScript, TypeScript in Node.js with no config.
-
Let Electron work with any front-end framework.
-
Using esbuild to transform your main process code, It's very fast ⚡️.
-
Using vite in renderer process.
- Globally install
# using npm
npm install -g elecrun
# using yarn
yarn global add elecrun- Install as devDependencies
# using npm
npm install elecrun --save-dev
# using yarn
yarn global add elecrun --dev# create project directory
mkdir my-electron-app && cd my-electron-app
# initialize your project
yarn init -y
# install electron as dependencies
yarn add electron -Dindex.ts
import { app, BrowserWindow } from 'electron';
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadURL('http://localhost:3000');
}
app.whenReady().then(createWindow);For more information about Electron, see electron doc
Actually, you can use any front-end framework supported by
vitehere. In a simple project, let's use a single html file.
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Electron App</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>{
"scripts": {
"dev": "elecrun --vite"
}
}
elecrunis alias ofelecrun
yarn dev
- https://github.com/jctaoo/elecrun/tree/main/fixtures/demo
- https://github.com/jctaoo/elecrun/tree/main/fixtures/simple
elecrun using vite to handle code in renderer process.
The entry file is index.html in root directory(You can specify the root directory path, see options --vite) and vite using esm to struct your renderer process code.
Vite also provides a dev server support Hot Module Replacement. It's means your code changes can always be displayed on the interface.
From vite official website : A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
For more information, see vite official website
elecrun using esbuild to transform your code may cannot directly run in nodejs such as TypeScript and modern JavaScript to the code nodejs can handle. Besides, elecrun also bundle your code to one file.
When you run elecrun dev, elecrun will try to find and read entry file(You can specify the entry file path, see development phase) then statically analyze to transform your code. After that, save the target code to your node_modules/.elecrun (there is one exception, see options --preload). Finally, elecrun will execute electron command line tool to start your app.
When your main process code has been changed, elecrun will ask if you want to rerun your app. This is useful when you don’t want to interrupt the current debugging.
run
elecrun dev --vite
# or
elecrun --viteThe full version of dev command is elecrun [file-entry] [options]. The only argument is file-entry that indicates the path of entry script for main process. You can specify this or elecrun will automatically find the entry script path by the following list:
- ./src/main/index.js
- ./src/main/index.ts
- ./src/index.js
- ./src/index.ts
- ./index.js
- ./index.ts
example:
elecrun dev ./main.tsThe option --vite means run vite server with elecrun. If you don't want using vite, just remove this option.
The 'renderer root' is the root directory for vite. You can specify this or elecrun
will automatically find the root directory by the following list:
- ./src/renderer/
- ./src/
- ./
example:
elecrun dev --vite ./srcWhen you enable contextIsolation, you may need preload (You can find in BrowserWindow options). But Electron loads your preload script based on string variable. It's means esbuild cannot statically analyze the location of preload script or bundle it. The solution is to provide an option --preload to specify location of preload script. Then, elecrun just transform it and save preload code's target code in the same path as bundled code.
The parameter <file> should be set as preload script path relative to the main src. Example:
+-src
|--+-main
| |---index.ts
| |---preaload.ts
|--+-renderer
| |---index.html
|--package.json
run
elecrun --vite --preload preload.tsdev command save the build artifact to node_modules/.elecrun/app under your project by default. But sometimes you want to clean these files. This options help you clean cache files when you run dev command.
The --esm option is used to specify whether to use ESM modules to run the main process code. By default, elecrun uses commonjs modules to run the main process code. If you want to use ESM modules, just add this option.
Some third-party libraries only support
esmmodules. When using such third-party libraries, you may need to add this option.
The build phase is almost the same as the development phase (also including all the options and arguments except --vite). The difference is that the compiled files are stored in node_modules in the development phase, while the build phase is stored in the app directory.
run elecrun clean to easily clean output by elecrun