Using gRPC with Electron 14

Question

I've inherited a web application, whose backend is written in Go Lang and uses gRPC and protocol buffers to communicate with the Angular 8 frontend. The old developer was using Wails to bind Go method to the frontend and to build an exe, as required.

Based on the client needs, we decided to stop using Wails and to switch to Electron (14.0.0).

I was wondering if there is a method to use gRPC with Electron. All the tutorials I've found concerns older versions of Electron.

Answer 1

I previously used Wails V2, while its does very good job. but its kinda limited. I switched to Electron.

I had a similar setup. a Backend server in Go and frontend in Svelte. I used HTTP server instead of gRPC. bud the process is the same.

So, when bundling your app in electron. you will need to add the binary of the backend to additional resources.

And then, from the frontend you start and connect to the grpc backend server. using https://github.com/grpc/grpc-node. like this

const spawn = require('child_process').execFile;

let binaryPath = process.resourcesPath + "/app.asar.unpacked/bin/macos/myapp"

// run server
function startBackend() {
    child = spawn(binaryPath, ['serve', "-p", port, "-s", userDataPath]);
}

In my case i used electron builder (https://www.electron.build/) to build my app.

you can use extraResources directive to add your backend binary to electron app.

https://www.electron.build/configuration/contents.html#extraresources

or

binaries: ["bin/windows/app.exe"]

asarUnpack: ["bin/windows/app.exe"]

my app was for MacOS and electron-builder.yaml looks like this.

productName: MyApp
appId: com.electron.${name}
remoteBuild: false

compression: normal
npmRebuild: true

asar:
  smartUnpack: true

directories:
  output: out
  buildResources: build

mac:
  category: public.app-category.developer-tools
  icon: ./icons/512x512.png
  darkModeSupport: false
  target:
    - target: dmg
    # - target: zip


  fileAssociations:
    - ext: svg
      role: Viewer
  # extraResources:
  #   - from: "bin/macos/myapp"
  #     to: "bin/macos/myapp"
  #     filter:
  #       - "**/*"

  binaries: ["bin/macos/myapp"]
  asarUnpack: ["bin/macos/myapp"]
    
  hardenedRuntime: false
  gatekeeperAssess: false
  entitlements: "build/macos/entitlements.mac.plist"
  entitlementsInherit: "build/macos/entitlements.mac.plist"
  publish: null
  
dmg:
  sign: true

Example of electron builder config:https://github.com/twiny/svelte-electron-tailwind/blob/main/electron-builder.yml