Integrating our three components - vf-to-ubf, ubf-to-twilio and the UI codebase was a challenge on its own. In particular, integrating ubf-to-twilio was difficult because it depends on technologies developed for a backend environment. These technologies are not available in the frontend JavaScript environment of Electron.

The Challenge

Before solving the problem, we want to make sure that the solution respects some key principles:

  • Our components remain isolated and independent.
  • Our node packages can execute in the node native environment and are not written to only work under Electron.

The Solution

We managed to use some Electron features to inject node packages, loaded with their backend dependencies, inside the runtime of the browser. This is an officially supported route and not a hacky solution.

This, however, opened a problem with one of our dependencies: axios. Because it interacts with network requests and because it is executed inside Electron, it defaults to using the browser’s request handler instead of the one used by node. This created some conflicts, but we found a clean way to force it to use the node’s from the get go.

This uncovers one of the risks of our architectural approach - we should understand the behavior of our dependencies well, as even though they are loaded inside node’s environment, in some cases executing them inside the browser can lead to different results. This is partly why, in this project, we double down on testing efforts.