build-electron - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "build-electron",
   "description": "A simple build tool for Electron main/preload code",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "index.js",
@@ -6,0 +6,0 @@ "bin": {

README.md

@@ -1,2 +0,2 @@
-# build-electron
+# build-electron [![Test](https://github.com/mifi/build-electron/actions/workflows/test.yml/badge.svg)](https://github.com/mifi/build-electron/actions/workflows/test.yml)
 
@@ -20,7 +20,54 @@ Use ES modules in Electron now!
 
-Note that this project provides building of **Node.js code only** (main, preload) - not renderer code due to there being so many different languages and frameworks for that, and there are already excellent tools for building those. For React based Electron apps, I recommend pairing with [Create React App (CRA)](https://github.com/facebook/create-react-app).
+Note that this project provides **Node.js code building only** (main, preload) - not renderer code due to there being so many different languages and frameworks for that, and there are already excellent tools for building those. For React based Electron apps, I recommend pairing with [Create React App (CRA)](https://github.com/facebook/create-react-app).
 
-In this example we will use CRA and [electron-builder](https://www.electron.build/), although it should work fine with any other framework too.
+```bash
+yarn add -D build-electron concurrently wait-on
+```
 
+Put your Electron main ESM source code in `src/main/index.js` and preload source in `src/preload/index.js`.
+
+Add to your `package.json`:
+```json
+{
+  "main": "build/main.js",
+  "build": {
+    "files": [
+      "build/**/*"
+    ]
+  },
+  "scripts": {
+    "start": "concurrently -k \"build-electron -d\" \"wait-on build/.build-electron-done && electron .\"",
+    "build": "build-electron"
+  }
+```
+
+Optionally add your frontend builder like CRA (see below for example).
+
+Now create a configuration file in your project root `build-electron.config.js`:
+
+```js
+module.exports = {
+  mainEntry: 'src/main/index.js',
+  preloadEntry: 'src/preload/index.js',
+  outDir: 'build',
+  mainTarget: 'electron16.0-main',
+  preloadTarget: 'electron16.0-preload',
+}
+```
+
+Now you can start developing:
 ```bash
+npm run start
+```
+
+And to build your production app:
+```bash
+npm run build && npm exec electron-builder --mac
+```
+
+## Using with Create React App
+
+In this example we will use CRA and [electron-builder](https://www.electron.build/), although it should be similar with any other framework too.
+
+```bash
 yarn create react-app my-awesome-app
@@ -31,3 +78,3 @@ cd my-awesome-app
 
-Now let's create the project structure. The relevant structure for our CRA app will be like this:
+Now let's create the project structure. Because CRA uses a particular directory structure (and `src` is reserved for the frontend source), we have to adapt to that. The relevant structure will be like this:
 ```
@@ -43,8 +90,7 @@ 📁 my-awesome-app
   📁 public
-    📄 main.js [generated]
-    📄 preload.js [generated]
+    📄 main.js [generated by build-electron]
+    📄 preload.js [generated by build-electron]
 
-  📁 build [generated]
-  📁 dist [generated]
-  📁 public [generated]
+  📁 build [generated by CRA]
+  📁 dist [generated by electron-builder]
 
@@ -100,3 +146,2 @@ 📄 package.json
 Now you can start developing:
-
 ```bash
@@ -103,0 +148,0 @@ npm run start

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1419314

increased by0.09%

Number of lines in readme file

213

increased by26.79%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes