SQL with Prisma under Electron

[RobinNiemann]

My Main goal is to create an Electron App (Windows) that locally stores data in an SQLite Database. And because of type safety I choose to use the Prisma framework instead of other SQLite Frameworks.
I took this Electron Sample Project and now try to include Prisma. Depending on what I try different problems do arrise.

1. PrismaClient is unable to be run in the Browser

I executed npx prisma generate and then try to execute this function via a button:

  import { PrismaClient } from '@prisma/client';

  onSqlTestAction(): void {
    const prisma = new PrismaClient();
    const newTestObject = prisma.testTable.create(
      {
        data: {
          value: "TestValue"
        }
      }
    );

  }

When executing this in Electron I get this:

core.js:6456 ERROR Error: PrismaClient is unable to be run in the browser.
In case this error is unexpected for you, please report it in https://github.com/prisma/prisma/issues
    at new PrismaClient (index-browser.js:93)
    at HomeComponent.onSqlTestAction (home.component.ts:19)
    at HomeComponent_Template_button_click_7_listener (template.html:7)
    at executeListenerWithErrorHandling (core.js:15281)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15319)
    at HTMLButtonElement.<anonymous> (platform-browser.js:568)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28666)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)

It somehow seems logical that Prisma cannot run in a browser. But I actually build a native app - with Electron that embeds a Browser. It seems to be a loophole.

2. BREAKING CHANGE: webpack < 5 used to include polyfills

So i found this Question: https://stackoverflow.com/questions/64088437/how-to-use-prisma-with-electron
Seemed to be exactly what I looked for. But the error message is different (Debian binaries were not found).
The solution provided is to generate the prisma artifacts into the src folder instead of node_modules - and this leads to 19 polyfills errors. One for example:

./src/database/generated/index.js:20:11-26 - Error: Module not found: Error: Can't resolve 'path' in '[PATH_TO_MY_PROJECT]\src\database\generated'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

And this repeats with 18 other modules. Since the error message to begin with was different I also doubt that this is the way to go.

[ryands17]

@RobinNiemann 👋

Prisma cannot be used on the Browser end. You need to run Prisma on the Node side of things and communicate with the UI using IPC. Have a look at these discussions and see if anything relevant is included:

#5200
#7889

[RobinNiemann]

It took me a while to figure out the communication between IPC Main and IPC Renderer process but I finally got it. Thank you!
I'll leave my sample code here for future readers.

My minimal example

In the frontend (I use Angular)

// This refers to the node_modules folder of the Electron Backend, the folder where the main.ts file is located.
// I just use this import so that I can use the prisma generated classes for type safety.

import { TestTable } from '../../../app/node_modules/.prisma/client';

  // Button action
  onSqlTestAction(): void {
    this.electronService.ipcRenderer.invoke("prisma-channel", 'Test input').then((value) => {
      const testObject: TestTable = JSON.parse(value);
      console.log(testObject);
    });

The sample project I used already had this service to provide the IPC Renderer:

@Injectable({
  providedIn: 'root'
})
export class ElectronService {
  ipcRenderer: typeof ipcRenderer;
  webFrame: typeof webFrame;
  remote: typeof remote;
  childProcess: typeof childProcess;
  fs: typeof fs;

  get isElectron(): boolean {
    return !!(window && window.process && window.process.type);
  }

  constructor() {
    // Conditional imports
    if (this.isElectron) {
      this.ipcRenderer = window.require('electron').ipcRenderer;
      this.webFrame = window.require('electron').webFrame;

      this.childProcess = window.require('child_process');
      this.fs = window.require('fs');

      // If you want to use a NodeJS 3rd party deps in Renderer process (like @electron/remote),
      // it must be declared in dependencies of both package.json (in root and app folders)
      // If you want to use remote object in renderer process, please set enableRemoteModule to true in main.ts
      this.remote = window.require('@electron/remote');
    }
  }

And then in the Electron backend I first added "@prisma/client": "^3.0.1" to the package.json (for the Electron backend not the frontend). Then I added to the main.ts this function to handle the requests from the renderer:

// main.ts
ipcMain.handle("prisma-channel", async (event, args) => {

  const prisma = new PrismaClient();
  await prisma.testTable.create(
    {
      data: {
        value: args
      }
    }
  );

  const readValue = await prisma.testTable.findMany();
  return JSON.stringify(readValue);
})

This way of simply adding the IPC Main handler in the main.ts file of course is a big code smell but usefull as minimal example. I think I will move on with the achitecture concept presented in this article.

[ludralph]

Hi there,

To keep our discussions organized and focused on the most relevant topics, we’re reviewing and tidying up our backlog. As part of this process, we’re closing discussions that have already been marked as answered but remain open.

If this discussion still requires further input or clarification, feel free to reopen it or start a new one with updated details. Your contributions are invaluable to the community, and we’re here to help!

For more details about our priorities and vision for the future of Prisma ORM, check out our latest blog post: https://www.prisma.io/blog/prisma-orm-manifesto.

Thank you for your understanding and ongoing support of the Prisma community!